/* ============================================================
   AVK Aydın Vinç — Samsun | iOS Glassmorphism Design System
   ============================================================ */

/* ── 1. CSS Değişkenleri ────────────────────────────────────── */
:root {
    /* Renkler */
    --bg:        #060A14;
    --bg-2:      #0B1120;
    --bg-3:      #111827;
    --yellow:    #FEF100;
    --yellow-dim:rgba(254,241,0,.10);
    --yellow-glow:rgba(254,241,0,.30);
    --cyan:      #06B6D4;
    --white:     #F0F8FF;
    --gray:      #8FA3BE;
    --border:    rgba(255,255,255,.08);
    --border-y:  rgba(254,241,0,.25);

    /* iOS Material — UltraThin */
    --mat-ultra:  rgba(255,255,255,.03);
    --blur-ultra: blur(10px) saturate(160%);
    /* iOS Material — Thin */
    --mat-thin:   rgba(255,255,255,.07);
    --blur-thin:  blur(20px) saturate(180%);
    /* iOS Material — Thick */
    --mat-thick:  rgba(255,255,255,.13);
    --blur-thick: blur(40px) saturate(200%);

    --r:    14px;
    --r-lg: 24px;
    --r-xl: 32px;
    --transition: all .3s cubic-bezier(.4,0,.2,1);
}

/* ── 2. Reset ───────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; }
body {
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif;
    background:var(--bg);
    color:var(--white);
    line-height:1.6;
    overflow-x:hidden;
}
img { max-width:100%; height:auto; display:block; }
a { text-decoration:none; }
ul { list-style:none; }
section { overflow-x:hidden; }

/* ── 3. Glass Materials ─────────────────────────────────────── */
.glass-ultra {
    background:var(--mat-ultra);
    backdrop-filter:var(--blur-ultra);
    -webkit-backdrop-filter:var(--blur-ultra);
    border:1px solid rgba(255,255,255,.06);
}
.glass-thin {
    background:var(--mat-thin);
    backdrop-filter:var(--blur-thin);
    -webkit-backdrop-filter:var(--blur-thin);
    border:1px solid rgba(255,255,255,.10);
}
.glass-thick {
    background:var(--mat-thick);
    backdrop-filter:var(--blur-thick);
    -webkit-backdrop-filter:var(--blur-thick);
    border:1px solid rgba(255,255,255,.16);
}

/* ── 4. Orb (dekoratif arka plan ışıkları) ──────────────────── */
.orb {
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    pointer-events:none;
    animation:orbFloat 12s ease-in-out infinite;
}
@keyframes orbFloat {
    0%,100% { transform:translateY(0) scale(1); }
    50%      { transform:translateY(-30px) scale(1.06); }
}

/* ── 5. Butonlar ────────────────────────────────────────────── */
.btn-primary {
    display:inline-flex; align-items:center; gap:10px;
    background:var(--yellow); color:#000;
    font-weight:800; font-size:.95rem;
    padding:14px 28px; border-radius:50px;
    border:none; cursor:pointer;
    box-shadow:0 8px 32px var(--yellow-glow);
    transition:var(--transition);
    white-space:nowrap;
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 14px 40px var(--yellow-glow); background:#FFD700; }

.btn-glass {
    display:inline-flex; align-items:center; gap:10px;
    background:var(--mat-thin);
    backdrop-filter:var(--blur-thin);
    -webkit-backdrop-filter:var(--blur-thin);
    color:var(--white); font-weight:700; font-size:.95rem;
    padding:13px 26px; border-radius:50px;
    border:1px solid rgba(255,255,255,.15); cursor:pointer;
    transition:var(--transition); white-space:nowrap;
}
.btn-glass:hover { border-color:var(--border-y); color:var(--yellow); background:rgba(254,241,0,.06); }

.btn-wa {
    display:inline-flex; align-items:center; gap:10px;
    background:linear-gradient(135deg,#25D366,#128C7E);
    color:#fff; font-weight:700; font-size:.95rem;
    padding:13px 26px; border-radius:50px;
    border:none; cursor:pointer;
    box-shadow:0 8px 28px rgba(37,211,102,.3);
    transition:var(--transition); white-space:nowrap;
}
.btn-wa:hover { transform:translateY(-2px); box-shadow:0 14px 36px rgba(37,211,102,.4); }

/* ── 6. Typography ──────────────────────────────────────────── */
.section-badge {
    display:inline-flex; align-items:center; gap:8px;
    background:var(--yellow-dim);
    border:1px solid var(--border-y);
    color:var(--yellow); font-size:.75rem; font-weight:700;
    padding:6px 16px; border-radius:30px;
    text-transform:uppercase; letter-spacing:1.5px;
    margin-bottom:18px;
}
h1,h2,h3 { line-height:1.15; }
.highlight {
    background:linear-gradient(135deg,var(--yellow) 0%,#FFD700 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}
.section-header { text-align:center; margin-bottom:56px; }
.section-header h2 { font-size:clamp(1.9rem,4vw,2.8rem); font-weight:900; }
.section-header p  { color:var(--gray); font-size:1.05rem; max-width:560px; margin:14px auto 0; line-height:1.8; }

/* ── 7. Header / Nav ────────────────────────────────────────── */
#mainHeader {
    position:fixed; top:0; left:0; right:0; z-index:1000;
    background:rgba(6,10,20,.7);
    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    border-bottom:1px solid rgba(255,255,255,.07);
    transition:background .35s, border-color .35s;
}
#mainHeader.scrolled {
    background:rgba(6,10,20,.92);
    border-bottom-color:rgba(254,241,0,.15);
}
nav {
    max-width:1280px; margin:0 auto; padding:0 24px;
    display:flex; justify-content:space-between; align-items:center; height:70px;
}
.logo { display:flex; align-items:center; gap:12px; }
.logo-img { height:40px !important; width:auto !important; max-width:160px !important; object-fit:contain !important; display:block !important; }
.logo-icon {
    width:42px; height:42px; border-radius:12px;
    background:linear-gradient(135deg,var(--yellow),#FFD700);
    display:flex; align-items:center; justify-content:center;
    font-size:20px; font-weight:900; color:#000;
}
.logo-text { display:flex; flex-direction:column; }
.logo-text .main { font-size:1.1rem; font-weight:900; color:var(--white); line-height:1.1; }
.logo-text .sub  { font-size:.6rem; color:var(--gray); font-weight:600; text-transform:uppercase; letter-spacing:1.5px; }

.nav-links {
    display:flex; align-items:center; gap:6px;
}
.nav-links a {
    color:var(--gray); font-weight:500; font-size:13.5px;
    padding:8px 14px; border-radius:10px;
    transition:var(--transition);
}
.nav-links a:hover, .nav-links a.active { color:var(--white); background:rgba(255,255,255,.06); }
.nav-links .nav-cta {
    background:var(--yellow); color:#000; font-weight:800;
    padding:9px 20px; border-radius:25px;
    box-shadow:0 4px 20px var(--yellow-glow);
}
.nav-links .nav-cta:hover { background:#FFD700; transform:translateY(-2px); }

.mobile-menu-btn {
    display:none; background:none; border:1px solid rgba(255,255,255,.15);
    color:var(--white); width:40px; height:40px; border-radius:10px;
    cursor:pointer; align-items:center; justify-content:center; font-size:16px;
    transition:var(--transition);
}
.mobile-menu-btn:hover { border-color:var(--yellow); color:var(--yellow); }

/* ── 8. Hero ────────────────────────────────────────────────── */
#hero {
    min-height:100vh; position:relative; display:flex; align-items:center;
    padding-top:70px; overflow:hidden;
}
.hero-bg-gradient {
    position:absolute; inset:0;
    background:radial-gradient(ellipse 70% 60% at 65% 40%, rgba(6,182,212,.09) 0%, transparent 70%),
               radial-gradient(ellipse 50% 50% at 30% 60%, rgba(254,241,0,.06) 0%, transparent 70%),
               linear-gradient(160deg, rgba(6,10,20,.90) 0%, rgba(11,17,32,.80) 50%, rgba(6,10,20,.95) 100%);
    z-index:1;
}
#hero {
    background-image: url('../images/site/hero-bg.png');
    background-size: cover;
    background-position: center 35%;
    background-repeat: no-repeat;
}
#hero > * { position:relative; z-index:2; }
.hero-inner {
    max-width:1280px; margin:0 auto; padding:80px 24px 60px;
    display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
    position:relative; z-index:1; width:100%;
}
.hero-left { }
.hero-badge { margin-bottom:20px; }
.hero-title {
    font-size:clamp(2.4rem,5vw,3.8rem);
    font-weight:900; line-height:1.1;
    margin-bottom:20px;
}
.hero-desc {
    color:var(--gray); font-size:1.08rem; line-height:1.85;
    max-width:480px; margin-bottom:36px;
}
.hero-btns { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:48px; }

.hero-stats { display:flex; gap:28px; flex-wrap:wrap; }
.hero-stat { }
.hero-stat .num { font-size:1.8rem; font-weight:900; color:var(--yellow); line-height:1; }
.hero-stat .num sup { font-size:.7em; }
.hero-stat .lbl { font-size:.72rem; color:var(--gray); font-weight:600; text-transform:uppercase; letter-spacing:.8px; margin-top:3px; }
.hero-stat-sep { width:1px; background:linear-gradient(180deg,transparent,rgba(255,255,255,.15),transparent); align-self:stretch; }

/* Hero right — glass card */
.hero-card {
    border-radius:var(--r-xl);
    padding:32px;
    position:relative;
    overflow:hidden;
}
.hero-card::before {
    content:''; position:absolute; top:-60px; right:-60px;
    width:200px; height:200px; border-radius:50%;
    background:radial-gradient(circle, rgba(254,241,0,.12) 0%, transparent 70%);
    pointer-events:none;
}
.hero-card-title { font-size:1rem; font-weight:700; color:var(--white); margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.hero-card-title i { color:var(--yellow); }
.contact-item {
    display:flex; align-items:center; gap:14px;
    padding:14px 16px; border-radius:var(--r);
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.06);
    margin-bottom:10px; transition:var(--transition); cursor:pointer;
    text-decoration:none;
}
.contact-item:hover { background:rgba(254,241,0,.06); border-color:var(--border-y); }
.contact-icon {
    width:42px; height:42px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-size:16px; flex-shrink:0;
}
.ci-yellow { background:rgba(254,241,0,.15); color:var(--yellow); border:1px solid rgba(254,241,0,.2); }
.ci-green  { background:rgba(37,211,102,.15); color:#25D366;      border:1px solid rgba(37,211,102,.2); }
.ci-cyan   { background:rgba(6,182,212,.15);  color:var(--cyan);   border:1px solid rgba(6,182,212,.2); }
.contact-info .label { font-size:.7rem; color:var(--gray); font-weight:600; text-transform:uppercase; letter-spacing:.8px; }
.contact-info .value { font-size:.95rem; font-weight:700; color:var(--white); margin-top:1px; white-space:nowrap; }

.hero-card-divider { height:1px; background:rgba(255,255,255,.07); margin:16px 0; }

.quote-form-mini { }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
.form-input {
    width:100%; padding:11px 14px; border-radius:10px;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
    color:var(--white); font-size:.87rem; outline:none;
    transition:var(--transition);
}
.form-input::placeholder { color:rgba(255,255,255,.35); }
.form-input:focus { border-color:rgba(254,241,0,.4); background:rgba(254,241,0,.04); }
.form-input.full { grid-column:1/-1; }
.form-submit {
    width:100%; padding:13px; border-radius:10px;
    background:var(--yellow); color:#000;
    font-weight:800; font-size:.9rem; cursor:pointer;
    border:none; transition:var(--transition);
    display:flex; align-items:center; justify-content:center; gap:8px;
}
.form-submit:hover { background:#FFD700; transform:translateY(-2px); box-shadow:0 8px 28px var(--yellow-glow); }
.form-msg { font-size:.8rem; color:var(--gray); text-align:center; margin-top:8px; display:none; }
.form-msg.success { color:#34D399; display:block; }
.form-msg.error   { color:#F87171; display:block; }

/* ── 9. Hizmetler ───────────────────────────────────────────── */
#hizmetler {
    padding:110px 0;
    background:var(--bg-2);
    position:relative;
}
.container { max-width:1280px; margin:0 auto; padding:0 24px; }
.services-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.service-card {
    border-radius:var(--r-lg); padding:28px; cursor:pointer;
    position:relative; overflow:hidden; transition:var(--transition);
}
.service-card::after {
    content:''; position:absolute; inset:0; border-radius:var(--r-lg);
    background:linear-gradient(135deg,rgba(254,241,0,.04) 0%,transparent 60%);
    opacity:0; transition:opacity .3s;
}
.service-card:hover { transform:translateY(-6px); border-color:var(--border-y) !important; }
.service-card:hover::after { opacity:1; }
.service-icon {
    width:52px; height:52px; border-radius:14px;
    background:rgba(254,241,0,.10); border:1px solid rgba(254,241,0,.18);
    display:flex; align-items:center; justify-content:center;
    color:var(--yellow); font-size:20px; margin-bottom:18px;
}
.service-card h3 { font-size:1.05rem; font-weight:800; color:var(--white); margin-bottom:8px; }
.service-card p  { font-size:.84rem; color:var(--gray); line-height:1.75; margin-bottom:16px; }
.service-range {
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
    color:var(--gray); font-size:.75rem; font-weight:700;
    padding:4px 12px; border-radius:20px;
}
.service-range i { color:var(--yellow); font-size:10px; }

/* ── 10. Nasıl Çalışır ──────────────────────────────────────── */
#nasil-calisir {
    padding:110px 0;
    background:var(--bg);
    position:relative;
}
.steps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative; }
.steps-grid::before {
    content:''; position:absolute; top:36px; left:10%; right:10%; height:1px;
    background:linear-gradient(90deg,transparent,rgba(254,241,0,.3),var(--yellow),rgba(254,241,0,.3),transparent);
    z-index:0;
}
.step-card {
    text-align:center; padding:32px 20px; border-radius:var(--r-lg);
    position:relative; z-index:1; transition:var(--transition);
}
.step-card:hover { transform:translateY(-4px); }
.step-num {
    width:56px; height:56px; border-radius:50%;
    background:linear-gradient(135deg,var(--yellow),#FFD700);
    color:#000; font-weight:900; font-size:1.2rem;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 20px;
    box-shadow:0 8px 28px var(--yellow-glow);
}
.step-icon { font-size:1.6rem; margin-bottom:14px; color:var(--yellow); }
.step-card h3 { font-size:1rem; font-weight:800; color:var(--white); margin-bottom:10px; }
.step-card p  { font-size:.84rem; color:var(--gray); line-height:1.75; }

/* ── 11. Bölge Kapsamı ──────────────────────────────────────── */
#bolge {
    padding:110px 0;
    background:var(--bg-2);
    position:relative;
}
.bolge-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.bolge-left h2 { font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:900; margin-bottom:16px; }
.bolge-left p  { color:var(--gray); line-height:1.85; margin-bottom:30px; }
.bolge-tags { display:flex; flex-wrap:wrap; gap:10px; }
.bolge-tag {
    display:flex; align-items:center; gap:7px;
    padding:9px 18px; border-radius:25px; font-size:.84rem; font-weight:600;
    transition:var(--transition); cursor:default;
}
.bolge-tag i { font-size:10px; }
.bolge-tag.primary { background:var(--yellow-dim); border:1px solid var(--border-y); color:var(--yellow); }
.bolge-tag.secondary { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); color:var(--gray); }
.bolge-tag.secondary:hover { background:var(--yellow-dim); border-color:var(--border-y); color:var(--yellow); }

.bolge-right { }
.bolge-map-card {
    border-radius:var(--r-xl); padding:32px;
    position:relative; overflow:hidden;
}
.bolge-map-card h3 { font-size:1.1rem; font-weight:800; margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.bolge-map-card h3 i { color:var(--cyan); }
.response-items { display:flex; flex-direction:column; gap:10px; }
.response-item {
    display:flex; align-items:center; gap:14px; padding:12px 14px;
    border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
}
.response-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.dot-green  { background:#34D399; box-shadow:0 0 8px rgba(52,211,153,.6); }
.dot-yellow { background:var(--yellow); box-shadow:0 0 8px var(--yellow-glow); }
.dot-cyan   { background:var(--cyan); box-shadow:0 0 8px rgba(6,182,212,.6); }
.response-item .city  { font-size:.9rem; font-weight:700; color:var(--white); flex:1; }
.response-item .time  { font-size:.78rem; font-weight:600; padding:3px 10px; border-radius:20px; }
.time-green  { background:rgba(52,211,153,.12); color:#34D399; }
.time-yellow { background:var(--yellow-dim); color:var(--yellow); }
.time-cyan   { background:rgba(6,182,212,.12); color:var(--cyan); }

/* ── 12. Neden Biz ──────────────────────────────────────────── */
#neden-biz {
    padding:110px 0;
    background:var(--bg);
    position:relative;
}
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.why-card {
    padding:32px; border-radius:var(--r-lg); transition:var(--transition);
}
.why-card:hover { transform:translateY(-5px); border-color:var(--border-y) !important; }
.why-icon {
    width:50px; height:50px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    font-size:18px; margin-bottom:18px;
}
.wi-y { background:rgba(254,241,0,.12); border:1px solid rgba(254,241,0,.2); color:var(--yellow); }
.wi-c { background:rgba(6,182,212,.12);  border:1px solid rgba(6,182,212,.2);  color:var(--cyan); }
.wi-g { background:rgba(52,211,153,.10); border:1px solid rgba(52,211,153,.2);  color:#34D399; }
.why-card h3 { font-size:1.05rem; font-weight:800; color:var(--white); margin-bottom:10px; }
.why-card p  { font-size:.85rem; color:var(--gray); line-height:1.8; }

/* ── 13. İletişim ───────────────────────────────────────────── */
#iletisim {
    padding:110px 0;
    background:var(--bg-2);
    position:relative;
}
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.contact-left h2 { font-size:clamp(1.8rem,3.5vw,2.5rem); font-weight:900; margin-bottom:14px; }
.contact-left p  { color:var(--gray); line-height:1.85; margin-bottom:36px; }
.contact-info-list { display:flex; flex-direction:column; gap:12px; margin-bottom:30px; }
.cinfo-item {
    display:flex; align-items:center; gap:14px; padding:14px 16px;
    border-radius:var(--r); text-decoration:none; transition:var(--transition);
}
.cinfo-item:hover { background:rgba(254,241,0,.05); border-color:var(--border-y) !important; }
.cinfo-icon {
    width:40px; height:40px; border-radius:11px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:15px;
}
.cinfo-text .lbl { font-size:.68rem; color:var(--gray); font-weight:600; text-transform:uppercase; letter-spacing:.8px; }
.cinfo-text .val { font-size:.95rem; font-weight:700; color:var(--white); }

.contact-right { }
.contact-form-card {
    border-radius:var(--r-xl); padding:36px;
}
.contact-form-card h3 { font-size:1.1rem; font-weight:800; margin-bottom:24px; display:flex; align-items:center; gap:10px; }
.contact-form-card h3 i { color:var(--yellow); }
.cf-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.cf-full { grid-column:1/-1; }
.cf-input {
    width:100%; padding:13px 16px; border-radius:12px;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10);
    color:var(--white); font-size:.9rem; outline:none;
    transition:var(--transition); resize:none;
    font-family:inherit;
}
.cf-input::placeholder { color:rgba(255,255,255,.3); }
.cf-input:focus { border-color:rgba(254,241,0,.45); background:rgba(254,241,0,.03); }
.cf-submit {
    width:100%; padding:15px; border-radius:12px;
    background:var(--yellow); color:#000;
    font-weight:900; font-size:1rem; cursor:pointer;
    border:none; transition:var(--transition);
    display:flex; align-items:center; justify-content:center; gap:10px;
    margin-top:4px;
}
.cf-submit:hover { background:#FFD700; transform:translateY(-2px); box-shadow:0 10px 32px var(--yellow-glow); }
.cf-submit.loading { opacity:.7; pointer-events:none; }
.cf-msg { margin-top:12px; font-size:.85rem; text-align:center; display:none; padding:10px; border-radius:10px; }
.cf-msg.success { display:block; color:#34D399; background:rgba(52,211,153,.08); border:1px solid rgba(52,211,153,.2); }
.cf-msg.error   { display:block; color:#F87171; background:rgba(248,113,113,.08); border:1px solid rgba(248,113,113,.2); }

/* ── 14. Footer ─────────────────────────────────────────────── */
footer {
    background:var(--bg);
    border-top:1px solid rgba(255,255,255,.07);
    padding:50px 0 0;
}
.footer-inner {
    max-width:1280px; margin:0 auto; padding:0 24px;
    display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:48px;
    padding-bottom:48px;
}
.f-logo { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.f-desc { font-size:.85rem; color:var(--gray); line-height:1.8; max-width:280px; margin-bottom:20px; }
.f-socials { display:flex; gap:8px; }
.f-social {
    width:36px; height:36px; border-radius:9px;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
    display:flex; align-items:center; justify-content:center;
    color:var(--gray); font-size:13px; transition:var(--transition);
}
.f-social:hover { background:var(--yellow-dim); border-color:var(--border-y); color:var(--yellow); }
.f-col h4 { font-size:.72rem; font-weight:700; color:var(--white); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:18px; }
.f-col ul { display:flex; flex-direction:column; gap:10px; }
.f-col ul li a { font-size:.85rem; color:var(--gray); display:flex; align-items:center; gap:8px; transition:color .2s; }
.f-col ul li a:hover { color:var(--yellow); }
.f-col ul li a i { font-size:9px; color:var(--yellow); }
.footer-bottom {
    border-top:1px solid rgba(255,255,255,.06);
    padding:18px 24px;
    max-width:1280px; margin:0 auto;
    display:flex; justify-content:space-between; align-items:center;
    font-size:.78rem; color:var(--gray); flex-wrap:wrap; gap:8px;
}
.footer-bottom a { color:var(--gray); transition:color .2s; }
.footer-bottom a:hover { color:var(--yellow); }

/* ── 15. 30 Saniye Engagement Popup ────────────────────────── */
.engage-overlay {
    position:fixed; inset:0; z-index:9998;
    background:rgba(0,0,0,.5);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    opacity:0; pointer-events:none; transition:opacity .4s;
}
.engage-overlay.show { opacity:1; pointer-events:all; }

.engage-popup {
    position:fixed; bottom:0; left:0; right:0; z-index:9999;
    max-width:480px; margin:0 auto;
    border-radius:32px 32px 0 0;
    padding:28px 28px 36px;
    transform:translateY(110%); transition:transform .45s cubic-bezier(.32,0,.2,1);
}
@media(min-width:520px) {
    .engage-popup {
        bottom:24px; left:50%; right:auto; transform:translateX(-50%) translateY(40px);
        border-radius:var(--r-xl); width:440px;
        opacity:0; transition:transform .45s cubic-bezier(.32,0,.2,1), opacity .4s;
    }
    .engage-popup.show { transform:translateX(-50%) translateY(0); opacity:1; }
}
.engage-popup.show { transform:translateY(0); }
.engage-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; }
.engage-badge {
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(255,59,48,.15); border:1px solid rgba(255,59,48,.3);
    color:#FF3B30; font-size:.7rem; font-weight:700;
    padding:4px 12px; border-radius:20px; text-transform:uppercase; letter-spacing:1px;
}
.engage-close {
    width:30px; height:30px; border-radius:50%;
    background:rgba(255,255,255,.1); border:none; cursor:pointer;
    color:var(--gray); font-size:12px; display:flex; align-items:center; justify-content:center;
    transition:var(--transition);
}
.engage-close:hover { background:rgba(255,255,255,.2); color:var(--white); }
.engage-popup h3 { font-size:1.2rem; font-weight:900; color:var(--white); margin-bottom:8px; }
.engage-popup p  { font-size:.88rem; color:var(--gray); line-height:1.7; margin-bottom:22px; }
.engage-btns { display:flex; flex-direction:column; gap:10px; }
.engage-btns a { display:flex; align-items:center; justify-content:center; gap:10px; padding:14px; border-radius:14px; font-weight:700; font-size:.92rem; transition:var(--transition); }
.engage-btn-call { background:var(--yellow); color:#000; box-shadow:0 8px 28px var(--yellow-glow); }
.engage-btn-call:hover { background:#FFD700; transform:translateY(-2px); }
.engage-btn-wa   { background:linear-gradient(135deg,#25D366,#128C7E); color:#fff; box-shadow:0 8px 28px rgba(37,211,102,.3); }
.engage-btn-wa:hover { transform:translateY(-2px); }
.engage-btn-form { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); color:var(--white); }
.engage-btn-form:hover { background:rgba(255,255,255,.12); }
.engage-timer { font-size:.72rem; color:var(--gray); text-align:center; margin-top:14px; }
.engage-timer span { color:var(--yellow); font-weight:700; }

/* ── 16. WhatsApp Float ─────────────────────────────────────── */
.wa-float {
    position:fixed; bottom:28px; right:24px; z-index:990;
    width:56px; height:56px; border-radius:50%;
    background:linear-gradient(135deg,#25D366,#128C7E);
    color:#fff; font-size:24px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 32px rgba(37,211,102,.4);
    transition:var(--transition); text-decoration:none;
}
.wa-float:hover { transform:scale(1.1); box-shadow:0 12px 40px rgba(37,211,102,.5); }
.wa-float-pulse {
    position:absolute; inset:-6px; border-radius:50%;
    border:2px solid rgba(37,211,102,.4);
    animation:waPulse 2s ease-out infinite;
}
@keyframes waPulse {
    0%   { transform:scale(1); opacity:.8; }
    100% { transform:scale(1.4); opacity:0; }
}

/* ── 17. Scroll Animasyonları ───────────────────────────────── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-l { opacity:0; transform:translateX(-28px); transition:opacity .65s ease, transform .65s ease; }
.reveal-l.visible { opacity:1; transform:translateX(0); }
.reveal-r { opacity:0; transform:translateX(28px); transition:opacity .65s ease, transform .65s ease; }
.reveal-r.visible { opacity:1; transform:translateX(0); }
.d1 { transition-delay:.1s; }
.d2 { transition-delay:.2s; }
.d3 { transition-delay:.3s; }
.d4 { transition-delay:.4s; }

/* ── 18. Responsive ─────────────────────────────────────────── */
@media(max-width:1024px) {
    .services-grid { grid-template-columns:repeat(2,1fr); }
    .steps-grid { grid-template-columns:repeat(2,1fr); }
    .steps-grid::before { display:none; }
}

@media(max-width:920px) {
    .nav-links { display:none; position:fixed; top:70px; left:0; right:0; z-index:999;
        flex-direction:column; align-items:stretch; gap:0;
        background:rgba(6,10,20,.97); backdrop-filter:blur(24px);
        border-bottom:1px solid rgba(255,255,255,.08); padding:16px;
    }
    .nav-links.open { display:flex; }
    .nav-links a { padding:13px 16px; border-radius:10px; font-size:15px; }
    .nav-links .nav-cta { margin-top:8px; text-align:center; justify-content:center; border-radius:12px; }
    .mobile-menu-btn { display:flex; }
    .hero-inner { grid-template-columns:1fr; gap:40px; padding:60px 24px 40px; }
    .hero-card { display:none; }
    .hero-title { font-size:clamp(2rem,7vw,3rem); }
    .bolge-grid  { grid-template-columns:1fr; }
    .contact-grid { grid-template-columns:1fr; }
    .why-grid { grid-template-columns:1fr 1fr; }
    .footer-inner { grid-template-columns:1fr 1fr; }
}

@media(max-width:600px) {
    .services-grid { grid-template-columns:1fr; }
    .steps-grid    { grid-template-columns:1fr; }
    .why-grid      { grid-template-columns:1fr; }
    .footer-inner  { grid-template-columns:1fr; }
    .cf-row        { grid-template-columns:1fr; }
    .hero-stats    { gap:16px; }
    .hero-btns     { flex-direction:column; }
    .hero-btns a   { width:100%; justify-content:center; }
}

/* ── 19. Service Card Görseli ───────────────────────────────── */
.sc-img {
    width:100% !important; height:160px !important; border-radius:12px; overflow:hidden !important;
    margin-bottom:18px;
    background:radial-gradient(ellipse at center, rgba(255,255,255,.04) 0%, transparent 80%);
    display:flex !important; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,.06);
    flex-shrink:0;
}
.sc-img img {
    width:100% !important; height:100% !important; object-fit:contain !important; object-position:center !important;
    padding:14px !important; max-width:100% !important;
    filter:drop-shadow(0 6px 16px rgba(0,0,0,.55));
    transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.service-card:hover .sc-img img { transform:scale(1.10) translateY(-5px); }

/* ── 20. Shimmer sweep on hover ─────────────────────────────── */
@keyframes shimmerSweep {
    0%   { left:-80%; }
    100% { left:140%; }
}
.service-card {
    position:relative; overflow:hidden;
}
.service-card::before {
    content:''; position:absolute; top:0; left:-80%; width:50%; height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.055), transparent);
    border-radius:inherit; pointer-events:none;
}
.service-card:hover::before { animation:shimmerSweep .65s ease; }

/* ── 21. Select option renk düzeltmesi ──────────────────────── */
select.form-input,
select.cf-input {
    color: var(--white) !important;
    color-scheme: dark;
}
select.form-input option,
select.cf-input option {
    background: #0f172a !important;
    color: #f1f5f9 !important;
}
select.form-input option:disabled,
select.cf-input option:disabled {
    color: #8FA3BE !important;
}

/* ── 22. Stats kart animasyonu ──────────────────────────────── */
@keyframes statGlow {
    0%,100% { box-shadow:0 0 0 0 rgba(254,241,0,.00); }
    50%     { box-shadow:0 0 22px 0 rgba(254,241,0,.12); }
}
.stat-card {
    transition:var(--transition);
    animation:statGlow 4s ease infinite;
}
.stat-card:nth-child(2) { animation-delay:.8s; }
.stat-card:nth-child(3) { animation-delay:1.6s; }
.stat-card:nth-child(4) { animation-delay:2.4s; }
.stat-card:hover { transform:translateY(-4px) scale(1.03); border-color:var(--border-y) !important; }

/* ── 23. Geliştirilmiş reveal ───────────────────────────────── */
.reveal, .reveal-l, .reveal-r {
    transition:opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
}
.d5 { transition-delay:.5s; }
.d6 { transition-delay:.6s; }

/* ── 24. Step kart hover efekti ─────────────────────────────── */
.step-card {
    transition:var(--transition);
}
.step-card:hover {
    transform:translateY(-5px);
    border-color:rgba(6,182,212,.3) !important;
    box-shadow:0 8px 32px rgba(6,182,212,.10);
}

/* ── 25. Why kart shimmer ───────────────────────────────────── */
.why-card {
    position:relative; overflow:hidden;
    transition:var(--transition);
}
.why-card:hover { transform:translateY(-5px); border-color:var(--border-y) !important; }
.why-card::before {
    content:''; position:absolute; top:0; left:-80%; width:50%; height:100%;
    background:linear-gradient(90deg, transparent, rgba(254,241,0,.04), transparent);
    border-radius:inherit; pointer-events:none;
}
.why-card:hover::before { animation:shimmerSweep .65s ease; }

/* ── 26. Hero görsel açılış animasyonu ──────────────────────── */
@keyframes heroFadeIn {
    from { opacity:0; transform:scale(1.03); }
    to   { opacity:1; transform:scale(1); }
}
#hero { animation:heroFadeIn 1.2s ease both; }