/* css/about.css */
/* =========================
ABOUT (LIGHT / BLUE CARDS)
- hedef: beyaz zemin + açık mavi border + soft shadow
- HTML değişmeden çalışır (mevcut class'lar korunuyor)
========================= */
:root{
/* ✅ CONTACT mantığı: sayfa zemin değişkenleri */
--page:#1ce16e; /* çok açık mavi premium zemin */
--page-2:#00eff3; /* beyaza yumuşak geçiş */
/* Base */
--bg:#5bd987;
--ink:#22d6a3; /* slate-900 */
--muted:#2ed6b4; /* slate-600 */
/* Brand blues (soft) */
--blue-900:#0b1b3a;
--blue-700:#1d4ed8;
--blue-600:#2563eb;
--cyan-500:#06b6d4;
/* Surfaces */
--surface:#ffffff;
--surface-2:#f8fafc; /* slate-50 */
--surface-3:#f1f5f9; /* slate-100 */
/* Borders / shadows */
--line:#dbeafe; /* blue-100 */
--line-strong:#bfdbfe; /* blue-200 */
--shadow: 0 18px 45px rgba(2, 6, 23, .10);
--shadow-soft: 0 10px 28px rgba(2, 6, 23, .08);
--r-lg: 24px;
--r-md: 18px;
/* ✅ OKUNURLUK TUNING */
--text-strong:#0b1220;
--text-mid:#0f172a;
--text-soft:#334155;
}
/* ✅ ONLY PAGE BACKGROUND (contact.css gibi) */
body{ background: var(--page) !important; }
/* Sections -> premium light stage */
.about-hero-neo,
.about-values-neo,
.about-stats-neo,
.about-cta-neo{
position: relative;
overflow: hidden;
background:
radial-gradient(900px 420px at 12% 18%, rgba(70, 114, 211, 0.874), transparent 62%),
radial-gradient(900px 420px at 82% 78%, rgba(6, 181, 212, 0.601), transparent 62%),
linear-gradient(180deg, var(--page), var(--page-2));
color: var(--ink);
}
.about-hero-neo{ padding: 70px 0 60px; }
.about-values-neo{ padding: 70px 0; }
.about-stats-neo{ padding: 70px 0; }
.about-cta-neo{ padding: 80px 0; }
/* -------------------------
HERO TOPLINE
------------------------- */
.about-hero-topline{
text-align: center;
margin-bottom: 30px;
}
.about-hero-topline span{
font-weight: 900;
font-size: clamp(18px, 2vw, 28px);
letter-spacing: .05em;
background: linear-gradient(90deg, #032ea3, hsl(198, 86%, 47%), #06c9ec);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
@keyframes heroGradient {
0% { background-position: 0% center; }
100% { background-position: 200% center; }
}
/* -------------------------
HERO GRID
------------------------- */
.about-hero-grid{
display:grid;
grid-template-columns: 420px 1fr;
gap: 34px;
align-items: start;
}
/* left photo (light frame) */
.about-hero-photo{
border-radius: var(--r-lg);
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow);
padding: 14px;
}
.about-hero-photo img{
width:100%;
height: 520px;
object-fit: cover;
border-radius: calc(var(--r-lg) - 10px);
display:block;
}
/* right stacked cards */
.about-hero-cards{
display:flex;
flex-direction: column;
gap: 26px;
}
/* -------------------------
NEO CARD BASE
------------------------- */
.neo-card{
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: var(--shadow-soft);
padding: 28px 30px;
}
.neo-card-lg{ padding: 30px 32px; }
.neo-card-xl{ padding: 28px 30px; }
.neo-card-title{
display:flex;
align-items:center;
gap: 12px;
margin-bottom: 16px;
}
.neo-card-title h2,
.neo-card-title h3{
margin:0;
font-weight: 900;
letter-spacing: .01em;
color: var(--blue-900);
}
.neo-card-title h2{ font-size: 28px; }
.neo-card-title h3{ font-size: 24px; }
/* icon badge */
.neo-ico{
width: 36px;
height: 36px;
border-radius: 12px;
display:grid;
place-items:center;
background: linear-gradient(145deg, rgba(37,99,235,.18), rgba(6,182,212,.14));
border: 1px solid var(--line-strong);
color: var(--blue-700);
font-weight: 900;
box-shadow: 0 10px 24px rgba(37,99,235,.14);
}
.neo-ico-quote{ font-size: 18px; }
/* story text */
.neo-text p{
margin: 0 0 14px;
color: var(--text-mid);
line-height: 1.75;
font-size: 18px;
font-weight: 500;
}
.neo-text p:last-child{ margin-bottom: 0; }
/* -------------------------
SKILLS PILLS (base)
------------------------- */
.pill-grid{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 10px;
}
.pill{
display:flex;
align-items:center;
gap: 12px;
padding: 14px 16px;
border-radius: 14px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: 0 10px 24px rgba(2,6,23,.06);
color: var(--blue-900);
font-weight: 800;
}
.pill:hover{
border-color: var(--line-strong);
transform: translateY(-1px);
transition: .18s ease;
}
.pill-ico{
width: 36px;
height: 36px;
border-radius: 12px;
display:grid;
place-items:center;
background: linear-gradient(145deg, rgba(37,99,235,.22), rgba(6,182,212,.16));
border: 1px solid var(--line-strong);
color: var(--blue-700);
font-weight: 900;
box-shadow: 0 10px 24px rgba(37,99,235,.12);
}
/* -------------------------
VALUES SECTION
------------------------- */
.values-grid{
display:grid;
grid-template-columns: 420px 1fr;
gap: 36px;
align-items: start;
}
.values-photos{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.values-photos .vimg{
width:100%;
height: 210px;
object-fit: cover;
border-radius: 18px;
border: 1px solid var(--line);
box-shadow: var(--shadow-soft);
}
.neo-wrap{
background: var(--surface);
border: 1px solid var(--line);
border-radius: 28px;
padding: 26px;
box-shadow: var(--shadow);
}
.neo-wrap-head{
display:flex;
align-items:center;
gap: 12px;
margin-bottom: 18px;
}
.neo-wrap-head h2{
margin:0;
font-size: 30px;
font-weight: 950;
color: var(--blue-900);
}
.value-cards{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.value-card{
background: var(--surface);
border: 1px solid var(--line);
border-radius: 18px;
padding: 22px 18px;
text-align:center;
box-shadow: 0 12px 28px rgba(2,6,23,.07);
}
.value-ico{
width: 46px;
height: 46px;
margin: 0 auto 12px;
border-radius: 14px;
display:grid;
place-items:center;
background: linear-gradient(145deg, rgba(37,99,235,.22), rgba(6,182,212,.16));
border: 1px solid var(--line-strong);
color: var(--blue-700);
font-weight: 900;
font-size: 18px;
box-shadow: 0 10px 24px rgba(37,99,235,.12);
}
.value-card h4{
margin: 0 0 8px;
font-size: 16px;
font-weight: 900;
color: var(--blue-900);
}
.value-card p{
margin:0;
font-size: 13px;
color: var(--text-soft);
font-weight: 600;
}
/* -------------------------
STATS SECTION
------------------------- */
.stats-layout{
display:grid;
grid-template-columns: 1.2fr 1fr;
gap: 100px;
align-items: center;
}
.stats-text p{
color: var(--text-mid);
line-height: 1.9;
font-size: 20px;
margin: 0 0 18px;
font-weight: 500;
}
.brandline{
display:flex;
align-items:center;
gap: 12px;
margin-bottom: 18px;
}
.brandlogo{
width: 85px;
height: 85px;
object-fit: contain;
border-radius: 12px;
background: var(--surface);
border: 1px solid var(--line);
padding: 6px;
box-shadow: 0 10px 24px rgba(2,6,23,.06);
}
.brandname{
font-size: 22px;
font-weight: 950;
letter-spacing: .02em;
color: rgb(25, 113, 237);
}
.stats-cards{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
}
.stat-neo{
background: var(--surface);
border: 1px solid var(--line);
border-radius: 22px;
padding: 34px 26px;
text-align:center;
box-shadow: var(--shadow-soft);
}
.stat-number{
font-size: 52px;
font-weight: 950;
letter-spacing: .02em;
line-height: 1;
background: linear-gradient(90deg, var(--blue-600), var(--cyan-500));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 14px;
}
.stat-label{
font-size: 15px;
color: var(--text-soft);
font-weight: 800;
}
/* -------------------------
CTA
------------------------- */
.about-cta-neo{
text-align:center;
border-top: 1px solid var(--line);
}
.about-cta-neo h2{
margin: 0 0 14px;
font-size: 54px;
font-weight: 950;
letter-spacing: .01em;
color: var(--blue-900);
}
.about-cta-neo p{
margin: 0 0 26px;
font-size: 18px;
color: var(--text-soft);
font-weight: 700;
}
.cta-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding: 14px 34px;
border-radius: 999px;
background: linear-gradient(90deg, var(--blue-600), var(--cyan-500));
color: #ffffff;
font-weight: 900;
text-decoration:none;
box-shadow: 0 18px 45px rgba(37,99,235,.18);
transition: .18s ease;
}
.cta-btn:hover{
transform: translateY(-1px);
filter: brightness(1.02);
}
/* -------------------------
RESPONSIVE
------------------------- */
@media (max-width: 1100px){
.about-hero-grid,
.values-grid,
.stats-layout{
grid-template-columns: 1fr;
}
.about-hero-photo img{ height: 460px; }
}
@media (max-width: 640px){
/* mobilde zemin bandı daha soft görünsün */
:root{
--page:#f8fbff;
--page-2:#ffffff;
}
.about-hero-neo{ padding: 52px 0 46px; }
.about-values-neo,
.about-stats-neo{ padding: 56px 0; }
.pill-grid,
.value-cards,
.stats-cards{
grid-template-columns: 1fr;
}
.about-cta-neo h2{ font-size: 36px; }
.about-hero-photo img{ height: 380px; }
}
/* =========================
PREMIUM CARD BORDERS (BLUE ONLY)
========================= */
:root{
--bdrA: rgba(37, 99, 235, .85);
--bdrB: rgba(6, 182, 212, .65);
--bdrInner: rgba(255,255,255,.55);
--glow: rgba(37,99,235,.22);
}
.neo-card,
.pill,
.value-card,
.neo-wrap,
.stat-neo,
.about-hero-photo,
.cap-card{
position: relative;
border: 1px solid transparent !important;
background-clip: padding-box;
box-shadow: 0 10px 28px rgba(2,6,23,.08);
}
.neo-card::before,
.pill::before,
.value-card::before,
.neo-wrap::before,
.stat-neo::before,
.about-hero-photo::before,
.cap-card::before{
content:"";
position:absolute;
inset:0;
border-radius: inherit;
padding: 1.2px;
background: linear-gradient(135deg, var(--bdrA), var(--bdrB));
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events:none;
opacity: .55;
}
.neo-card::after,
.pill::after,
.value-card::after,
.neo-wrap::after,
.stat-neo::after,
.about-hero-photo::after,
.cap-card::after{
content:"";
position:absolute;
inset: 10px 10px auto 10px;
height: 32%;
border-radius: 16px;
background: linear-gradient(180deg, rgba(255,255,255,.6), transparent);
opacity: .16;
pointer-events:none;
}
.neo-card:hover,
.pill:hover,
.value-card:hover,
.stat-neo:hover,
.about-hero-photo:hover,
.cap-card:hover{
box-shadow:
0 16px 42px rgba(2,6,23,.12),
0 0 0 5px rgba(37,99,235,.10),
0 18px 55px var(--glow);
transform: translateY(-1px);
transition: .18s ease;
}
.neo-card:hover::before,
.pill:hover::before,
.value-card:hover::before,
.neo-wrap:hover::before,
.stat-neo:hover::before,
.about-hero-photo:hover::before,
.cap-card:hover::before{
opacity: .9;
}
/* =========================
HERO FOUNDERS (2 PHOTO CARDS)
========================= */
.about-founders{
display: grid;
grid-template-columns: 1fr;
gap: 18px;
}
.founder-card{
border-radius: var(--r-lg);
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow);
padding: 14px;
position: relative;
overflow: hidden;
}
.founder-card img{
width: 100%;
aspect-ratio: 7 / 7;
height: auto;
object-fit: cover;
object-position: 50% 22%;
border-radius: calc(var(--r-lg) - 10px);
display: block;
box-shadow: 0 12px 30px rgba(2, 6, 23, .12);
transform: translateZ(0);
}
@media (max-width: 1100px){
.founder-card img{ height: auto; }
}
.founder-meta{
margin-top: 10px;
padding: 10px 12px;
border-radius: 14px;
background: var(--surface-2);
border: 1px solid var(--line);
}
.founder-name{
font-weight: 950;
color: var(--blue-900);
letter-spacing: .01em;
}
.founder-role{
margin-top: 2px;
font-size: 16px;
color: var(--text-mid);
font-weight: 800;
}
/* =========================
CAPABILITIES (Alt 4 Kart) - OKUNURLUK BOOST ✅
========================= */
.cap-divider{
height: 1px;
background: linear-gradient(90deg, rgba(37,99,235,.18), rgba(6,182,212,.18), rgba(37,99,235,.10));
margin: 18px 0;
}
.cap-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.cap-card{
background: var(--surface);
border: 1px solid var(--line);
border-radius: 16px;
padding: 14px 14px 12px;
box-shadow: 0 10px 24px rgba(2,6,23,.06);
position: relative;
overflow: hidden;
}
.cap-head{
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.cap-ico{
width: 38px;
height: 38px;
border-radius: 12px;
display: grid;
place-items: center;
background: linear-gradient(145deg, rgba(37,99,235,.22), rgba(6,182,212,.16));
border: 1px solid var(--line-strong);
box-shadow: 0 10px 22px rgba(37,99,235,.10);
flex: 0 0 auto;
}
.cap-svg{
width: 20px;
height: 20px;
fill: var(--blue-700);
}
.cap-card h4{
margin: 0;
font-size: 15px;
font-weight: 950;
color: var(--blue-900);
letter-spacing: .01em;
}
/* ✅ Burada sönüklük bitiyor */
.cap-list{
margin: 0;
padding-left: 18px;
color: var(--text-strong);
font-size: 13.8px;
line-height: 1.60;
font-weight: 600;
}
.cap-list li{
margin: 6px 0;
}
/* responsive */
@media (max-width: 640px){
.cap-grid{ grid-template-columns: 1fr; }
}
/* =========================
ÜST 4 KARTI ALTAKİYLE AYNI YAP
========================= */
.pill-grid--detail{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-top: 10px;
}
.pill--detail{
background: var(--surface);
border: 1px solid var(--line);
border-radius: 16px;
padding: 14px 14px 12px;
box-shadow: 0 10px 24px rgba(2,6,23,.06);
position: relative;
overflow: hidden;
display: flex;
align-items: flex-start;
gap: 10px;
}
.pill--detail:hover{
transform: translateY(-1px);
transition: .18s ease;
border-color: var(--line-strong);
box-shadow: 0 14px 30px rgba(2,6,23,.08);
}
.pill--detail .pill-ico{
width: 38px;
height: 38px;
border-radius: 12px;
display: grid;
place-items: center;
background: linear-gradient(145deg, rgba(37,99,235,.22), rgba(6,182,212,.16));
border: 1px solid var(--line-strong);
box-shadow: 0 10px 22px rgba(37,99,235,.10);
flex: 0 0 auto;
}
.pill--detail .pill-svg{
width: 20px;
height: 20px;
fill: var(--blue-700);
}
.pill--detail .pill-txt{ min-width: 0; }
.pill--detail .pill-title{
margin: 0;
font-size: 15px;
font-weight: 950;
color: var(--blue-900);
letter-spacing: .01em;
line-height: 1.25;
}
.pill--detail .pill-list{
margin: 10px 0 0;
padding-left: 18px;
color: var(--text-strong);
font-size: 13.8px;
line-height: 1.60;
font-weight: 600;
}
.pill--detail .pill-list li{ margin: 6px 0; }
@media (max-width: 640px){
.pill-grid--detail{ grid-template-columns: 1fr; }
}
/* css/admin.css */
/* =========================
GLOBAL UI IMPROVEMENTS
========================= */
/* Font */
body {
font-family: 'Inter', sans-serif;
}
/* Sidebar */
.main-sidebar {
backdrop-filter: blur(10px);
}
/* Cards */
.card {
border-radius: 14px;
box-shadow: 0 10px 30px rgba(0,0,0,.15);
}
/* Buttons */
.btn {
border-radius: 10px;
}
/* Tables */
.table {
border-radius: 10px;
overflow: hidden;
}
/* =========================
ADMIN IMAGE FIX (SCOPED)
========================= */
/* Sadece admin form görselleri */
.form-row img,
.form-group img,
.field-box img,
.field-image img,
.field-logo img {
max-width: 150px !important;
height: auto !important;
border-radius: 8px;
display: block;
margin-top: 8px;
}
/* File input taşma fix */
input[type="file"] {
max-width: 100%;
}
/* =========================
LOGIN PAGE (SaaS STYLE)
========================= */
/* Background */
body.login-page {
background: linear-gradient(135deg, #0f172a, #1e293b);
}
/* Login box */
.login-box,
.login-box .card {
max-width: 420px;
width: 100%;
margin: 0 auto;
border-radius: 16px;
overflow: hidden;
}
/* Card body */
.login-card-body {
padding: 30px 25px !important;
text-align: center;
}
/* Logo alanı */
.login-box .login-logo {
text-align: center;
margin-bottom: 20px;
}
/* Logo stil */
.login-logo img {
max-width: 120px;
padding: 10px;
background: #fff;
border-radius: 14px;
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
/* Logo + form birleşimi */
.login-box .card {
padding-top: 20px;
}
/* Inputs */
.login-card-body .form-control {
border-radius: 10px;
padding: 12px;
}
/* Button */
.login-card-body .btn {
border-radius: 10px;
padding: 12px;
font-weight: 500;
}
/* css/blog_detail.css */
/* =========================
BLOG DETAIL — Premium / Tech Card (FULL RESPONSIVE)
Scope: .page-blog-detail
========================= */
.page-blog-detail{
--ink:#e9fbff;
--muted: rgba(233,251,255,.72);
--muted2: rgba(233,251,255,.56);
--mint:#64f1c2;
--aqua:#4fd3ff;
--line: rgba(255,255,255,.12);
--shadow: 0 22px 70px rgba(0,0,0,.45);
--radius: 22px;
min-height: 100vh;
color: var(--ink);
background:
radial-gradient(1200px 650px at 15% 85%, rgb(71, 230, 193), transparent 60%),
radial-gradient(900px 520px at 85% 15%, rgb(20, 182, 236), transparent 55%),
linear-gradient(180deg, #089ed5 0%, #50c37c 45%, #0b6a70 100%);
}
.page-blog-detail .container{
max-width: 980px;
margin: 0 auto;
padding-left: 16px;
padding-right: 16px;
}
/* content spacing */
.page-blog-detail .bd{
padding: 26px 0 84px;
}
.page-blog-detail a{ color: inherit; }
.page-blog-detail img{ max-width: 100%; display:block; }
/* =========================
TOPBAR
========================= */
.page-blog-detail .bd-top{
display:flex;
justify-content: space-between;
align-items:center;
gap: 10px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.page-blog-detail .bd-back{
display:inline-flex;
align-items:center;
gap: 8px;
padding: 10px 14px;
border-radius: 999px;
text-decoration:none;
font-weight: 900;
font-size: 13px;
line-height: 1;
color: rgba(255,255,255,.92);
background: rgba(0,0,0,.22);
border: 1px solid rgba(255,255,255,.14);
box-shadow: 0 14px 35px rgba(0,0,0,.25);
transition: transform .16s ease, filter .16s ease, border-color .16s ease;
}
.page-blog-detail .bd-back:hover{
transform: translateY(-1px);
filter: brightness(1.05);
border-color: rgba(255,255,255,.22);
}
.page-blog-detail .bd-pill{
font-size: 11px;
font-weight: 950;
letter-spacing: .03em;
padding: 8px 12px;
border-radius: 999px;
color: rgba(0,0,0,.82);
background: linear-gradient(135deg, var(--mint), var(--aqua));
box-shadow: 0 10px 26px rgba(0,0,0,.32);
white-space: nowrap;
}
/* =========================
CARD
========================= */
.page-blog-detail .bd-card{
position: relative;
border-radius: var(--radius);
background: rgba(3,18,24,.72);
border: 1px solid var(--line);
box-shadow: var(--shadow);
overflow: hidden;
}
/* gradient border */
.page-blog-detail .bd-card::before{
content:"";
position:absolute;
inset:0;
padding: 1px;
border-radius: var(--radius);
background: linear-gradient(135deg,
rgba(59,164,199,.95),
rgba(32,231,184,.90),
rgba(133,207,196,.90)
);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events:none;
opacity: .55;
}
/* subtle tech shine (lighter, doesn't wash text) */
.page-blog-detail .bd-card::after{
content:"";
position:absolute;
inset:-40%;
background: radial-gradient(circle at 38% 30%, rgba(79,211,255,.12), transparent 55%);
pointer-events:none;
}
/* =========================
HEADER
========================= */
.page-blog-detail .bd-head{
position: relative;
padding: 20px 16px 14px;
}
.page-blog-detail .bd-title{
margin: 0;
font-size: clamp(22px, 5.8vw, 42px);
line-height: 1.12;
font-weight: 950;
letter-spacing: .01em;
text-shadow: 0 18px 70px rgba(0,0,0,.35);
word-break: break-word;
}
.page-blog-detail .bd-meta{
margin-top: 10px;
display:flex;
flex-wrap: wrap;
align-items:center;
gap: 10px;
color: var(--muted2);
font-size: 12px;
}
.page-blog-detail .bd-meta-item{
display:inline-flex;
align-items:center;
gap: 8px;
}
.page-blog-detail .bd-meta-sep{ opacity:.6; }
.page-blog-detail .bd-dot{
width: 7px; height: 7px;
border-radius: 50%;
background: rgba(79,211,255,.9);
box-shadow: 0 0 0 4px rgba(79,211,255,.12);
}
.page-blog-detail .bd-dot--alt{
background: rgba(46,195,160,.95);
box-shadow: 0 0 0 4px rgba(46,195,160,.12);
}
/* =========================
COVER (responsive ratios)
========================= */
.page-blog-detail .bd-cover{
position: relative;
margin: 0 12px 10px;
border-radius: 16px;
overflow:hidden;
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.page-blog-detail .bd-cover img{
width: 100%;
height: auto;
aspect-ratio: 16 / 9; /* ✅ mobilede düzgün oran */
object-fit: cover;
transform: scale(1.01);
}
/* =========================
BODY / TYPOGRAPHY
========================= */
.page-blog-detail .bd-body{
padding: 8px 16px 18px;
}
.page-blog-detail .bd-content{
color: rgba(233,251,255,.92);
font-size: 15px;
line-height: 1.9;
}
.page-blog-detail .bd-content p{
margin: 0 0 14px;
color: rgba(233,251,255,.90);
}
.page-blog-detail .bd-content h2,
.page-blog-detail .bd-content h3,
.page-blog-detail .bd-content h4{
margin: 18px 0 10px;
line-height: 1.25;
font-weight: 950;
}
.page-blog-detail .bd-content ul,
.page-blog-detail .bd-content ol{
margin: 0 0 14px 18px;
padding: 0;
}
.page-blog-detail .bd-content li{
margin: 6px 0;
}
.page-blog-detail .bd-content blockquote{
margin: 16px 0;
padding: 12px 14px;
border-left: 3px solid rgba(79,211,255,.55);
background: rgba(0,0,0,.16);
border-radius: 14px;
color: rgba(233,251,255,.88);
}
.page-blog-detail .bd-content a{
color: rgba(79,211,255,.95);
text-decoration:none;
font-weight: 900;
}
.page-blog-detail .bd-content a:hover{
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-color: rgba(79,211,255,.55);
}
/* =========================
REMOVE SHARE/DIVIDER (hard kill)
(Sen paylaşımları kaldırmak istiyorsun)
========================= */
.page-blog-detail .bd-divider,
.page-blog-detail .bd-share{
display: none !important;
}
/* =========================
BREAKPOINTS
========================= */
/* >= 520px */
@media (min-width: 520px){
.page-blog-detail .bd{ padding: 32px 0 92px; }
.page-blog-detail .bd-head{ padding: 22px 18px 14px; }
.page-blog-detail .bd-cover{ margin: 0 14px 10px; border-radius: 18px; }
.page-blog-detail .bd-body{ padding: 10px 18px 22px; }
}
/* >= 720px */
@media (min-width: 720px){
.page-blog-detail .bd{ padding: 46px 0 110px; }
.page-blog-detail .bd-top{
margin-bottom: 16px;
flex-wrap: nowrap;
}
.page-blog-detail .bd-head{ padding: 28px 24px 18px; }
.page-blog-detail .bd-cover{
margin: 0 24px 12px;
border-radius: 20px;
}
.page-blog-detail .bd-cover img{
aspect-ratio: 21 / 9; /* desktop daha sinematik */
}
.page-blog-detail .bd-body{
padding: 12px 24px 26px;
}
.page-blog-detail .bd-content{
font-size: 16px;
}
}
/* >= 1050px */
@media (min-width: 1050px){
.page-blog-detail .container{ padding-left: 18px; padding-right: 18px; }
.page-blog-detail .bd-head{ padding: 30px 28px 20px; }
.page-blog-detail .bd-cover{ margin: 0 28px 14px; }
.page-blog-detail .bd-body{ padding: 12px 28px 30px; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
*{ scroll-behavior: auto !important; }
}
/* =========================
CARD FOOTER (Centered Back Button)
========================= */
.page-blog-detail .bd-card-top{
padding: 18px 22px 0;
}
.page-blog-detail .bd-card-footer{
padding: 26px 22px 32px;
display: flex;
justify-content: center;
align-items: center;
}
.page-blog-detail .bd-back-bottom{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding: 12px 22px;
border-radius: 999px;
text-decoration:none;
font-weight: 900;
font-size: 14px;
color: rgba(255,255,255,.92);
background: rgba(0,0,0,.22);
border: 1px solid rgba(255,255,255,.16);
box-shadow: 0 16px 40px rgba(0,0,0,.35);
transition: all .18s ease;
}
.page-blog-detail .bd-back-bottom:hover{
transform: translateY(-2px);
border-color: rgba(255,255,255,.28);
box-shadow: 0 20px 55px rgba(0,0,0,.45);
background: linear-gradient(135deg, var(--mint), var(--aqua));
color: rgba(0,0,0,.85);
}
/* css/blog_list.css */
/* =========================
BLOG (Scoped) — FULL RESPONSIVE (Mobile-first)
Works only inside: ...
========================= */
.page-blog{
/* Variables scoped to blog page only */
--bg-0:#27e0b8;
--bg-1:#3fced0;
--bg-2:#47bfc1;
--ink:#e9fbff;
--muted:rgba(233,251,255,.72);
--muted2:rgba(233,251,255,.56);
--line:rgba(255,255,255,.10);
--line2:rgba(255,255,255,.16);
--cyan:#47e6ff;
--mint:#64f1c2;
--aqua:#4fd3ff;
--shadow: 0 18px 55px rgba(0,0,0,.45);
--radius: 18px;
min-height: 100vh;
isolation: isolate;
display: block;
background:
radial-gradient(1200px 650px at 15% 85%, rgba(71, 230, 193, .85), transparent 60%),
radial-gradient(900px 520px at 85% 15%, rgba(54, 163, 200, .75), transparent 55%),
linear-gradient(180deg, var(--bg-0), #40d7c1 45%, #43c7c1 100%);
color: var(--ink);
}
/* =========================
BLOG (Scoped) — FULL RESPONSIVE (Mobile-first)
Works only inside: ...
========================= */
.page-blog{
--bg-0:#27e0b8;
--bg-1:#3fced0;
--bg-2:#47bfc1;
--ink:#e9fbff;
--muted:rgba(233,251,255,.72);
--muted2:rgba(233,251,255,.56);
--line:rgba(255,255,255,.10);
--line2:rgba(255,255,255,.16);
--cyan:#47e6ff;
--mint:#64f1c2;
--aqua:#4fd3ff;
--shadow: 0 18px 55px rgba(0,0,0,.45);
--radius: 18px;
min-height: 100vh;
isolation: isolate;
display: block;
background:
radial-gradient(1200px 650px at 15% 85%, rgba(71, 230, 193, .85), transparent 60%),
radial-gradient(900px 520px at 85% 15%, rgba(54, 163, 200, .75), transparent 55%),
linear-gradient(180deg, var(--bg-0), #40d7c1 45%, #43c7c1 100%);
color: var(--ink);
}
/* ✅ ÖNEMLİ: .page-blog .container YOK! Navbar'ı bozan buydu. */
/* Blog sayfasında sadece blog bölümlerindeki container'ları hedefle */
.page-blog .blog-hero .container,
.page-blog .blog-list .container,
.page-blog .blog-cta .container{
max-width: 1150px;
margin: 0 auto;
padding-left: 16px;
padding-right: 16px;
}
/* =========================
HERO — Animated Globe + Scanlines + Glass + Capsule
========================= */
.page-blog .blog-hero{
position: relative;
overflow: hidden;
isolation: isolate;
padding: 92px 0 86px;
border-bottom-left-radius: 90px;
border-bottom-right-radius: 90px;
border-bottom: 1px solid rgba(255,255,255,.14);
background:
radial-gradient(820px 520px at 14% 75%, rgba(31,224,182,.45), transparent 62%),
radial-gradient(780px 460px at 86% 18%, rgba(16,176,208,.38), transparent 60%),
linear-gradient(90deg, #1558d4 0%, #1fe0b6 52%, #10b0d0 100%);
margin-bottom: 42px;
}
/* ... devamı senin CSS’in aynı kalacak ... */
/* =========================
BREAKPOINTS
========================= */
@media (min-width: 680px){
.page-blog .blog-hero .container,
.page-blog .blog-list .container,
.page-blog .blog-cta .container{
padding-left: 18px;
padding-right: 18px;
}
.page-blog .blog-hero{
padding: 110px 0 108px;
border-bottom-left-radius: 140px;
border-bottom-right-radius: 140px;
margin-bottom: 60px;
}
/* diğer kurallar aynı */
}
@media (min-width: 1050px){
.page-blog .blog-hero{
padding: 135px 0 125px;
border-bottom-left-radius: 200px;
border-bottom-right-radius: 200px;
margin-bottom: 80px;
}
/* diğer kurallar aynı */
}
@media (prefers-reduced-motion: reduce){
.page-blog .blog-hero::before,
.page-blog .blog-hero::after,
.page-blog .blog-hero__glow{
animation: none !important;
}
}
.page-blog a{ color: inherit; }
.page-blog img{ max-width: 100%; display:block; }
/* =========================
HERO — Animated Globe + Scanlines + Glass + Capsule
(Single source of truth, no duplicated selectors)
========================= */
.page-blog .blog-hero{
position: relative;
overflow: hidden;
isolation: isolate;
/* Mobile-first spacing */
padding: 92px 0 86px;
/* Capsule curve: mobile smaller, desktop larger (override later) */
border-bottom-left-radius: 90px;
border-bottom-right-radius: 90px;
border-bottom: 1px solid rgba(255,255,255,.14);
background:
radial-gradient(820px 520px at 14% 75%, rgba(31,224,182,.45), transparent 62%),
radial-gradient(780px 460px at 86% 18%, rgba(16,176,208,.38), transparent 60%),
linear-gradient(90deg, #1558d4 0%, #1fe0b6 52%, #10b0d0 100%);
margin-bottom: 42px;
}
/* Canvas globe layer (optional) */
.page-blog .globe-canvas{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
opacity: .88;
mix-blend-mode: overlay;
}
/* CSS globe grid */
.page-blog .blog-hero::before{
content:"";
position:absolute;
inset:-110px -110px -140px -110px;
z-index: 2;
pointer-events:none;
background:
conic-gradient(from 0deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,.18) 12%,
rgba(255,255,255,0) 26%,
rgba(255,255,255,.10) 44%,
rgba(255,255,255,0) 62%,
rgba(255,255,255,.16) 78%,
rgba(255,255,255,0) 100%
),
repeating-linear-gradient(
0deg,
rgba(255,255,255,.12) 0 1px,
rgba(255,255,255,0) 1px 18px
),
repeating-linear-gradient(
90deg,
rgba(255,255,255,.09) 0 1px,
rgba(255,255,255,0) 1px 24px
);
-webkit-mask: radial-gradient(circle at 50% 45%, #000 0 45%, transparent 62%);
mask: radial-gradient(circle at 50% 45%, #000 0 45%, transparent 62%);
opacity: .35;
mix-blend-mode: overlay;
filter: blur(.2px) saturate(1.08) contrast(1.03);
transform-origin: 50% 45%;
animation: blogGlobeRotate 16s linear infinite;
}
@keyframes blogGlobeRotate{
from{ transform: rotate(0deg) scale(1.05); }
to { transform: rotate(360deg) scale(1.05); }
}
/* Scanlines + shimmer */
.page-blog .blog-hero::after{
content:"";
position:absolute;
inset:0;
z-index: 3;
pointer-events:none;
background:
repeating-linear-gradient(
180deg,
rgba(0,0,0,.10) 0 1px,
rgba(0,0,0,0) 1px 6px
),
linear-gradient(
90deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,.10) 25%,
rgba(255,255,255,0) 55%
),
repeating-linear-gradient(
90deg,
rgba(255,255,255,.05) 0 1px,
rgba(255,255,255,0) 1px 10px
);
opacity: .52;
mix-blend-mode: soft-light;
animation: blogScanSweep 6.5s ease-in-out infinite;
}
@keyframes blogScanSweep{
0% { transform: translateX(-18%); opacity:.40; }
50% { transform: translateX(18%); opacity:.62; }
100% { transform: translateX(-18%); opacity:.40; }
}
/* Floating glows */
.page-blog .blog-hero__glow{
position: absolute;
width: 420px;
height: 420px;
filter: blur(44px);
opacity: .42;
pointer-events: none;
z-index: 4;
animation: blogGlowFloat 7.5s ease-in-out infinite;
}
.page-blog .blog-hero__glow--a{
left: -180px;
bottom: -220px;
background: radial-gradient(circle at 30% 30%, rgba(46,195,160,.85), transparent 60%);
animation-delay: -1.2s;
}
.page-blog .blog-hero__glow--b{
right: -220px;
top: -220px;
background: radial-gradient(circle at 30% 30%, rgba(79,211,255,.80), transparent 60%);
animation-delay: -3.4s;
}
@keyframes blogGlowFloat{
0% { transform: translate3d(0,0,0) scale(1); }
50% { transform: translate3d(18px,-12px,0) scale(1.06); }
100% { transform: translate3d(0,0,0) scale(1); }
}
/* Text layer + glass panel */
.page-blog .blog-hero__inner{
position: relative;
z-index: 6;
text-align: center;
max-width: 860px;
margin: 0 auto;
}
.page-blog .blog-hero__inner::before{
content:"";
position:absolute;
inset:-26px -14px;
z-index:-1;
border-radius: 22px;
background:
linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,0) 55%),
radial-gradient(650px 280px at 18% 22%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%),
radial-gradient(650px 280px at 78% 70%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%);
border: 1px solid rgba(255,255,255,.16);
box-shadow: 0 18px 60px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.18);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Neon horizon */
.page-blog .blog-hero__inner::after{
content:"";
position:absolute;
left: 50%;
bottom: -34px;
transform: translateX(-50%);
width: min(820px, 92vw);
height: 4px;
background: linear-gradient(
90deg,
rgb(233, 0, 0) 0%,
#026645 20%,
#08b8d3 50%,
#04bade 80%,
rgb(245, 3, 3) 100%
);
border-radius: 999px;
box-shadow:
0 0 12px rgba(71,230,255,.85),
0 0 28px rgba(31,224,182,.75),
0 0 60px rgba(16,176,208,.55);
animation: heroLinePulse 3.8s ease-in-out infinite;
}
@keyframes heroLinePulse{
0%,100%{ opacity: .9; transform: translateX(-50%) scaleX(1); }
50%{ opacity: 1; transform: translateX(-50%) scaleX(1.04); }
}
.page-blog .blog-hero__title{
margin: 0;
font-size: clamp(30px, 7vw, 54px);
font-weight: 950;
letter-spacing: .02em;
color: var(--ink);
text-shadow: 0 18px 80px rgba(0,0,0,.33), 0 0 28px rgba(16,176,208,.18);
}
.page-blog .blog-hero__subtitle{
margin: 10px auto 0;
max-width: 620px;
font-size: 20px;
color: rgb(255, 255, 255);
letter-spacing: .02em;
text-shadow: 0 10px 30px rgba(0,0,0,.22);
}
/* HERO TITLE – Animated Gradient Text */
.page-blog .blog-hero__title{
margin: 0;
font-size: clamp(38px, 4.6vw, 64px);
font-weight: 950;
letter-spacing: .02em;
background: linear-gradient(
90deg,
#fc0000 0%,
#019f6a 25%,
#028da2 50%,
#0589a3 75%,
#a60202 100%
);
background-size: 300% 300%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: heroGradientMove 8s ease infinite;
/* glow efekti */
text-shadow:
0 0 18px rgba(31,224,182,.35),
0 0 40px rgba(16,176,208,.25);
}
@keyframes heroGradientMove{
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* =========================
LIST
========================= */
.page-blog .blog-list{
padding: 46px 0 42px;
background:
radial-gradient(900px 520px at 18% 85%, rgba(42, 232, 187, .55), transparent 60%),
radial-gradient(900px 520px at 82% 20%, rgba(43, 183, 230, .45), transparent 55%),
linear-gradient(180deg, rgba(44, 126, 118, .92) 0%, rgba(60, 151, 184, 0.96) 100%);
border-bottom: 1px solid rgba(255,255,255,.05);
}
.page-blog .blog-grid{
display: grid;
grid-template-columns: 1fr; /* mobile-first */
gap: 16px;
align-items: stretch;
}
/* CARD */
.page-blog .blog-card{
position: relative;
border-radius: var(--radius);
background: rgba(3, 18, 24, .72);
border: 1px solid var(--line);
box-shadow: var(--shadow);
overflow: hidden;
transform: translateZ(0);
transition: transform .18s ease, border-color .18s ease;
}
.page-blog .blog-card::before{
content:"";
position:absolute;
inset:0;
padding: 1px;
border-radius: var(--radius);
background: linear-gradient(135deg, rgba(59, 164, 199, .92), rgba(32, 231, 184, .92), rgba(133, 207, 196, .92));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events:none;
opacity: .55;
}
.page-blog .blog-card:hover{
border-color: rgba(255,255,255,.16);
transform: translateY(-1px);
}
.page-blog .blog-card__cover{
position: relative;
display: block;
height: 170px; /* mobile shorter */
overflow: hidden;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.page-blog .blog-card__cover img{
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.02);
transition: transform .55s ease;
}
.page-blog .blog-card:hover .blog-card__cover img{ transform: scale(1.08); }
.page-blog .blog-card__cover--fallback{
width:100%;
height:100%;
background:
radial-gradient(600px 280px at 20% 80%, rgba(46,195,160,.35), transparent 60%),
radial-gradient(600px 280px at 80% 20%, rgba(79,211,255,.25), transparent 55%),
linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.page-blog .blog-card__pill{
position:absolute;
top: 10px;
left: 10px;
font-size: 11px;
font-weight: 800;
letter-spacing: .03em;
padding: 6px 9px;
border-radius: 999px;
color: rgba(0,0,0,.82);
background: linear-gradient(135deg, var(--mint), var(--aqua));
box-shadow: 0 10px 26px rgba(0,0,0,.32);
}
/* BODY */
.page-blog .blog-card__body{ padding: 14px 14px 16px; }
.page-blog .blog-card__meta{
display:flex;
flex-wrap: wrap;
align-items:center;
gap: 8px;
color: var(--muted2);
font-size: 12px;
margin-bottom: 10px;
}
.page-blog .meta-item{
display:inline-flex;
align-items:center;
gap: 8px;
}
.page-blog .meta-sep{ opacity: .6; }
.page-blog .dot{
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(79,211,255,.9);
box-shadow: 0 0 0 4px rgba(79,211,255,.12);
}
.page-blog .dot--alt{
background: rgba(46,195,160,.95);
box-shadow: 0 0 0 4px rgba(46,195,160,.12);
}
.page-blog .blog-card__title{
margin: 0 0 8px;
font-size: 16px;
line-height: 1.35;
font-weight: 900;
}
.page-blog .blog-card__title a{ color: var(--ink); text-decoration: none; }
.page-blog .blog-card__title a:hover{
text-decoration: underline;
text-decoration-color: rgba(79,211,255,.5);
text-underline-offset: 4px;
}
.page-blog .blog-card__excerpt{
margin: 0 0 12px;
font-size: 13px;
line-height: 1.6;
color: var(--muted);
max-height: 3.2em;
overflow: hidden;
}
.page-blog .blog-card__link{
display:inline-flex;
align-items:center;
gap: 8px;
font-weight: 800;
font-size: 13px;
text-decoration: none;
color: rgba(79,211,255,.95);
}
.page-blog .blog-card__link .arrow{ transition: transform .25s ease; }
.page-blog .blog-card:hover .blog-card__link .arrow{ transform: translateX(3px); }
/* EMPTY */
.page-blog .blog-empty{
grid-column: 1 / -1;
padding: 22px 14px;
border-radius: 14px;
border: 1px dashed rgba(255,255,255,.16);
color: var(--muted);
text-align:center;
background: rgba(0,0,0,.18);
}
/* =========================
CTA
========================= */
.page-blog .blog-cta{
padding: 56px 0 64px;
background:
radial-gradient(1000px 520px at 20% 25%, rgba(79,211,255,.16), transparent 60%),
radial-gradient(1100px 600px at 18% 85%, rgba(46,195,160,.24), transparent 62%),
linear-gradient(180deg, rgba(2,16,21,.96) 0%, rgba(3,32,34,.96) 55%, rgba(5,84,86,.92) 100%);
}
.page-blog .blog-cta__inner{
text-align:center;
max-width: 760px;
margin: 0 auto;
}
.page-blog .blog-cta__title{
margin: 0;
font-size: clamp(22px, 6vw, 38px);
font-weight: 950;
letter-spacing: .01em;
}
.page-blog .blog-cta__text{
margin: 10px auto 18px;
max-width: 620px;
color: var(--muted);
font-size: 13px;
line-height: 1.7;
}
.page-blog .blog-cta__form{
display:flex;
justify-content:center;
align-items:center;
gap: 10px;
flex-wrap: wrap;
margin-top: 14px;
}
.page-blog .blog-cta__input{
width: min(460px, 92vw);
height: 44px;
padding: 0 14px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(0,0,0,.18);
color: var(--ink);
outline: none;
box-shadow: 0 14px 35px rgba(0,0,0,.25);
font: inherit;
}
.page-blog .blog-cta__input::placeholder{ color: rgba(233,251,255,.55); }
.page-blog .blog-cta__input:focus{
border-color: rgba(79,211,255,.45);
box-shadow: 0 0 0 6px rgba(79,211,255,.10), 0 14px 35px rgba(0,0,0,.25);
}
.page-blog .blog-cta__btn{
height: 44px;
padding: 0 18px;
border-radius: 999px;
border: 0;
cursor: pointer;
font-weight: 900;
letter-spacing: .02em;
color: rgba(0,0,0,.82);
background: linear-gradient(135deg, var(--mint), var(--aqua));
box-shadow: 0 18px 40px rgba(0,0,0,.35);
transition: transform .18s ease, filter .18s ease;
}
.page-blog .blog-cta__btn:hover{
transform: translateY(-1px);
filter: brightness(1.05);
}
.page-blog .blog-cta__btn:active{ transform: translateY(0); }
/* =========================
BREAKPOINTS (tablet/desktop)
========================= */
/* >= 680px: tablet */
@media (min-width: 680px){
/* BLOG alanlarının container’ı (navbar’a dokunmaz) */
.page-blog .blog-hero .container,
.page-blog .blog-list .container,
.page-blog .blog-cta .container{
max-width: 1150px;
margin: 0 auto;
padding-left: 16px;
padding-right: 16px;
}
@media (min-width: 680px){
.page-blog .blog-hero .container,
.page-blog .blog-list .container,
.page-blog .blog-cta .container{
padding-left: 18px;
padding-right: 18px;
}
}
.page-blog .blog-hero{
padding: 110px 0 108px;
border-bottom-left-radius: 140px;
border-bottom-right-radius: 140px;
margin-bottom: 60px;
}
.page-blog .blog-hero__inner::before{
inset:-40px -22px;
border-radius: 26px;
}
.page-blog .blog-hero__inner::after{
bottom: -22px;
width: min(700px, 88vw);
height: 3px;
}
.page-blog .blog-grid{
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
.page-blog .blog-card__cover{ height: 185px; }
}
/* >= 1050px: desktop */
@media (min-width: 1050px){
.page-blog .blog-hero{
padding: 135px 0 125px;
border-bottom-left-radius: 200px;
border-bottom-right-radius: 200px;
margin-bottom: 80px;
}
.page-blog .blog-hero__glow{
width: 580px;
height: 580px;
opacity: .45;
}
.page-blog .blog-hero__inner::before{
inset:-54px -34px;
border-radius: 30px;
}
.page-blog .blog-grid{
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px;
}
.page-blog .blog-card__cover{ height: 190px; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
.page-blog .blog-hero::before,
.page-blog .blog-hero::after,
.page-blog .blog-hero__glow{
animation: none !important;
}
}
/* Blog sayfasında header/nav container asla değişmesin */
.page-blog .main-header .container{
max-width: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* css/contact.css */
/* =========================
CONTACT (NAVBAR-DARK HERO + LIGHT STAGE + DARK GLASS CARDS)
- Hero: navbar dili (koyu mavi)
- Stage: resim 2 (light radial)
- Cards/Inputs: resim 1 (dark glass)
========================= */
:root{
--page:#ffffff;
--ink:#60bbb9;
--muted:#9fb7da;
--blue-900:#4a8aba;
--blue-700:#1d4ed8;
--blue-600:#25ebde;
--cyan-500:#06b6d4;
--lineA: rgba(78, 129, 239, 0.55);
--lineB: rgba(6, 182, 212, .45);
--glassA: rgba(72, 137, 210, 0.92);
--glassB: rgba(48, 213, 133, 0.88);
--shadow: 0 22px 55px rgba(68, 152, 182, 0.18);
--r-lg: 22px;
--r-md: 16px;
}
body{ background: var(--page) !important; }
/* =========================================================
HERO
========================================================= */
.contact-hero{
position: relative;
overflow: visible; /* ✅ bandın shadow'u kesilmesin */
padding: 110px 0 90px;
text-align: center;
color: #eaf3ff;
background: transparent; /* ✅ background artık panel pseudo’da */
isolation: isolate; /* ✅ z-index güvenli */
}
/* Asıl hero paneli (şekli burada veriyoruz) */
.contact-hero::before{
content:"";
position:absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
/* ✅ */
border-bottom-left-radius: 200px;
border-bottom-right-radius: 200px;
/* ✅ RENKLER */
background:
radial-gradient(900px 420px at 12% 18%, rgba(111, 140, 202, 0.18), transparent 62%),
radial-gradient(900px 420px at 82% 78%, rgba(53, 199, 225, 0.14), transparent 62%),
linear-gradient(135deg, #5fab52, #5b84d5);
/* ✅ panel hissi + gölge */
box-shadow: 0 26px 70px rgb(3, 255, 247);
}
/* Üstten hafif ışık / premium highlight (resimdeki parlaklık hissi) */
.contact-hero::after{
content:"";
position:absolute;
left: 22px;
right: 22px;
top: 14px;
height: 38%;
z-index: -1;
border-radius: 28px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.697), transparent);
opacity: .45;
pointer-events: none;
}
/* Badge aynen */
.contact-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding: 8px 16px;
border-radius: 999px;
font-size: 15px;
font-weight: 950;
letter-spacing: .12em;
text-transform: uppercase;
color: #bff3ff;
background: rgba(6,182,212,.12);
border: 1px solid rgba(6,182,212,.30);
box-shadow: 0 16px 40px rgba(6,182,212,.10);
margin-bottom: 16px;
}
.contact-hero h1{
margin: 0 0 12px;
font-size: 52px;
font-weight: 950;
letter-spacing: .01em;
}
.contact-hero p{
margin: 0;
color: rgba(255,255,255,.78);
font-size: 20px;
}
/* Responsive: alt radius ve padding küçülsün */
@media (max-width: 900px){
.contact-hero{
padding: 92px 0 72px;
}
.contact-hero::before{
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
}
.contact-hero h1{
font-size: 38px;
}
}
.hero-gradient-text{
background: linear-gradient(
90deg,
#ffffff,
#00ffd5,
#4facfe,
#ffffff
);
background-size: 300% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: heroTextFlow 6s ease-in-out infinite;
}
@keyframes heroTextFlow{
0% { background-position: 0% center; }
50% { background-position: 100% center; }
100% { background-position: 0% center; }
}
/* =========================================================
STAGE BACKGROUND (resim 2)
========================================================= */
.contact-stage{
position: relative;
overflow: hidden;
padding: 70px 0 90px;
background:
radial-gradient(950px 440px at 12% 18%, rgb(4, 232, 140), transparent 62%),
radial-gradient(950px 440px at 82% 78%, rgba(6, 181, 212, 0.8), transparent 62%),
#63d5e7;
}
/* =========================================================
GRID
========================================================= */
.contact-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 34px;
margin: 0;
align-items: start;
}
/* =========================================================
GLASS CARD (resim 1)
========================================================= */
.glass-card{
position: relative;
border-radius: var(--r-lg);
padding: 34px;
box-shadow: var(--shadow);
overflow: hidden;
background: linear-gradient(180deg, var(--glassA), var(--glassB));
border: 1px solid rgba(255,255,255,.10);
backdrop-filter: blur(14px);
}
.glass-card::before{
content:"";
position:absolute;
inset:0;
border-radius: inherit;
padding: 1.2px;
background: linear-gradient(135deg, var(--lineA), var(--lineB));
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events:none;
opacity: .85;
}
.glass-card::after{
content:"";
position:absolute;
left: 16px;
right: 16px;
top: 12px;
height: 34%;
border-radius: 16px;
background: linear-gradient(180deg, rgba(255,255,255,.18), transparent);
pointer-events:none;
opacity: .30;
}
.glass-card:hover{
transform: translateY(-1px);
transition: .18s ease;
box-shadow:
0 16px 42px rgba(70, 197, 155, 0.14),
0 0 0 5px rgba(98, 134, 210, 0.1),
0 18px 55px rgba(90, 188, 128, 0.16);
}
.glass-card h3{
margin: 0;
font-size: 18px;
font-weight: 950;
color: #eaf3ff;
}
.card-head{
display:flex;
align-items:center;
gap: 12px;
margin-bottom: 10px;
}
.card-ico{
width: 42px;
height: 42px;
border-radius: 14px;
display:grid;
place-items:center;
background: rgba(74, 188, 208, 0.12);
border: 1px solid rgba(89, 167, 180, 0.28);
box-shadow: 0 18px 45px rgba(6,182,212,.10);
flex: 0 0 auto;
}
.ico-svg{
width: 20px;
height: 20px;
fill: #79e7ff;
}
.card-sub{
margin: 6px 0 16px;
color: rgb(255, 255, 255);
font-size: 16px;
line-height: 1.7;
}
/* card-sub ikonlu versiyon */
.card-sub--icon{
display: flex;
align-items: flex-start;
gap: 12px;
}
.card-sub-ico{
width: 38px;
height: 38px;
border-radius: 12px;
display: grid;
place-items: center;
flex: 0 0 auto;
background: linear-gradient(
145deg,
rgba(37,99,235,.22),
rgba(6,182,212,.18)
);
border: 1px solid rgba(6,182,212,.35);
box-shadow: 0 12px 30px rgba(6,182,212,.18);
}
.sub-ico-svg{
width: 20px;
height: 20px;
fill: #79e7ff;
}
.card-sub-text{
line-height: 1.7;
}
.divider-vertical{
width:1px;
height:60px;
background: linear-gradient(
180deg,
transparent,
rgba(6,182,212,.28),
transparent
);
}
.divider-soft{
height: 1px;
background: linear-gradient(90deg, transparent, rgba(6,182,212,.28), transparent);
margin: 18px 0;
}
/* =========================================================
INFO (Email + Social like resim 1)
========================================================= */
.info-block{
margin-top: 0px;
}
.info-label{
font-size: 15-px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(234,243,255,.78);
margin-bottom: 8px;
}
.info-link{
display: inline-flex;
gap: 10px;
align-items: center;
font-weight: 700;
font-size: 14px;
color: #eaf3ff;
text-decoration: none;
padding: 8px 14px; /* küçültülen kısım */
border-radius: 10px;
background: rgba(2,6,23,.50);
border: 1px solid rgba(148,163,184,.18);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.info-link:hover{
border-color: rgba(6,182,212,.45);
box-shadow: 0 0 0 4px rgba(6,182,212,.12);
}
.social-row{
display:flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 10px;
}
.social-btn{
width: 44px;
height: 44px;
border-radius: 14px;
display:grid;
place-items:center;
text-decoration: none;
background: rgba(2,6,23,.55);
border: 1px solid rgba(148,163,184,.18);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
transition: .18s ease;
}
.social-svg{
width: 18px;
height: 18px;
fill: rgba(234,243,255,.88);
}
.social-btn:hover{
transform: translateY(-1px);
border-color: rgba(6,182,212,.45);
box-shadow:
0 0 0 4px rgba(6,182,212,.12),
0 18px 55px rgba(6,182,212,.10);
}
/* =========================================================
FORM
========================================================= */
.form-desc{
margin: 10px 0 18px;
color: rgb(255, 255, 255);
font-size: 17px;
line-height: 1.7;
}
.form-row{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.form-group{ margin-bottom: 14px; }
.form-group label{
display:block;
margin-bottom: 6px;
font-size: 15px;
font-weight: 900;
letter-spacing: .02em;
color: rgb(238, 243, 249);
}
.contact-meta{
display:flex;
flex-wrap:wrap;
align-items:flex-start;
gap:28px;
margin-top:40px;
}
.divider-vertical{
width:1px;
height:60px;
background: linear-gradient(
180deg,
transparent,
rgba(6,182,212,.28),
transparent
);
}
.map-block{
width:100%;
}
.map-frame{
margin-top:10px;
border-radius:16px;
overflow:hidden;
border:1px solid rgba(148,163,184,.18);
box-shadow:0 18px 45px rgba(0,0,0,.12);
}
.map-frame iframe{
width:100%;
height:216px;
border:0;
}
.contact-form input,
.contact-form textarea,
.contact-form select{
width: 100%;
padding: 12px 14px;
border-radius: 12px;
background: rgba(3, 75, 134, 0.62);
color: #eaf3ff;
border: 1px solid rgba(148, 163, 184, .22);
outline: none;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
transition: .18s ease;
}
.contact-form textarea{ min-height: 140px; resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
border-color: rgba(6,182,212,.55);
box-shadow:
0 0 0 4px rgba(6,182,212,.18),
0 18px 55px rgba(6,182,212,.10);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{
color: rgba(234,243,255,.45);
}
.btn-submit{
width: 100%;
margin-top: 6px;
padding: 14px 16px;
border: none;
border-radius: 999px;
cursor: pointer;
background: linear-gradient(90deg, var(--blue-600), var(--cyan-500));
color: #031018;
font-weight: 950;
letter-spacing: .02em;
box-shadow:
0 18px 55px rgba(6,182,212,.16),
0 12px 30px rgba(37, 235, 192, 0.1);
transition: .18s ease;
}
.btn-submit:hover{
transform: translateY(-1px);
filter: brightness(1.03);
box-shadow:
0 22px 70px rgba(6,182,212,.18),
0 16px 45px rgba(37, 235, 189, 0.14);
}
/* =========================================================
ALERT
========================================================= */
.alert.success{
background: #dcfce7;
color: #166534;
padding: 14px 16px;
border-radius: 14px;
margin-bottom: 18px;
border: 1px solid rgba(22,101,52,.20);
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1000px){
.contact-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 700px){
.contact-hero{ padding: 86px 0 70px; }
.contact-hero h1{ font-size: 34px; }
.form-row{ grid-template-columns: 1fr; }
.glass-card{ padding: 26px; }
.divider-vertical{
display:none;
}
}
/* css/engineerings.css */
/* =========================
ENGINEERING SECTION BASE
========================= */
.home-engineering{
position: relative;
padding: 110px 0 120px;
background:
radial-gradient(circle at 20% 20%, rgba(79,211,255,.15), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(0,255,213,.12), transparent 45%),
linear-gradient(180deg, #020617 0%, #020617 100%);
overflow: hidden;
}
/* subtle glow */
.home-engineering::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 70% 30%, rgba(79,211,255,.12), transparent 50%),
radial-gradient(circle at 30% 80%, rgba(0,255,213,.08), transparent 50%);
pointer-events:none;
}
.engineering-head{
text-align: center;
margin-bottom: 34px;
padding: 0 10px;
}
.engineering-title{
margin: 0;
font-size: clamp(22px, 2.2vw, 36px);
font-weight: 950;
letter-spacing: -.02em;
color: #fff;
text-shadow: 0 18px 50px rgb(118, 186, 218);
}
.engineering-kicker{
margin: 12px auto 0;
max-width: 78ch;
font-weight: 650;
line-height: 1.7;
font-size: 18px;
color: #fff;
}
/* =========================
GRID
========================= */
.engineering-grid{
margin-top: 34px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
/* =========================
CARD
========================= */
.eng-card{
border-radius: 20px;
padding: 20px 18px 18px;
background: rgba(5, 18, 42, .34);
border: 1px solid rgba(255,255,255,.10);
box-shadow:
0 20px 70px rgba(0,0,0,.22),
inset 0 0 0 1px rgba(255,255,255,.04);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.eng-card:hover{
transform: translateY(-6px);
border-color: rgba(79,211,255,.35);
box-shadow:
0 28px 90px rgba(0,0,0,.30),
0 0 0 6px rgba(79,211,255,.08);
background: rgba(8, 24, 56, .42);
}
.eng-top{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.eng-badge{
font-weight: 900;
letter-spacing: .08em;
font-size: 14px;
padding: 7px 12px;
border-radius: 999px;
color: #fff;
background: linear-gradient(90deg, rgba(79,211,255,.24), rgba(0,255,213,.16));
border: 1px solid rgba(79,211,255,.28);
}
/* ICON */
.eng-icon{
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
background: rgba(79, 211, 255, 0.71);
border: 1px solid rgba(79, 211, 255, 0.73);
border-radius: 12px;
box-shadow: 0 0 22px rgba(79, 211, 255, 0.6);
transition: all .22s ease;
}
.eng-icon svg{
width: 18px;
height: 18px;
display: block;
}
.eng-card:hover .eng-icon{
background: rgba(79,211,255,.12);
border-color: rgba(79,211,255,.40);
box-shadow: 0 0 30px rgba(79,211,255,.26);
transform: scale(1.06);
color: rgba(79,211,255,.95);
}
.eng-name{
margin: 0 0 10px;
font-size: 16px;
font-weight: 950;
letter-spacing: -.01em;
color: #fff;
}
.eng-list{
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 10px;
}
.eng-list li{
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 14px;
line-height: 1.65;
color: #fff;
font-weight: 650;
}
.eng-dot{
width: 8px;
height: 8px;
margin-top: 7px;
border-radius: 999px;
background: rgb(79, 211, 255);
box-shadow: 0 0 0 5px rgba(79,211,255,.10);
flex: 0 0 auto;
}
.home-engineering{
margin-top: 80px;
}
/* =========================
GO LIVE STEPS
========================= */
.golive-steps{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px;
margin-top:26px;
}
.golive-step{
padding:16px;
border-radius:14px;
background: rgba(255,255,255,.03);
}
/* =========================
CTA
========================= */
.engineering-cta{
margin-top: 22px;
display: flex;
gap: 16px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.engineering-btn{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 22px;
border-radius: 999px;
font-weight: 900;
font-size: 14px;
letter-spacing: .02em;
color: #fff;
background: linear-gradient(90deg, rgba(79,211,255,.79), rgba(0,255,213,.22), rgba(251,191,36,.18));
border: 1px solid rgba(79,211,255,.75);
box-shadow: 0 20px 60px rgba(0,0,0,.26), 0 0 0 8px rgba(79,211,255,.08);
transition: all .22s ease;
text-decoration: none;
}
.engineering-btn:hover{
transform: translateY(-3px);
filter: saturate(1.12) brightness(1.05);
box-shadow: 0 28px 80px rgba(0,0,0,.34), 0 0 0 10px rgba(79,211,255,.12);
}
.engineering-link{
color: rgba(255,255,255,.72);
font-weight: 850;
font-size: 14px;
text-decoration: none;
}
.engineering-link:hover{
color: rgba(255,255,255,.95);
text-decoration: underline;
}
/* =========================
RESPONSIVE
========================= */
/* tablet */
@media (max-width:1100px){
.engineering-grid{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.golive-steps{
grid-template-columns: repeat(2,1fr);
}
}
/* mobile */
@media (max-width:768px){
.home-engineering{
padding:80px 0 90px;
}
.engineering-title{
font-size:24px;
}
.engineering-kicker{
font-size:15px;
line-height:1.6;
}
/* mobilde tek sütun olacak şekilde grid düzeltmeleri */
.engineering-grid,
.golive-steps{
grid-template-columns: 1fr !important;
gap:16px;
}
.eng-card{
padding:18px 16px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
}
/* css/faqs.css */
/* ================================
FAQ SECTION BACKGROUND
================================ */
.home-faq.v4{
position: relative;
padding: 80px 20px;
overflow: hidden;
background:
radial-gradient(1000px 500px at 5% -10%, rgba(79,211,255,.20), transparent 60%),
radial-gradient(800px 400px at 95% -10%, rgba(0,255,213,.18), transparent 60%),
linear-gradient(180deg,#020617 0%,#030b1a 100%);
}
/* container */
.home-faq.v4 .container{
position: relative;
}
/* ================================
LAYOUT
================================ */
.home-faq.v4 .faq-wrap{
max-width: 1120px;
margin: 120px auto 0;
display: grid;
gap: 16px;
}
/* ================================
CARD BASE
================================ */
.home-faq.v4 .faq-card{
border-radius: 22px;
border: 1px solid rgba(255,255,255,.12);
background: linear-gradient(180deg, rgba(7,18,40,.40), rgba(7,18,40,.26));
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow:
0 28px 90px rgba(0,0,0,.34),
inset 0 1px 0 rgba(255,255,255,.08);
overflow: hidden;
position: relative;
}
/* subtle glow inside cards */
.home-faq.v4 .faq-card::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(600px 160px at 12% 0%, rgba(79,211,255,.14), transparent 60%),
radial-gradient(520px 140px at 86% 0%, rgba(0,255,213,.10), transparent 60%);
opacity:.9;
pointer-events:none;
}
/* ================================
HEADER
================================ */
.home-faq.v4 .faq-header{
padding:22px;
}
@media (min-width:980px){
.home-faq.v4 .faq-header{
padding:26px 28px;
}
}
.home-faq.v4 .faq-eyebrow{
margin:0 0 12px;
font-weight:900;
letter-spacing:.22em;
text-transform:uppercase;
font-size:12px;
color:#fff;
display:inline-flex;
align-items:center;
gap:10px;
}
.home-faq.v4 .faq-eyebrow::after{
content:"";
height:1px;
width:54px;
background:linear-gradient(90deg, rgba(79,211,255,.80), rgba(0,255,213,.35));
}
.home-faq.v4 .faq-title{
margin:0 0 10px;
font-size:clamp(28px,2.5vw,44px);
line-height:1.06;
font-weight:950;
letter-spacing:-.03em;
color:#fff;
text-shadow:0 18px 52px rgba(0,0,0,.55);
}
.home-faq.v4 .faq-kicker{
margin:12px 0 16px;
max-width:70ch;
font-size:17px;
line-height:1.85;
color:#fff;
font-weight:650;
}
/* ================================
POINTS
================================ */
.home-faq.v4 .faq-points{
list-style:none;
padding:14px;
margin:0 0 16px;
display:grid;
gap:10px;
border-radius:40px;
border:1px solid rgba(255,255,255,.18);
background:rgba(255,255,255,.04);
box-shadow:inset 0 5px 0 rgb(123,208,148);
}
.home-faq.v4 .faq-points li{
display:flex;
align-items:center;
gap:10px;
color:rgba(255,255,255,.82);
font-weight:700;
}
.home-faq.v4 .faq-points .dot{
width:10px;
height:10px;
border-radius:999px;
background:linear-gradient(135deg, rgba(79,211,255,.95), rgba(0,255,213,.75));
}
/* ================================
CTA BUTTON
================================ */
.home-faq.v4 .faq-btn{
display:inline-flex;
align-items:center;
gap:10px;
padding:14px 18px;
border-radius:999px;
font-weight:950;
font-size:15px;
text-decoration:none;
color:#fff;
background:linear-gradient(90deg, rgba(79,211,255,.20), rgba(0,255,213,.12));
border:1px solid rgba(255,255,255,.14);
box-shadow:0 26px 78px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.12);
transition:all .2s ease;
}
.home-faq.v4 .faq-btn:hover{
transform:translateY(-2px);
border-color:rgba(79,211,255,.28);
filter:brightness(1.04);
}
.faq-cta{
text-align:center;
margin-top:40px;
}
/* ================================
FAQ LIST
================================ */
.home-faq.v4 .faq-list{
padding:12px;
}
.home-faq.v4 .faq-item{
border-radius:18px;
border:1px solid rgba(255,255,255,.10);
background:rgba(0,0,0,.12);
box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
overflow:hidden;
transition:.2s;
}
.home-faq.v4 .faq-item + .faq-item{
margin-top:10px;
}
/* ================================
QUESTION ROW
================================ */
.home-faq.v4 .faq-q{
width:100%;
border:0;
background:transparent;
cursor:pointer;
text-align:left;
padding:16px;
display:grid;
grid-template-columns:108px 1fr 44px;
gap:14px;
align-items:center;
}
.home-faq.v4 .faq-meta{
display:flex;
flex-direction:column;
gap:8px;
min-width:108px;
}
.home-faq.v4 .faq-badge{
width:56px;
height:28px;
display:flex;
align-items:center;
justify-content:center;
border-radius:999px;
font-weight:900;
font-size:14px;
color:#fff;
border:1px solid rgba(255,255,255,.14);
background:linear-gradient(90deg, rgba(79,211,255,.22), rgba(0,255,213,.10));
}
.home-faq.v4 .faq-tag{
padding:6px 10px;
border-radius:999px;
font-size:13px;
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.05);
color:#fff;
}
.home-faq.v4 .faq-text{
font-size:16px;
font-weight:900;
color:#fff;
}
/* ================================
ICON
================================ */
.home-faq.v4 .faq-ico{
width:40px;
height:40px;
border-radius:14px;
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.05);
display:grid;
place-items:center;
position:relative;
}
.home-faq.v4 .faq-ico i{
position:absolute;
width:14px;
height:2px;
background:rgba(79,211,255,.92);
}
.home-faq.v4 .faq-ico i:last-child{
transform:rotate(90deg);
}
/* ================================
ANSWER
================================ */
.home-faq.v4 .faq-a{
max-height:0;
overflow:hidden;
opacity:0;
transform:translateY(-6px);
transition:
max-height .35s ease,
opacity .25s ease,
transform .25s ease;
}
.faq-item.is-open .faq-a{
opacity:1;
transform:translateY(0);
}
.home-faq.v4 .faq-a-inner{
padding:0 16px 16px;
}
.home-faq.v4 .faq-a-inner p{
margin:0;
font-size:15px;
line-height:1.85;
color:rgba(255,255,255,.9);
}
/* ================================
OPEN STATE
================================ */
.home-faq.v4 .faq-item.is-open{
border-color:rgba(79,211,255,.26);
box-shadow:0 22px 72px rgba(0,0,0,.34);
}
.home-faq.v4 .faq-item.is-open .faq-ico i:last-child{
opacity:0;
}
/* ================================
MOBILE
================================ */
@media (max-width:768px){
.home-faq.v4 .faq-q{
grid-template-columns:1fr 40px;
}
.home-faq.v4 .faq-meta{
display:none;
}
.home-faq.v4 .faq-text{
font-size:15px;
}
.home-faq.v4 .faq-a-inner p{
font-size:14px;
}
}
/* ================================
ACCESSIBILITY
================================ */
.home-faq.v4 .faq-q:focus-visible{
outline:2px solid rgba(79,211,255,.55);
outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
.home-faq.v4 *{
transition:none !important;
}
}
/* css/footer.css */
/* =========================
FOOTER (NAVBAR + HERO UYUMLU)
========================= */
.main-footer{
position: relative;
background:
radial-gradient(900px 420px at 15% 10%, rgba(73, 121, 225, 0.699), transparent 60%),
radial-gradient(900px 420px at 85% 80%, rgba(6, 181, 212, 0.721), transparent 60%),
linear-gradient(135deg, #34bb97, #0b1224);
color: #eaf3ff;
padding: 90px 0 28px;
font-size: 15px;
}
/* GRID */
.footer-top{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 48px;
margin-bottom: 42px;
}
/* LOGO */
.footer-logo{
width: 150px;
margin-bottom: 22px;
border-radius: 18px;
padding: 8px;
background: rgb(138, 251, 209);
border: 1px solid rgba(201, 226, 222, 0.18);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.05),
0 18px 45px rgba(6, 181, 212, 0.873);
}
/* ABOUT TEXT */
.footer-about p{
line-height: 1.75;
color: rgba(234,243,255,.78);
max-width: 320px;
}
/* HEADINGS */
.footer-box h4{
margin-bottom: 18px;
font-size: 17px;
font-weight: 950;
letter-spacing: .04em;
color: #eaf3ff;
position: relative;
}
.footer-box h4::after{
content:"";
width: 38px;
height: 2px;
background: linear-gradient(90deg, #2563eb, #06b6d4);
display: block;
margin-top: 8px;
border-radius: 2px;
}
/* LINKS */
.footer-box ul{
list-style: none;
padding: 0;
margin: 0;
}
.footer-box ul li{
margin-bottom: 10px;
}
.footer-box a{
color: rgba(234,243,255,.75);
text-decoration: none;
transition: .2s ease;
}
.footer-box a:hover{
color: #bff3ff;
padding-left: 6px;
}
/* CONTACT */
.contact-list li{
display: flex;
align-items: center;
gap: 10px;
color: rgba(234,243,255,.78);
}
.contact-list i{
color: #7dd3fc;
}
/* SOCIAL */
.social-links{
display: flex;
gap: 14px;
margin-top: 14px;
}
.social-links a{
width: 44px;
height: 44px;
border-radius: 14px;
display: grid;
place-items: center;
background: rgba(2,6,23,.55);
border: 1px solid rgba(148,163,184,.18);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
color: #eaf3ff;
font-size: 18px;
transition: .18s ease;
}
.social-links a:hover{
transform: translateY(-2px);
border-color: rgba(6,182,212,.45);
box-shadow:
0 0 0 4px rgba(6,182,212,.12),
0 18px 55px rgba(6,182,212,.16);
}
/* BOTTOM */
.footer-bottom{
border-top: 1px solid rgba(255, 255, 255, 0.473);
padding-top: 25px;
text-align: center;
font-size: 15px;
color: rgba(253, 253, 253, 0.807);
}
/* =========================
RESPONSIVE
========================= */
/* Tablet */
@media (max-width: 900px){
.main-footer{
padding: 70px 0 24px;
}
.footer-top{
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
.footer-box h4{
font-size: 16px;
}
}
/* Mobil */
@media (max-width: 600px){
.main-footer{
padding: 55px 0 20px;
font-size: 14px;
}
.footer-top{
grid-template-columns: 1fr;
gap: 28px;
text-align: center;
}
.footer-box{
padding-bottom: 10px;
}
.footer-about p{
margin: 0 auto;
max-width: 260px;
}
.footer-logo{
width: 120px;
margin-left: auto;
margin-right: auto;
}
.footer-box h4{
font-size: 15px;
margin-bottom: 14px;
}
.footer-box h4::after{
margin-left: auto;
margin-right: auto;
}
.footer-box ul li{
margin-bottom: 8px;
}
.contact-list li{
justify-content: center;
font-size: 14px;
}
.social-links{
justify-content: center;
gap: 12px;
}
.social-links a{
width: 40px;
height: 40px;
font-size: 16px;
}
.footer-bottom{
font-size: 13px;
padding-top: 18px;
}
.footer-bottom p{
margin-bottom: 8px;
}
}
/* css/golive.css */
/* =========================
GO LIVE PANEL
========================= */
.golive{
margin-top: 26px;
border-radius: 22px;
padding: 22px 20px;
background: rgba(3,16,36,.26);
border: 1px solid rgba(255,255,255,.10);
box-shadow: 0 20px 70px rgba(0,0,0,.22);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.golive-head{
text-align: left;
margin-bottom: 14px;
}
.golive-title{
margin: 0;
font-size: 18px;
font-weight: 950;
color: rgba(255,255,255,.95);
}
.golive-kicker{
margin: 8px 0 0;
font-size: 14px;
line-height: 1.7;
color: rgba(255,255,255,.78);
font-weight: 650;
max-width: 90ch;
}
/* =========================
GO LIVE STEPS
========================= */
.golive-steps{
margin: 16px 0 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.golive-step{
border-radius: 18px;
padding: 16px 14px;
background: rgba(5,18,42,.30);
border: 1px solid rgba(255,255,255,.10);
transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.golive-step:hover{
transform: translateY(-4px);
border-color: rgba(79,211,255,.30);
box-shadow: 0 18px 50px rgba(0,0,0,.20);
}
.golive-no{
display: inline-flex;
align-items: center;
justify-content: center;
height: 28px;
padding: 0 10px;
border-radius: 999px;
font-weight: 950;
letter-spacing: .10em;
font-size: 14px;
color: rgba(255,255,255,.92);
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.10);
}
.golive-body{
margin-top: 10px;
}
.golive-body h4{
margin: 0 0 6px;
font-size: 16px;
font-weight: 950;
color: rgba(255,255,255,.95);
}
.golive-body p{
margin: 0;
font-size: 14px;
line-height: 1.65;
color: rgba(255,255,255,.78);
font-weight: 650;
}
/* =========================
RESPONSIVE: GO LIVE
========================= */
@media (max-width:1100px){
.golive-steps{
grid-template-columns: repeat(2,1fr);
}
}
@media (max-width:768px){
/* Mobilde tek sütun */
.golive-steps{
grid-template-columns: 1fr !important;
gap: 16px;
}
.golive-step{
padding: 14px 12px;
}
.golive-body h4{
font-size: 15px;
}
.golive-body p{
font-size: 13px;
}
.golive-no{
height: 26px;
font-size: 13px;
padding: 0 8px;
}
}
@media (max-width:480px){
.golive-steps{
grid-template-columns: 1fr !important;
}
}
/* css/hero.css */
/* =====================================================
HERO VARIABLES
===================================================== */
:root{
--hero-bend:180px;
}
/* =====================================================
HERO WRAPPER
===================================================== */
main.home-page .hero{
position:relative;
overflow:hidden;
isolation:isolate;
width:100%;
margin:0;
min-height:clamp(520px,72vh,780px);
border-bottom-left-radius:var(--hero-bend);
border-bottom-right-radius:var(--hero-bend);
border-bottom:1px solid rgba(255,255,255,.14);
}
/* =====================================================
HERO BACKGROUND
===================================================== */
main.home-page .hero-bg{
position:absolute;
inset:0;
z-index:0;
background:
repeating-linear-gradient(
180deg,
rgba(0,0,0,.10) 0 1px,
transparent 1px 7px
),
repeating-linear-gradient(
90deg,
rgba(255,255,255,.05) 0 1px,
transparent 1px 12px
),
radial-gradient(1000px 560px at 12% 78%, rgba(31,224,182,.32), transparent 62%),
radial-gradient(1000px 560px at 88% 18%, rgba(16,176,208,.30), transparent 62%),
linear-gradient(120deg,#0b3b86 0%,#0a5fa8 35%,#10b0d0 70%,#1fe0b6 100%);
background-size:auto,auto,auto,auto,240% 240%;
animation:heroBgMove 10s ease-in-out infinite;
border-bottom-left-radius:var(--hero-bend);
border-bottom-right-radius:var(--hero-bend);
filter:saturate(1.06) contrast(1.05);
transform:scale(1.02);
}
@keyframes heroBgMove{
0%{background-position:0 0,0 0,0 0,0 0,0% 50%}
50%{background-position:0 0,0 0,0 0,0 0,100% 50%}
100%{background-position:0 0,0 0,0 0,0 0,0% 50%}
}
/* =====================================================
HERO OVERLAY
===================================================== */
main.home-page .hero::before{
content:"";
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
background:
radial-gradient(1200px 700px at 50% 45%,rgba(2,6,23,.10),rgba(2,6,23,.55)),
radial-gradient(700px 280px at 20% 22%,rgba(255,255,255,.10),transparent 60%);
border-bottom-left-radius:var(--hero-bend);
border-bottom-right-radius:var(--hero-bend);
}
/* =====================================================
HERO INNER LAYOUT
===================================================== */
main.home-page .hero-inner{
position:relative;
z-index:2;
max-width:1400px;
margin:auto;
display:grid;
grid-template-columns:1.1fr .9fr;
align-items:center;
gap:clamp(20px,3vw,52px);
padding:clamp(28px,5vh,60px) clamp(18px,4vw,76px);
}
/* =====================================================
HERO TEXT
===================================================== */
.hero-eyebrow{
font-size:12px;
font-weight:900;
letter-spacing:.14em;
text-transform:uppercase;
color:rgba(255,255,255,.78);
}
.hero-title{
margin:0;
font-size:clamp(34px,4.2vw,68px);
font-weight:500;
line-height:1.05;
letter-spacing:-.02em;
color:#fff;
text-shadow:0 18px 70px rgba(0,0,0,.35);
}
.hero-title span{
background:linear-gradient(90deg,#1fe0b6,#4fd3ff,#22c55e);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.hero-subtitle{
margin-top:14px;
max-width:54ch;
font-size:clamp(14px,1.6vw,18px);
line-height:1.65;
color:rgba(255,255,255,.86);
}
/* =====================================================
HERO BUTTONS
===================================================== */
.hero-actions{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:20px;
}
.hero-btn{
display:inline-flex;
align-items:center;
justify-content:center;
height:48px;
padding:0 18px;
border-radius:999px;
font-weight:900;
text-decoration:none;
transition:.2s ease;
}
.hero-btn--primary{
color:#111;
background:linear-gradient(135deg,#1fe0b6,#4fd3ff);
box-shadow:0 18px 40px rgba(0,0,0,.30);
}
.hero-btn--primary:hover{
transform:translateY(-2px);
}
.hero-btn--ghost{
color:#fff;
border:1px solid rgba(255,255,255,.22);
background:rgba(255,255,255,.08);
backdrop-filter:blur(8px);
}
/* =====================================================
HERO METRICS
===================================================== */
.hero-metrics{
margin-top:20px;
display:flex;
flex-wrap:wrap;
gap:12px;
}
.metric{
padding:10px 12px;
border-radius:14px;
border:1px solid rgba(255,255,255,.16);
background:rgba(255,255,255,.08);
backdrop-filter:blur(8px);
}
.metric-num{
font-weight:950;
color:#fff;
}
.metric-text{
font-size:12px;
color:rgba(255,255,255,.75);
}
/* =====================================================
HERO IMAGE BOX
===================================================== */
.hero-right{
display:flex;
justify-content:center;
}
.hero-art{
width:min(560px,96%);
aspect-ratio:1/1;
display:grid;
place-items:center;
border-radius:28px;
border:1px solid rgba(255,255,255,.14);
background:
radial-gradient(900px 420px at 20% 20%,rgba(255,255,255,.14),transparent 60%),
radial-gradient(900px 420px at 80% 70%,rgba(79,211,255,.18),transparent 60%),
linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,0));
box-shadow:0 26px 80px rgba(0,0,0,.25);
overflow:hidden;
}
/* ❌ FLOAT ANIMATION KALDIRILDI */
.hero-art img{
width:96%;
height:96%;
object-fit:cover;
border-radius:18px;
}
/* =====================================================
HERO CAROUSEL (OPTIMIZED)
===================================================== */
.hero-carousel{
position:relative;
}
.hero-carousel__track{
position:relative;
overflow:hidden;
width:100%;
height:100%;
}
.hero-carousel__slide{
position:absolute;
inset:0;
padding:20px;
box-sizing:border-box;
width:100%;
height:100%;
object-fit:contain;
object-position:center;
opacity:0;
transform:scale(1.02);
transition:
opacity .7s ease,
transform 1.2s ease;
will-change:opacity, transform;
backface-visibility:hidden;
}
.hero-carousel__slide.is-active{
opacity:1;
transform:scale(1);
z-index:2;
}
/* =====================================================
RESPONSIVE
===================================================== */
@media (max-width:980px){
:root{--hero-bend:140px}
main.home-page .hero-inner{
grid-template-columns:1fr;
text-align:center;
}
.hero-actions,
.hero-metrics{
justify-content:center;
}
.hero-art{
width:min(620px,100%);
aspect-ratio:16/10;
}
}
@media (max-width:640px){
:root{--hero-bend:100px}
.hero-title{
font-size:clamp(26px,7vw,34px);
}
.hero-btn{
height:44px;
font-size:14px;
}
.hero-actions{
flex-direction:column;
align-items:center;
}
.hero-btn{
width:100%;
max-width:260px;
}
}
/* =====================================================
MOBILE PERFORMANCE FIX
===================================================== */
@media (max-width:768px){
main.home-page .hero-bg{
animation:none;
}
}
/* =====================================================
REDUCED MOTION
===================================================== */
@media (prefers-reduced-motion:reduce){
.hero-bg,
.hero-carousel__slide{
animation:none;
transition:none;
}
}
/* =====================================================
HERO MOBILE FIX
===================================================== */
@media (max-width: 768px){
main.home-page .hero-inner{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
gap:22px;
}
main.home-page .hero-right{
order:5;
width:100%;
display:flex;
justify-content:center;
}
main.home-page .hero-left{
order:1;
width:100%;
}
main.home-page .hero-actions{
flex-direction:column;
align-items:center;
width:100%;
gap:10px;
}
main.home-page .hero-btn{
width:100%;
max-width:260px;
}
main.home-page .hero-metrics{
flex-direction:column;
align-items:center;
width:100%;
gap:8px;
}
main.home-page .metric{
width:100%;
max-width:240px;
text-align:center;
}
main.home-page .hero-art{
width:100%;
max-width:420px;
aspect-ratio:16/11;
}
main.home-page .hero{
min-height:auto;
padding-bottom:40px;
}
}
/* css/home.css */
:root{
/* Brand */
--blue-900:#1557db;
--blue-700:#8fcba7;
--blue-600:#2563EB;
--cyan-300:#0ea7ef;
--yellow-500:#f5510b;
--yellow-400:#FBBF24;
--ink:#0B1B3A;
--muted:#475569;
--line:#E2E8F0;
/* Home stage */
--home-page:#00e8cd;
--home-page-2:#2d92e4;
--home-spotA: rgb(78, 179, 219);
--home-spotB: rgba(235, 208, 208, 0.992);
--home-spotC: rgb(11, 245, 128);
--section-space: clamp(60px, 6vw, 85px);
--section-space-tight: clamp(50px, 5vw, 70px);
/* ✅ HERO bombe */
--hero-bend: 220px; /* alt bombenin gücü */
}
/* ✅ body değil -> main */
main.home-page{
min-height: 100vh;
padding-top: 0 !important; /* ✅ navbar-altı boşluk kapat */
background:
radial-gradient(1100px 520px at 12% 18%, var(--home-spotA), transparent 62%),
radial-gradient(1100px 520px at 82% 78%, var(--home-spotB), transparent 62%),
radial-gradient(900px 460px at 50% 110%, var(--home-spotC), transparent 65%),
linear-gradient(180deg, var(--home-page-2), var(--home-page));
}
/* ✅ Beyaz basan section'ları stage’e bırak */
main.home-page .home-services,
main.home-page .home-about,
main.home-page .home-blog,
main.home-page .home-references{
background: transparent !important;
}
main.home-page section.home-references.container,
main.home-page section.home-blog.container{
background: transparent !important;
}
.section-head{
margin-bottom: clamp(26px, 3vw, 36px);
}
/* =========================
HOME HERO — FULL WIDTH + BOTTOM CURVE
- navbar ile boşluk yok
- sağ/sol/yukarı boşluk yok
- sadece altta bombeli radius
========================= */
/*Trust Bar Satış ve Memnuniyet Odaklı Heronun hemen üstünde göz alıcı */
.top-trust-bar{
position: relative;
z-index:5;
width:100%;
margin-top:18px;
display:flex;
align-items:center;
justify-content:center;
gap:28px;
font-size:14px;
font-weight:600;
color: #ffffff;
opacity: .9;
white-space: nowrap;
}
/* Mobilde gizle */
.top-trust-bar span{
color:#ffffff;
opacity:.9;
white-space:nowrap;
}
.top-trust-bar span{
color: #ffffff !important;
gap:14px;
}
@media (max-width: 767px){
.top-trust-bar {
display: none !important;
}
}
.blog-grid{
display: grid;
grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
gap: 25px;
}
.blog-card{
background: #ffffff;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(148,163,184,.22);
box-shadow: 0 10px 24px rgba(2,6,23,.06);
}
.blog-card img{
width: 100%;
height: 180px;
object-fit: cover;
}
.blog-card h4{
padding: 15px;
}
/* =========================
BLOG MOBILE
========================= */
@media (max-width:768px){
.blog-grid{
grid-template-columns:1fr;
}
.blog-card img{
height:200px;
}
}
/* =========================
CTA
========================= */
.home-cta{
background: linear-gradient(135deg,#020617,#020617);
color: white;
padding: var(--section-space-tight) 20px;
text-align: center;
}
/* =========================
RESPONSIVE
========================= */
@media (max-width: 900px){
.services-title{ font-size: 32px; }
.services-grid{
grid-template-columns: 1fr;
max-width: 560px;
}
}
@media (max-width: 520px){
main.home-page{
background:
radial-gradient(900px 460px at 12% 18%, rgba(37,99,235,.15), transparent 62%),
radial-gradient(900px 460px at 82% 78%, rgba(6,182,212,.14), transparent 62%),
linear-gradient(180deg, #00e8cd, #2d92e4);
}
}
/* Motion reduce */
@media (prefers-reduced-motion: reduce){
.service-card,
.service-border,
.service-list li::before{
transition: none !important;
animation: none !important;
}
}
/* FLOATING CONTACT */
.floating-contact{
position: fixed;
right: 20px;
bottom: 20px;
display: flex;
flex-direction: column;
gap: 12px;
z-index: 999;
opacity: 0;
visibility: hidden;
transform: translateY(120px);
pointer-events: none;
transition:
opacity .28s ease,
visibility .28s ease,
transform .28s ease;
}
.floating-contact.is-visible{
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.fc-btn{
width: 56px;
height: 56px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: #fff;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
background: rgba(15,23,42,0.75);
border: 1px solid rgba(255,255,255,0.15);
box-shadow: 0 10px 25px rgba(0,0,0,.25);
transition:
transform .3s ease,
box-shadow .3s ease,
opacity .3s ease;
}
.fc-btn svg{
width: 26px;
height: 26px;
display: block;
}
.fc-btn:hover{
transform: translateY(-4px) scale(1.05);
box-shadow: 0 14px 32px rgba(0,0,0,.30);
}
.fc-btn:focus-visible{
outline: 2px solid rgba(255,255,255,.95);
outline-offset: 3px;
}
.fc-whatsapp{
background: linear-gradient(135deg, #25D366, #128C7E);
}
.fc-phone{
background: linear-gradient(135deg, #2563EB, #1D4ED8);
}
.fc-instagram{
background: linear-gradient(135deg, #ff7a18, #ff0069, #d300c5);
}
#footerMobileHideTrigger{
width: 100%;
height: 1px;
pointer-events: none;
}
/* Mobil */
@media (max-width: 768px){
.floating-contact{
right: 12px;
bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
gap: 10px;
transform: translateY(140px);
}
.fc-btn{
width: 50px;
height: 50px;
}
.fc-btn svg{
width: 23px;
height: 23px;
}
.floating-contact.is-hidden-mobile{
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(140px) !important;
pointer-events: none !important;
}
}
@media (max-width: 768px){
.floating-contact.is-hidden-by-menu{
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(140px) !important;
pointer-events: none !important;
}
}
/* css/navbar.css */
/* =========================
NAVBAR (PERFORMANCE OPTIMIZED)
========================= */
:root{
--blue-950:#071127;
--blue-900:#0B1B3A;
--blue-800:#0F2B66;
--blue-700:#1D4ED8;
--blue-600:#2563EB;
--blue-500:#3B82F6;
--blue-300:#93C5FD;
--yellow-500:#F59E0B;
--yellow-400:#FBBF24;
--yellow-200:#FDE68A;
--nav-text: rgba(255,255,255,0.92);
--nav-muted: rgba(255,255,255,0.72);
--nav-bg: rgba(15, 43, 102, 0.82);
--nav-bg-strong: rgba(15, 43, 102, 0.94);
--nav-border: rgba(255,255,255,0.14);
--nav-max: 1200px;
--nav-pad-x: 18px;
--nav-h: 98px;
}
/* Stable scrollbar */
html{ scrollbar-gutter: stable; }
body{ overflow-y: scroll; padding-top: var(--nav-h); }
/* Fixed header */
.main-header{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99999;
width: 100%;
padding: 14px 0;
background: var(--nav-bg);
backdrop-filter: blur(8px); /* hafifletildi */
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid var(--nav-border);
box-shadow: 0 8px 24px rgba(2,6,23,0.15); /* hafifletildi */
transition: background .25s ease, box-shadow .25s ease, padding .25s ease;
isolation: isolate;
will-change: background, box-shadow, padding; /* GPU optimizasyonu */
}
/* top & bottom strips */
.main-header::before,
.main-header::after{
content:"";
position:absolute;
left:0; right:0;
pointer-events:none;
z-index:1;
}
.main-header::before{
top:0;
height:2px;
background: linear-gradient(90deg, transparent, rgba(59,130,246,.95), transparent);
opacity:0.95;
}
.main-header::after{
bottom:0;
height:3px;
background: linear-gradient(90deg,
rgba(37,99,235,1) 0%,
rgba(96,165,250,0.95) 22%,
rgba(251,191,36,1) 50%,
rgba(245,158,11,1) 72%,
rgba(37,99,235,1) 100%
);
background-size: 240% 100%;
background-position: 0% 50%;
opacity:0.85;
transform: translateZ(0); /* GPU layer */
/* Animasyon opsiyonel, CPU yükünü azaltmak için devre dışı bırakılabilir */
}
/* Nav container */
.main-header .nav-container{
max-width: var(--nav-max);
margin:0 auto;
padding:0 var(--nav-pad-x);
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
position: relative;
z-index:2;
}
/* Logo */
.main-header .logo{
display:flex;
align-items:center;
flex:0 0 auto;
min-width:170px;
}
.main-header .logo img{
height:70px;
width:auto;
max-height:70px;
border-radius:12px;
box-shadow:0 6px 18px rgba(2,6,23,.12);
object-fit: contain;
transition: transform .2s ease, filter .2s ease;
}
.main-header .logo img:hover{
transform: scale(1.02);
filter: saturate(1.03);
}
/* Menu */
.main-header .main-nav{
flex:1 1 auto;
display:flex;
justify-content:flex-end;
will-change: transform; /* hover performansı */
}
.main-header .main-nav ul{
display:flex;
gap:12px;
list-style:none;
margin:0;
padding:0;
align-items:center;
}
/* Links */
.main-header .main-nav a{
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration:none;
font-weight: 800;
font-size: 14.5px;
color:#FFFFFF;
padding: 10px 14px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(37,99,235,0.25), rgba(245,158,11,0.12));
border:1px solid rgba(255,255,255,0.12);
box-shadow:0 8px 14px rgba(2,6,23,0.12);
transform-style: preserve-3d;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
/* Hover */
.main-header .main-nav a:hover{
background: linear-gradient(135deg, rgba(37,99,235,0.45), rgba(245,158,11,0.25));
box-shadow:0 10px 20px rgba(2,6,23,0.14);
transform: translateY(-1px);
}
/* Active page */
.main-header .main-nav a[aria-current="page"]{
background: linear-gradient(135deg, rgba(37,99,235,0.55), rgba(245,158,11,0.20));
}
/* CTA */
.main-header .nav-btn{
padding:10px 18px !important;
font-weight: 900 !important;
color:#fefefe !important;
background: linear-gradient(135deg, var(--yellow-500), var(--yellow-400));
border:1px solid rgba(255,255,255,0.15);
box-shadow:0 12px 24px rgba(245,158,11,0.20);
}
.main-header .nav-btn:hover{
box-shadow:0 16px 32px rgba(245,158,11,0.26);
transform: translateY(-2px);
}
/* Mobile */
.main-header .menu-toggle{
display:none;
flex-direction:column;
gap:6px;
cursor:pointer;
padding:10px;
border-radius:12px;
transition: background .18s ease;
}
.main-header .menu-toggle:hover{ background: rgba(255,255,255,0.08); }
.main-header .menu-toggle span{
width:26px;
height:2px;
background: var(--nav-text);
transition: .25s ease;
}
@media (max-width: 900px){
:root{ --nav-h: 74px; }
.main-header .menu-toggle{
display:flex;
}
.main-header .logo{
min-width:130px;
}
.main-header .logo img{
height:46px;
max-height:46px;
}
.main-header .main-nav{
position: fixed;
top: var(--nav-h);
right:0;
width:280px;
height: calc(100vh - var(--nav-h));
background: var(--nav-bg-strong);
backdrop-filter: blur(8px);
border-left:1px solid var(--nav-border);
box-shadow: -16px 0 32px rgba(2,6,23,0.18);
padding:28px 18px;
display:flex;
justify-content:flex-start;
transform: translateX(100%);
transition: transform .35s ease;
z-index:99999;
}
.main-header .main-nav.active{
transform: translateX(0);
}
.main-header .main-nav.active ul{
display:flex;
}
.main-header .main-nav ul{
display:none;
flex-direction: column;
gap:12px;
align-items:stretch;
width:100%;
}
.main-header .main-nav a{
width:100%;
justify-content:flex-start;
font-size:16px;
padding:12px 14px;
border-radius:14px;
}
.main-header .nav-btn{
width:100%;
justify-content:center !important;
}
}
/* Reduced motion preference */
@media (prefers-reduced-motion: reduce){
.main-header::after{ animation:none !important; }
}
/* hamburger animasyonu */
.menu-toggle.active span:nth-child(1){
transform: rotate(45deg) translate(5px,5px);
}
.menu-toggle.active span:nth-child(2){
opacity:0;
}
.menu-toggle.active span:nth-child(3){
transform: rotate(-45deg) translate(6px,-6px);
}
body.menu-open{
overflow:hidden;
}
/* css/partners.css */
.home-partners .container{
position: relative;
}
/* =========================
TITLE
========================= */
.partners-title{
margin: 0;
font-size: clamp(20px, 2.2vw, 34px);
font-weight: 900;
letter-spacing: -.02em;
color: #ffffff;
}
/* =========================
KICKER
========================= */
.partners-kicker{
margin: 10px auto 0;
max-width: 68ch;
font-weight: 600;
line-height: 1.6;
font-size: 18px;
color: rgba(255,255,255,.75);
}
/* =========================
GRID
========================= */
.partners-grid{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
}
/* =========================
CARD
========================= */
.partner-card{
border-radius: 18px;
padding: 18px;
background: rgba(3, 16, 36, .30);
border: 1px solid rgba(255,255,255,.10);
box-shadow: 0 12px 30px rgba(0,0,0,.18);
transition: transform .2s ease, border-color .2s ease;
}
.partner-card:hover{
transform: translateY(-3px);
border-color: rgba(255,255,255,.18);
}
/* =========================
LOGO
========================= */
.partner-logo{
background: #f6f6f6;
border-radius: 18px;
padding: 0;
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
border: 1px solid rgba(255,255,255,.12);
}
.partner-logo img{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* =========================
PILL (FULL NEUTRAL)
========================= */
.partner-pills{
margin-top: 14px;
display: grid;
gap: 10px;
}
.pill{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 12px;
border-radius: 12px;
font-weight: 700;
font-size: 13px;
color: rgba(255,255,255,.85);
/* tamamen nötr */
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 6px 16px rgba(0,0,0,.10);
transition: transform .2s ease, background .2s ease;
}
.pill:hover{
transform: translateY(-2px);
background: rgba(255,255,255,.10);
}
/* =========================
RESPONSIVE
========================= */
@media (max-width: 1100px){
.partners-grid{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 820px){
.home-partners{
padding: 70px 0 90px;
}
.partners-grid{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 520px){
.home-partners{
padding: 60px 0 80px;
}
.partners-head{
margin-bottom: 22px;
}
.partners-grid{
grid-template-columns: 1fr;
gap: 16px;
}
.partner-card{
padding: 14px;
border-radius: 16px;
}
.partner-logo{
border-radius: 16px;
aspect-ratio: 16 / 9;
}
.pill{
font-size: 12.5px;
padding: 10px 10px;
border-radius: 11px;
}
}
/* =========================
MOTION REDUCE
========================= */
@media (prefers-reduced-motion: reduce){
.partner-card,
.pill{
transition: none !important;
}
}
/* css/process.css */
.process-head{
text-align:center;
margin-bottom: 40px;
padding: 0 10px;
}
.process-title{
margin: 0;
font-size: clamp(22px, 2.2vw, 36px);
font-weight: 950;
letter-spacing: -.02em;
color: rgba(255,255,255,.95);
text-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.process-kicker{
margin: 12px auto 0;
max-width: 75ch;
font-weight: 650;
line-height: 1.7;
font-size: 17px;
color: rgb(255, 255, 255);
}
/* GRID — 8 kart için optimize */
.process-grid{
margin-top: 40px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
}
/* CARD */
.process-card{
border-radius: 20px;
padding: 22px 20px 20px;
min-height: 190px;
background: rgba(5, 18, 42, .38);
border: 1px solid rgba(255,255,255,.10);
box-shadow:
0 20px 70px rgba(0,0,0,.25),
inset 0 0 0 1px rgba(255,255,255,.04);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition:
transform .22s ease,
border-color .22s ease,
box-shadow .22s ease,
background .22s ease;
}
.process-card:hover{
transform: translateY(-6px);
border-color: rgba(79,211,255,.35);
box-shadow:
0 28px 90px rgba(0,0,0,.32),
0 0 0 6px rgba(79,211,255,.08);
background: rgba(8, 24, 56, .45);
}
/* ÜST BÖLÜM */
.process-top{
display:flex;
align-items:center;
justify-content: space-between;
margin-bottom: 14px;
}
/* STEP BADGE */
.process-step{
font-weight: 900;
letter-spacing: .08em;
font-size: 15px;
padding: 7px 12px;
border-radius: 999px;
color: rgb(255, 255, 255);
background: linear-gradient(90deg,
rgba(79,211,255,.25),
rgba(0,255,213,.18)
);
border: 1px solid rgba(79,211,255,.30);
}
/* ICON (SVG) — PROFESYONEL */
.process-icon{
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
color: rgb(255, 255, 255);
background: rgb(79, 211, 255);
border: 1px solid rgb(79, 211, 255);
border-radius: 10px;
box-shadow: 0 0 18px rgb(63, 95, 105);
transition:
transform .22s ease,
box-shadow .22s ease,
background .22s ease,
border-color .22s ease,
color .22s ease;
}
.process-icon svg{
width: 16px;
height: 16px;
display: block;
}
.process-card:hover .process-icon{
background: rgba(79,211,255,.16);
border-color: rgba(79,211,255,.34);
box-shadow: 0 0 26px rgba(79,211,255,.32);
transform: scale(1.06);
color: rgba(79,211,255,.95);
}
/* BAŞLIK */
.process-name{
margin: 0 0 10px;
font-size: 20px;
font-weight: 900;
color: rgb(255, 255, 255);
letter-spacing: -.01em;
}
/* AÇIKLAMA */
.process-desc{
margin: 0;
font-size: 18px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.84);
}
/* CTA */
.process-cta{
margin-top: 50px;
display:flex;
gap: 18px;
justify-content:center;
align-items:center;
flex-wrap: wrap;
}
.process-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding: 14px 22px;
border-radius: 999px;
font-weight: 900;
font-size: 16px;
letter-spacing: .02em;
color: rgb(255, 255, 255);
background: linear-gradient(
90deg,
rgb(19, 148, 192),
rgba(0, 255, 213, 0.656),
rgba(251, 190, 36, 0.556)
);
border: 1px solid rgb(0, 230, 103);
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.808),
0 0 0 8px rgba(79,211,255,.08);
transition:
transform .22s ease,
box-shadow .22s ease,
filter .22s ease;
text-decoration: none;
}
.process-btn:hover{
transform: translateY(-3px);
filter: saturate(1.12) brightness(1.05);
box-shadow:
0 28px 80px rgba(0,0,0,.35),
0 0 0 10px rgba(79,211,255,.12);
}
.process-link{
color: rgba(255,255,255,.70);
font-weight: 800;
font-size: 14px;
text-decoration: none;
}
.process-link:hover{
color: rgba(255,255,255,.95);
text-decoration: underline;
}
/* =========================
RESPONSIVE
========================= */
/* Tablet */
@media (max-width: 1100px){
.process-grid{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Mobil */
@media (max-width: 520px){
.home-process{
padding: 80px 0 100px;
}
.process-grid{
grid-template-columns: 1fr;
gap: 16px;
}
.process-card{
min-height: auto;
border-radius: 18px;
padding: 18px;
}
.process-name{
font-size: 15px;
}
.process-desc{
font-size: 13px;
}
}
/* =========================
PROCESS MOBILE
========================= */
@media (max-width:768px){
.process-grid{
grid-template-columns:1fr;
gap:18px;
}
.process-card{
padding:20px 18px;
}
}
/* css/references.css */
/* =====================================================
REFERENCES PAGE
===================================================== */
.references-page {
padding: 70px 20px;
}
/* =====================================================
HEADER
===================================================== */
.section-header {
text-align: center;
max-width: 700px;
margin: 0 auto 60px;
}
.section-header h1 {
font-size: 42px;
}
.section-header .desc {
margin-top: 15px;
color: #64748b;
}
.partners-head {
text-align: center;
}
.partners-head {
text-align: center;
max-width: 700px;
margin: 0 auto 60px;
}
.partners-grid {
margin-top: 10px;
}
/* =====================================================
PARTNERS HEAD (FIXED - NO GRADIENT)
===================================================== */
.partners-title {
font-size: clamp(22px, 2.5vw, 30px);
font-weight: 700;
/* 🔥 Gradient tamamen kaldırıldı */
background: none !important;
-webkit-background-clip: unset !important;
-webkit-text-fill-color: unset !important;
color: #ffffff !important;
}
.partners-kicker {
margin-top: 10px;
font-size: 15px;
/* 🔥 Aynı şekilde düz renk */
background: none !important;
-webkit-background-clip: unset !important;
-webkit-text-fill-color: unset !important;
color: rgba(255, 255, 255, 0.85) !important;
}
/* =====================================================
GRID
===================================================== */
.references-grid {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
gap: 25px;
margin: 40px 0 80px;
}
.reference-card {
background: white;
padding: 25px 15px;
border-radius: 16px;
text-align: center;
box-shadow: 0 6px 20px rgba(0,0,0,.08);
transition: transform .3s ease;
will-change: transform; /* 🔥 daha akıcı hover */
}
.reference-card:hover {
transform: translateY(-6px);
}
.reference-card img {
width: 90px;
height: 90px;
object-fit: cover;
border-radius: 50%;
margin-bottom: 12px;
}
.reference-card h4 {
font-size: 15px;
}
/* =====================================================
STATS
===================================================== */
.reference-stats {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
gap: 25px;
margin-bottom: 80px;
}
.stat-box {
background: #4ab97c;
color: white;
padding: 35px 20px;
border-radius: 16px;
text-align: center;
/* 🔥 repaint azaltma */
contain: layout paint;
}
.stat-box h3 {
font-size: 32px;
}
/* =====================================================
CTA
===================================================== */
.reference-cta {
background: linear-gradient(135deg,#be25b1,#0e1a86);
color: white;
padding: 70px 30px;
border-radius: 20px;
text-align: center;
/* 🔥 performans */
contain: layout paint;
}
.reference-cta h2 {
font-size: clamp(24px,4vw,36px);
}
.reference-cta p {
margin: 15px 0 25px;
}
.btn-primary {
background: rgba(11, 11, 11, 0.25);
color: #020617;
padding: 12px 30px;
border-radius: 30px;
text-decoration: none;
font-weight: 600;
transition: opacity .2s ease;
}
.btn-primary:hover {
opacity: .9;
}
/* =====================================================
BACKGROUND
===================================================== */
.references-page-bg {
background: linear-gradient(180deg, #00e8cd 0%, #0ea7ef 100%);
min-height: 100vh;
}
/* =====================================================
MOBILE
===================================================== */
@media (max-width:768px){
.reference-stats{
grid-template-columns:1fr 1fr;
}
.stat-box h3{
font-size:26px;
}
.reference-cta{
padding:50px 20px;
}
/* 🔥 Mobilde gradient override (kesin çözüm) */
.partners-title,
.partners-kicker {
background: none !important;
-webkit-background-clip: unset !important;
-webkit-text-fill-color: unset !important;
color: #ffffff !important;
}
}
/* css/service_detail.css */
/* =========================
SERVICE DETAIL PAGE
========================= */
.home-services {
padding: 80px 20px;
background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
color: #ffffff;
min-height: 100vh;
}
/* Başlık */
.services-head {
text-align: center;
margin-bottom: 60px;
}
.services-title {
font-size: 42px;
font-weight: 950;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #ffffff;
text-shadow: 0 10px 18px rgba(2,6,23,0.2);
}
.services-kicker {
margin-top: 12px;
font-size: 16px;
font-weight: 700;
color: #e5e8f0;
}
/* Grid */
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px;
max-width: 1200px;
margin: 0 auto;
}
/* Kart */
.service-card {
position: relative;
border-radius: 22px;
padding: 28px 24px;
background: #065d67;
border: 1px solid rgba(255,255,255,0.05);
box-shadow: 0 10px 24px rgba(0,0,0,0.25);
transition: transform .25s ease, box-shadow .25s ease;
overflow: hidden;
}
.service-card:hover {
transform: translateY(-6px) scale(1.02);
box-shadow: 0 22px 56px rgba(0,0,0,0.3);
}
/* Kart üst */
.service-top {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 16px;
}
/* Icon */
.service-icon {
width: 54px;
height: 54px;
border-radius: 16px;
display: grid;
place-items: center;
background: radial-gradient(120% 120% at 20% 15%, #22d3ee 0%, #2563eb 55%, #fbbf24 120%);
border: 1px solid rgba(255,255,255,0.1);
box-shadow: 0 14px 26px rgba(37,99,235,0.16);
}
/* Başlık */
.service-name {
font-size: 20px;
font-weight: 900;
color: #ffffff;
}
/* Liste */
.service-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 12px;
}
.service-list li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 16px;
line-height: 1.5;
color: #e5e8f0;
font-weight: 600;
}
.check {
width: 18px;
height: 18px;
border-radius: 7px;
background: linear-gradient(135deg, #2563eb, #60a5fa);
flex-shrink: 0;
margin-top: 2px;
position: relative;
box-shadow: 0 10px 18px rgba(37,99,235,0.12);
}
.check::after {
content: "";
position: absolute;
left: 5px;
top: 3px;
width: 6px;
height: 9px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(35deg);
}
/* =========================
CTA BUTONLAR (FIXED)
========================= */
.services-btn-wrapper {
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
margin: 50px auto 0;
max-width: 520px;
}
/* Buton */
.services-btn {
flex: 1; /* eşit genişlik */
display: flex;
align-items: center;
justify-content: center;
height: 52px;
padding: 0 20px;
border-radius: 999px;
background: linear-gradient(135deg, #2563eb, #facc15);
color: #0b1220;
font-weight: 950;
text-decoration: none;
border: 1px solid rgba(2,6,23,0.10);
box-shadow: 0 14px 34px rgba(37,99,235,0.18);
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.services-btn:hover {
transform: translateY(-2px);
box-shadow: 0 22px 52px rgba(37,99,235,0.25);
filter: saturate(1.05);
}
/* Secondary buton farkı (opsiyonel ama öneririm) */
.services-btn:last-child {
background: transparent;
color: #e5e8f0;
border: 1px solid rgba(255,255,255,0.2);
box-shadow: none;
}
.services-btn:last-child:hover {
background: rgba(255,255,255,0.05);
}
/* =========================
RESPONSIVE
========================= */
@media (max-width: 1024px) {
.services-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.services-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.services-title {
font-size: 32px;
}
.services-btn-wrapper {
gap: 10px;
max-width: 100%;
}
.services-btn {
height: 50px;
font-size: 14px;
}
}
/* css/services.css */
/* =========================
SERVICES (3D TILT + PREMIUM)
========================= */
.services-head{
text-align: center;
margin-bottom: 52px;
}
.services-btn-wrapper .services-btn{
display: inline-block;
margin: 10px 10px 0 0;
}
/* Animasyon */
@keyframes omyGradFlow{
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
/* Başlık */
.services-title{
margin-top: 20px;
text-align: center;
font-size: 40px;
font-weight: 950;
letter-spacing: .10em;
text-transform: uppercase;
color: #ffffff;
text-shadow: 0 10px 18px rgba(2, 6, 23, 0.10);
}
.services-kicker{
margin: 10px 0 0;
text-align: center;
font-size: 14px;
font-weight: 700;
letter-spacing: .02em;
color: #ffffff;
}
.services-kicker .bolt{
display: inline-block;
filter: drop-shadow(0 6px 10px rgba(245, 158, 11, .25));
}
/* CARD GRID */
.services-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
max-width: 1100px;
margin: 0 auto;
align-items: stretch;
}
.service-card-link{
display: block;
width: 100%;
text-decoration: none;
}
.service-card{
--rx: 0deg;
--ry: 0deg;
--sx: 1;
position: relative;
border-radius: 22px;
padding: 26px 24px;
background: #065d67;
border: 1px solid var(--line);
box-shadow: 0 10px 24px rgb(157, 201, 186);
height: 100%;
display: flex;
flex-direction: column;
transform-style: preserve-3d;
transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--sx));
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
overflow: hidden;
isolation: isolate;
}
/* Border layer */
.service-border{
position: absolute;
inset: -2px;
border-radius: 24px;
padding: 2px;
pointer-events: none;
z-index: 0;
background: linear-gradient(
90deg,
var(--blue-600) 0%,
rgba(11, 86, 178, 0.95) 30%,
var(--blue-600) 60%,
var(--blue-700) 100%
);
background-size: 220% 220%;
background-position: 0% 50%;
-webkit-mask:
linear-gradient(#e6dfdf 0 0) content-box,
linear-gradient(#e8e0e0 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity .18s ease;
}
/* Glow */
.service-card::after{
content: "";
position: absolute;
inset: 0;
border-radius: 22px;
z-index: 0;
pointer-events: none;
opacity: 0;
transition: opacity .18s ease;
background:
radial-gradient(700px 260px at 20% 0%, rgba(189, 197, 215, 0.18), transparent 55%),
radial-gradient(700px 260px at 80% 0%, rgba(245, 158, 11, 0.14), transparent 55%);
}
.service-card > *{
position: relative;
z-index: 1;
transform: translateZ(22px);
}
.service-card:hover,
.service-card:active,
.service-card:focus-within,
.service-card.is-tilting{
border-color: rgba(37, 99, 235, 0.22);
box-shadow: 0 22px 56px rgba(217, 218, 225, 0.12);
transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.01) translateY(-6px);
}
.service-card:hover::after,
.service-card:active::after,
.service-card:focus-within::after,
.service-card.is-tilting::after{
opacity: 1;
}
.service-card:hover .service-border,
.service-card:active .service-border,
.service-card:focus-within .service-border,
.service-card.is-tilting .service-border{
opacity: 1;
background:
linear-gradient(
180deg,
rgba(251, 191, 36, 1) 0%,
rgba(245, 158, 11, 1) 38%,
rgba(245, 158, 11, 0) 70%
),
linear-gradient(
90deg,
var(--blue-600) 0%,
rgba(96, 165, 250, 0.95) 30%,
var(--blue-600) 60%,
var(--blue-700) 100%
);
background-size: 100% 100%, 220% 220%;
background-position: 0% 0%, 0% 50%;
animation: none !important;
}
/* TOP */
.service-top{
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
/* ICON */
.service-icon{
width: 54px;
height: 54px;
border-radius: 16px;
display: grid;
place-items: center;
background: radial-gradient(
120% 120% at 20% 15%,
var(--cyan-300) 0%,
var(--blue-600) 55%,
rgba(251, 191, 36, 0.9) 120%
);
border: 1px solid rgba(2, 6, 23, 0.10);
box-shadow: 0 14px 26px rgba(37, 99, 235, 0.16);
transform: translateZ(34px);
}
.s-ico{
width: 26px;
height: 26px;
fill: rgba(255, 255, 255, 0.96);
filter: drop-shadow(0 8px 16px rgba(2, 6, 23, 0.20));
}
/* TITLE */
.service-name{
margin: 0;
font-size: 19px;
font-weight: 950;
color: var(--ink);
letter-spacing: -0.01em;
transform: translateZ(28px);
}
.service-card:hover .service-name,
.service-card:active .service-name,
.service-card:focus-within .service-name,
.service-card.is-tilting .service-name{
background: linear-gradient(90deg, var(--blue-600), var(--yellow-400));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* LIST */
.service-list{
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 10px;
transform: translateZ(18px);
}
.service-list li{
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 16px;
line-height: 1.55;
color: #e5e8f0;
font-weight: 650;
transform: none !important;
position: relative;
padding: 2px 0;
transition: color .18s ease, opacity .18s ease;
}
.service-list li::before{
content: "";
position: absolute;
left: -8px;
right: -8px;
top: -4px;
bottom: -4px;
border-radius: 12px;
background: linear-gradient(
90deg,
rgba(37, 99, 235, 0.10),
rgba(251, 191, 36, 0.10),
rgba(37, 99, 235, 0.06)
);
opacity: 0;
transform: scale(0.98);
transition: opacity .18s ease, transform .18s ease;
pointer-events: none;
}
.service-list li:hover{
color: var(--blue-900);
}
.service-list li:hover::before{
opacity: 1;
transform: scale(1);
}
.services-section{
padding: 100px 20px 100px;
}
/* CHECK */
.check{
width: 18px;
height: 18px;
border-radius: 7px;
background: linear-gradient(135deg, var(--blue-600), rgba(96, 165, 250, 0.95));
position: relative;
flex-shrink: 0;
margin-top: 2px;
box-shadow: 0 10px 18px rgba(37, 99, 235, 0.12);
transition: background .18s ease, box-shadow .18s ease;
}
.check::after{
content: "";
position: absolute;
left: 5px;
top: 3px;
width: 6px;
height: 9px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(35deg);
}
.service-list li:hover .check{
background: linear-gradient(135deg, var(--yellow-400), var(--blue-600));
box-shadow:
0 0 0 6px rgba(251, 191, 36, 0.12),
0 14px 26px rgba(37, 99, 235, 0.14);
}
.services-btn{
display: inline-flex;
align-items: center;
justify-content: center;
height: 52px;
padding: 0 30px;
border-radius: 999px;
background: linear-gradient(135deg, var(--blue-600), var(--yellow-400));
color: #0B1220;
font-weight: 950;
text-decoration: none;
border: 1px solid rgba(2, 6, 23, 0.10);
box-shadow: 0 14px 34px rgba(37, 99, 235, 0.18);
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.services-btn:hover{
transform: translateY(-2px);
box-shadow: 0 22px 52px rgba(37, 99, 235, 0.22);
filter: saturate(1.03);
}
/* =========================
CAMPAIGN CARD
========================= */
.service-card.campaign{
position: relative;
overflow: visible;
}
.service-card.campaign .service-top,
.service-card.campaign .service-list,
.service-card.campaign .campaign-timer,
.service-card.campaign .service-proof{
position: relative;
z-index: 2;
}
.service-card.campaign::after{
content: "";
position: absolute;
top: -18px;
right: -18px;
width: 96px;
height: 96px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 105, 60, 0.24), transparent 68%);
pointer-events: none;
z-index: 1;
}
/* =========================
DISCOUNT BADGE
========================= */
.discount-badge{
position: absolute;
top: -16px;
right: -16px;
z-index: 12;
min-width: 112px;
padding: 10px 12px 11px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 999px;
background: linear-gradient(135deg, #ff4d2d, #ff8a1f);
color: #fff;
text-align: center;
box-shadow:
0 12px 30px rgba(255, 88, 34, 0.38),
0 0 0 2px rgba(255, 255, 255, 0.14);
transform: rotate(8deg);
transition: transform .28s ease, box-shadow .28s ease, filter .28s ease;
}
.discount-badge strong{
display: block;
font-size: 12px;
line-height: 1.1;
font-weight: 800;
letter-spacing: .2px;
}
.discount-badge span{
display: block;
margin-top: 2px;
font-size: 14px;
line-height: 1.05;
font-weight: 900;
letter-spacing: .2px;
}
.service-card.campaign:hover .discount-badge{
transform: rotate(0deg) scale(1.06);
box-shadow:
0 16px 34px rgba(255, 88, 34, 0.46),
0 0 0 2px rgba(255, 255, 255, 0.18);
filter: saturate(1.08);
}
/* =========================
CAMPAIGN TIMER
========================= */
.campaign-timer{
margin-top: 16px;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 10px 24px rgba(3, 10, 18, 0.12);
}
.campaign-timer-icon{
width: 34px;
height: 34px;
flex: 0 0 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
color: #ffd27a;
animation: hourglassPulse 2.2s ease-in-out infinite;
}
.campaign-timer-icon svg{
width: 20px;
height: 20px;
display: block;
}
.campaign-timer-text{
display: flex;
flex-direction: column;
gap: 2px;
}
.campaign-label{
font-size: 10px;
font-weight: 700;
letter-spacing: .4px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.66);
}
.campaign-timer-text strong{
font-size: 13px;
line-height: 1.2;
font-weight: 800;
color: #ffffff;
letter-spacing: .15px;
}
@keyframes hourglassPulse{
0%{
transform: translateY(0) scale(1);
box-shadow: 0 0 0 rgba(255, 210, 122, 0);
}
50%{
transform: translateY(-2px) scale(1.05);
box-shadow: 0 0 18px rgba(255, 210, 122, 0.22);
}
100%{
transform: translateY(0) scale(1);
box-shadow: 0 0 0 rgba(255, 210, 122, 0);
}
}
/* =========================
SOCIAL PROOF
========================= */
.service-proof{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 14px;
padding: 12px 14px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255,255,255,0.085), rgba(255,255,255,0.055));
border: 1px solid rgba(255, 255, 255, 0.12);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
0 10px 24px rgba(3, 10, 18, 0.10);
transition: border-color .28s ease, box-shadow .28s ease, transform .28s ease, background .28s ease;
}
.proof-item{
display: inline-flex;
align-items: center;
gap: 9px;
min-width: 0;
flex: 1 1 auto;
}
.proof-icon{
width: 28px;
height: 28px;
min-width: 28px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 1px solid rgba(255,255,255,0.12);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.10),
0 6px 14px rgba(0,0,0,0.14);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease, color .25s ease;
}
.proof-icon svg{
width: 15px;
height: 15px;
display: block;
stroke: currentColor;
}
.proof-text{
font-size: 13px;
font-weight: 750;
color: rgba(255, 255, 255, 0.94);
letter-spacing: .12px;
white-space: nowrap;
}
.proof-divider{
width: 1px;
height: 20px;
background: linear-gradient(
180deg,
rgba(255,255,255,0.05),
rgba(255,255,255,0.22),
rgba(255,255,255,0.05)
);
flex-shrink: 0;
}
/* View icon */
.proof-icon-view{
background: linear-gradient(135deg, rgba(37,99,235,0.32), rgba(96,165,250,0.20));
color: #8fd2ff;
border-color: rgba(120, 198, 255, 0.22);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.10),
0 8px 18px rgba(30, 80, 160, 0.20);
}
/* Hot icon */
.proof-icon-hot{
background: linear-gradient(135deg, rgba(255,166,77,0.34), rgba(255,107,53,0.22));
color: #ffd17a;
border-color: rgba(255, 183, 77, 0.26);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.10),
0 8px 18px rgba(165, 88, 22, 0.20);
}
/* Trend icon */
.proof-icon-trend{
background: linear-gradient(135deg, rgba(72,187,255,0.32), rgba(0,122,255,0.18));
color: #9bdfff;
border-color: rgba(125, 211, 252, 0.24);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.10),
0 8px 18px rgba(22, 98, 165, 0.20);
}
/* Premium icon */
.proof-icon-premium{
background: linear-gradient(135deg, rgba(167,139,250,0.30), rgba(236,72,153,0.20));
color: #f1d0ff;
border-color: rgba(221, 160, 255, 0.24);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.10),
0 8px 18px rgba(112, 48, 155, 0.20);
}
.proof-hot .proof-text{
color: #ffd36b;
}
.proof-trend .proof-text{
color: #8ed8ff;
}
.proof-premium .proof-text{
color: #d7c3ff;
}
.service-card.campaign:hover .service-proof{
border-color: rgba(255, 211, 107, 0.24);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
0 14px 30px rgba(0, 0, 0, 0.14);
transform: translateY(-1px);
background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));
}
.service-card.campaign:hover .proof-icon{
transform: scale(1.06);
}
/* =========================
SERVICES MOBILE
========================= */
@media (max-width: 768px){
.services-grid{
grid-template-columns: 1fr;
gap: 18px;
}
.service-card{
padding: 22px 18px;
}
.discount-badge{
top: -12px;
right: -8px;
min-width: 102px;
padding: 9px 10px 10px;
}
.discount-badge strong{
font-size: 11px;
}
.discount-badge span{
font-size: 13px;
}
.campaign-timer{
width: 100%;
gap: 9px;
padding: 10px 11px;
margin-top: 14px;
}
.campaign-timer-icon{
width: 32px;
height: 32px;
flex-basis: 32px;
}
.campaign-timer-text strong{
font-size: 12px;
}
.campaign-label{
font-size: 9px;
}
.service-proof{
width: 100%;
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 11px 12px;
margin-top: 14px;
}
.proof-item{
width: 100%;
}
.proof-divider{
display: none;
}
.proof-icon{
width: 26px;
height: 26px;
min-width: 26px;
}
.proof-icon svg{
width: 14px;
height: 14px;
}
.proof-text{
white-space: normal;
font-size: 12.5px;
line-height: 1.35;
}
}
/* css/style.css */
/* =========================
GLOBAL STYLES
========================= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Inter", Arial, sans-serif;
line-height: 1.6;
color: #222;
}
.container {
width: 90%;
max-width: 1200px;
margin: auto;
}
/* =========================
BUTTONS
========================= */
.btn-primary {
background: #f39c12;
color: #fff;
padding: 12px 28px;
text-decoration: none;
border-radius: 6px;
display: inline-block;
transition: 0.3s;
}
.btn-primary:hover {
background: #e67e22;
}
.btn-outline {
border: 1px solid #f39c12;
color: #f39c12;
padding: 12px 28px;
text-decoration: none;
border-radius: 6px;
transition: 0.3s;
}
.btn-outline:hover {
background: #f39c12;
color: #fff;
}
/* css/testominal.css */
/* ================= SECTION FULL WIDTH ================= */
.testimonials-section {
width: 100%;
padding: 120px 0;
background: linear-gradient(135deg, #0a0f1f, #111827);
color: #fff;
overflow: hidden;
}
.testimonials-head {
text-align: center;
margin-bottom: 60px;
}
.testimonials-head h2 {
font-size: 42px;
font-weight: 700;
}
.testimonials-head p {
opacity: 0.7;
margin-top: 10px;
}
/* ================= REELS GRID ================= */
.reels-wrapper {
display: flex;
gap: 30px;
overflow-x: auto;
padding: 20px 60px;
scroll-snap-type: x mandatory;
}
.reels-wrapper::-webkit-scrollbar {
display: none;
}
/* ================= REEL CARD ================= */
.reel-card {
min-width: 260px;
height: 480px;
border-radius: 24px;
overflow: hidden;
position: relative;
cursor: pointer;
flex-shrink: 0;
scroll-snap-align: center;
transition: 0.4s ease;
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.reel-card:hover {
transform: scale(1.05);
}
.reel-card video {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.8);
transition: 0.4s ease;
}
.reel-card:hover video {
filter: brightness(1);
}
/* Overlay */
.reel-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.2));
transition: 0.4s ease;
}
.play-icon {
width: 70px;
height: 70px;
border-radius: 50%;
background: linear-gradient(135deg, #5865f2, #00ffc8);
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
box-shadow: 0 15px 50px rgba(0,255,200,0.4);
transition: 0.3s ease;
}
.reel-card:hover .play-icon {
transform: scale(1.15);
}
/* ================= MODAL ================= */
.video-modal {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.85);
align-items: center;
justify-content: center;
z-index: 9999;
}
.video-modal.active {
display: flex;
}
.modal-content {
position: relative;
width: 400px;
max-width: 90%;
}
.modal-content video {
width: 100%;
border-radius: 20px;
}
.close-modal {
position: absolute;
top: -40px;
right: 0;
font-size: 30px;
cursor: pointer;
color: #fff;
}