/* GOOGLE FONT YERİNE SİSTEM FONTLARI KULLANILDI */
:root{
    --primary: #0f5fff;
    --primary-dark: #083db3;
    --primary-soft: #dce8ff;
    --black: #0b0f17;
    --dark: #111827;
    --text: #4b5563;
    --white: #ffffff;
    --border: rgba(255,255,255,0.08);
    --shadow: 0 15px 50px rgba(0,0,0,0.18);
    --radius: 20px;
    --transition: all .35s ease;
}

/* GENEL RESET */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
}

body{
    font-family: Arial, Helvetica, sans-serif;
    color: var(--dark);
    background: #f5f8ff;
    line-height: 1.6;
    overflow-x: hidden;
}

/* GENEL ELEMANLAR */
a{
    text-decoration: none;
}

img{
    max-width: 100%;
    display: block;
}

ul{
    list-style: none;
}

button{
    border: none;
    outline: none;
    cursor: pointer;
}

/* CONTAINER */
.container{
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto;
}

/* BUTONLAR */
.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 15px;
    transition: var(--transition);
}

.btn-primary{
    background: linear-gradient(135deg, var(--primary), #2f86ff);
    color: var(--white);
    box-shadow: 0 10px 30px rgba(15,95,255,.28);
}

.btn-primary:hover{
    transform: translateY(-4px);
}

.btn-secondary{
    background: rgba(255,255,255,0.08);
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.18);
    backdrop-filter: blur(10px);
}

.btn-secondary:hover{
    background: rgba(255,255,255,0.15);
    transform: translateY(-4px);
}

.btn-outline{
    background: transparent;
    color: var(--dark);
    border: 1px solid rgba(17,24,39,0.12);
}

.btn-outline:hover{
    background: var(--dark);
    color: var(--white);
}

.btn-light{
    background: var(--white);
    color: var(--dark);
}

.btn-light:hover{
    transform: translateY(-4px);
}

.btn-dark{
    background: rgba(6,13,27,0.28);
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.15);
}

.btn-dark:hover{
    transform: translateY(-4px);
}

/* BÖLÜM BOŞLUĞU */
.section-space{
    padding: 100px 0;
}

/* BÖLÜM BAŞLIKLARI */
.section-head{
    margin-bottom: 45px;
}

.section-head.center{
    text-align: center;
    max-width: 850px;
    margin: 0 auto 45px;
}

.section-head h2,
.about-content h2,
.why-content h2{
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.15;
    margin-bottom: 18px;
    color: var(--black);
}

.section-head p,
.about-content p,
.why-content p{
    color: var(--text);
    font-size: 16px;
}

.section-tag{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(15,95,255,0.08);
    border: 1px solid rgba(15,95,255,0.14);
    color: var(--primary-dark);
    padding: 10px 16px;
    border-radius: 999px;
    margin-bottom: 18px;
    font-weight: 700;
    font-size: 14px;
}

.section-tag.light{
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.18);
    color: var(--white);
}

/* PRELOADER ALANI */
#preloader{
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at center, rgba(15,95,255,0.15), transparent 30%),
        linear-gradient(135deg, #030711, #061227 40%, #0b1630 100%);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .7s ease, visibility .7s ease;
}

#preloader.hide{
    opacity: 0;
    visibility: hidden;
}

.preloader-wrap{
    text-align: center;
    width: min(480px, calc(100% - 40px));
}

.preloader-logo{
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 28px;
}

.preloader-logo .logo-a{
    color: var(--white);
    font-size: 42px;
    letter-spacing: 9px;
    font-weight: 800;
}

.preloader-logo .logo-b{
    color: #83b1ff;
    font-size: 15px;
    letter-spacing: 3px;
}

.preloader-orbit{
    position: relative;
    width: 130px;
    height: 130px;
    margin: 0 auto 28px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.08);
    animation: rotateOrbit 6s linear infinite;
}

.preloader-orbit span{
    position: absolute;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, var(--primary), #7ab2ff);
    border-radius: 50%;
    box-shadow: 0 0 18px rgba(15,95,255,0.8);
}

.preloader-orbit span:nth-child(1){
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
}

.preloader-orbit span:nth-child(2){
    bottom: 18px;
    left: -6px;
}

.preloader-orbit span:nth-child(3){
    right: -6px;
    top: 58%;
}

.preloader-line{
    width: 100%;
    height: 8px;
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 18px;
}

.preloader-line-fill{
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #2a74ff, #89b7ff);
    border-radius: inherit;
    animation: loadingBar 2.4s ease-in-out forwards;
}

.preloader-text{
    color: rgba(255,255,255,0.75);
    font-size: 14px;
    letter-spacing: 1px;
}

@keyframes rotateOrbit{
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
}

@keyframes loadingBar{
    0%{ width: 0; }
    100%{ width: 100%; }
}

/* FLOATING BUTONLAR */
.floating-btn{
    position: fixed;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    color: var(--white);
    font-size: 22px;
    box-shadow: 0 14px 35px rgba(15,95,255,0.25);
    transition: var(--transition);
}

.floating-btn:hover{
    transform: translateY(-5px) scale(1.03);
}

.floating-whatsapp{
    left: 18px;
    bottom: 18px;
    background: linear-gradient(135deg, #0f5fff, #2e86ff);
}

.floating-top{
    right: 18px;
    bottom: 18px;
    background: linear-gradient(135deg, #0f5fff, #2e86ff);
    opacity: 0;
    visibility: hidden;
}

.floating-top.show{
    opacity: 1;
    visibility: visible;
}

/* TOPBAR ALANI */
.topbar{
    background: linear-gradient(90deg, #07111f, #0a1730 50%, #0f5fff);
    color: rgba(255,255,255,0.9);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.topbar-inner{
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 10px 0;
}

.topbar-item{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.topbar-item i{
    color: #8bb8ff;
}

/* HEADER ALANI */
.header{
    position: sticky;
    top: 0;
    z-index: 1300;
    background: rgba(4,11,24,0.82);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.header.scrolled{
    background: rgba(2,8,18,0.95);
    box-shadow: 0 16px 40px rgba(0,0,0,0.18);
}

.header-inner{
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.logo{
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--white);
}

.logo-mark{
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), #7ab2ff);
    color: var(--white);
    font-weight: 800;
    font-size: 20px;
    box-shadow: 0 14px 30px rgba(15,95,255,0.25);
}

.logo-text{
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.logo-text strong{
    font-size: 18px;
    color: var(--white);
}

.logo-text small{
    color: #8aa7d8;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.navbar{
    display: flex;
    align-items: center;
    gap: 28px;
}

.navbar a{
    color: rgba(255,255,255,0.86);
    font-weight: 600;
    font-size: 15px;
    position: relative;
    transition: var(--transition);
}

.navbar a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: var(--transition);
}

.navbar a:hover,
.navbar a.active{
    color: var(--white);
}

.navbar a:hover::after,
.navbar a.active::after{
    width: 100%;
}

.header-actions{
    display: flex;
    align-items: center;
    gap: 14px;
}

.mobile-menu-btn{
    display: none;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(255,255,255,0.08);
    color: var(--white);
    font-size: 18px;
}

/* HERO ALANI */
.hero{
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #07111f;
}

.hero-bg{
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(3,7,17,0.92), rgba(3,7,17,0.75), rgba(3,7,17,0.48)),
        url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;
    transform: scale(1.06);
}

.hero-overlay{
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 30%, rgba(15,95,255,0.20), transparent 25%),
        radial-gradient(circle at 80% 60%, rgba(15,95,255,0.16), transparent 25%);
}

.hero-inner{
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 34px;
    align-items: center;
    padding: 100px 0 70px;
}

.hero-content{
    color: var(--white);
    animation: fadeUp 1s ease;
}

.hero-badge{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 12px 18px;
    border-radius: 999px;
    margin-bottom: 22px;
    font-size: 14px;
    font-weight: 700;
    backdrop-filter: blur(10px);
}

.hero h1{
    font-size: clamp(38px, 6vw, 76px);
    line-height: 1.05;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.hero h1 span{
    color: #7eb1ff;
}

.hero p{
    max-width: 680px;
    color: rgba(255,255,255,0.80);
    font-size: 18px;
    margin-bottom: 30px;
}

.hero-buttons{
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 34px;
}

.hero-features{
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.hero-feature-box{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255,255,255,0.07);
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    font-size: 14px;
    font-weight: 700;
}

.hero-feature-box i{
    color: #86b3ff;
}

.hero-side-card{
    position: relative;
    animation: fadeUp 1.2s ease;
}

.side-card-glow{
    position: absolute;
    inset: -18px;
    background: radial-gradient(circle, rgba(15,95,255,0.35), transparent 60%);
    filter: blur(24px);
    z-index: 0;
}

.side-card{
    position: relative;
    z-index: 1;
    background: rgba(10,18,34,0.72);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 28px;
    padding: 28px;
    color: var(--white);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
}

.side-card-top .mini-title{
    display: inline-block;
    color: #8cb8ff;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    font-weight: 700;
}

.side-card-top h3{
    font-size: 28px;
    margin-bottom: 24px;
}

.side-service-list{
    display: grid;
    gap: 14px;
    margin-bottom: 26px;
}

.side-service-item{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.06);
}

.side-service-item i{
    color: #87b3ff;
}

.side-contact-box{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(15,95,255,0.18), rgba(255,255,255,0.06));
    border: 1px solid rgba(255,255,255,0.08);
}

.side-contact-box i{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
}

/* STATS ALANI */
.stats{
    margin-top: -50px;
    position: relative;
    z-index: 3;
}

.stats-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.stat-card{
    background: var(--white);
    padding: 26px;
    border-radius: 24px;
    box-shadow: 0 18px 50px rgba(18,35,65,0.10);
    border: 1px solid rgba(17,24,39,0.05);
}

.stat-card h3{
    font-size: 34px;
    color: var(--primary);
    margin-bottom: 8px;
}

.stat-card p{
    color: var(--text);
    font-weight: 600;
}

/* HAKKIMIZDA ÖN İZLEME */
.about-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.about-images{
    position: relative;
    min-height: 580px;
}

.about-image{
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.about-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-image.large{
    width: 78%;
    height: 520px;
}

.about-image.small{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 52%;
    height: 290px;
    border: 8px solid #f5f8ff;
}

.about-points{
    margin: 28px 0 32px;
    display: grid;
    gap: 18px;
}

.about-point{
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px;
    background: var(--white);
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(18,35,65,0.08);
}

.about-point i{
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15,95,255,0.08);
    color: var(--primary);
    font-size: 20px;
}

.about-point h4{
    margin-bottom: 6px;
    font-size: 18px;
}

/* KOYU BÖLÜM */
.dark-section{
    background:
        linear-gradient(135deg, #051120, #081731 55%, #0b2348);
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.dark-section::before{
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(15,95,255,0.22), transparent 65%);
    top: -80px;
    right: -80px;
}

.dark-section .section-head h2,
.dark-section .section-head p{
    color: var(--white);
}

.dark-section .section-head p{
    opacity: .82;
}

/* HİZMETLER */
.services-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    position: relative;
    z-index: 1;
}

.service-card{
    position: relative;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;
    padding: 28px;
    backdrop-filter: blur(14px);
    transition: var(--transition);
}

.service-card:hover{
    transform: translateY(-8px);
    border-color: rgba(123,177,255,0.35);
}

.service-card.featured{
    background: linear-gradient(180deg, rgba(15,95,255,0.18), rgba(255,255,255,0.05));
}

.service-card.wide{
    grid-column: span 2;
}

.service-icon{
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15,95,255,0.16);
    color: #8db8ff;
    font-size: 24px;
    margin-bottom: 18px;
}

.service-card h3{
    font-size: 24px;
    margin-bottom: 14px;
}

.service-card p{
    color: rgba(255,255,255,0.78);
}

.service-label{
    display: inline-block;
    margin-top: 18px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.09);
    color: #9ec1ff;
    font-weight: 700;
    font-size: 13px;
}

/* NEDEN BİZ ALANI */
.why-us{
    position: relative;
    background:
        linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
    overflow: hidden;
}

.why-wrapper{
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

/* ARKA PLAN ŞEKİLLERİ */
.why-bg-shape{
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(70px);
    opacity: .6;
}

.why-bg-shape-1{
    width: 260px;
    height: 260px;
    background: rgba(15,95,255,0.12);
    top: 60px;
    left: -80px;
}

.why-bg-shape-2{
    width: 320px;
    height: 320px;
    background: rgba(15,95,255,0.08);
    bottom: 40px;
    right: -120px;
}

/* SOL İÇERİK */
.why-content h2{
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1.08;
    margin-bottom: 20px;
    color: var(--black);
}

.why-desc{
    font-size: 16px;
    line-height: 1.8;
    color: var(--text);
    max-width: 620px;
    margin-bottom: 28px;
}

/* WHY LIST */
.modern-why-list{
    display: grid;
    gap: 16px;
}

.modern-why-list .why-item{
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 18px;
    border-radius: 22px;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(15,95,255,0.08);
    box-shadow: 0 14px 35px rgba(18,35,65,0.07);
    backdrop-filter: blur(10px);
    transition: all .35s ease;
    opacity: 0;
    transform: translateY(30px);
}

.modern-why-list .why-item.active{
    opacity: 1;
    transform: translateY(0);
}

.modern-why-list .why-item:hover{
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(18,35,65,0.10);
    border-color: rgba(15,95,255,0.18);
}

.why-item-icon{
    width: 54px;
    height: 54px;
    min-width: 54px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(15,95,255,0.10), rgba(15,95,255,0.18));
    color: var(--primary);
    font-size: 18px;
}

.why-item-text h4{
    font-size: 18px;
    color: var(--black);
    margin-bottom: 6px;
}

.why-item-text p{
    color: var(--text);
    line-height: 1.6;
    font-size: 15px;
}

/* SAĞ GÖRSEL ALAN */
.why-visual{
    position: relative;
}

.why-visual-frame{
    position: relative;
    min-height: 620px;
    border-radius: 34px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.85), rgba(225,236,255,0.82));
    border: 1px solid rgba(15,95,255,0.08);
    box-shadow: 0 30px 70px rgba(18,35,65,0.10);
    overflow: hidden;
}

.why-visual-frame::before{
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(15,95,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,95,255,0.05) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,1), rgba(0,0,0,.35));
    pointer-events: none;
}

.why-floating-card{
    position: absolute;
    width: 290px;
    padding: 24px;
    border-radius: 26px;
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(15,95,255,0.10);
    box-shadow: 0 18px 45px rgba(18,35,65,0.10);
    backdrop-filter: blur(12px);
    transition: transform .25s ease, box-shadow .35s ease;
    will-change: transform;
}

.why-floating-card:hover{
    box-shadow: 0 26px 55px rgba(18,35,65,0.15);
}

/* KART POZİSYONLARI */
.why-floating-card:nth-child(1){
    top: 50px;
    left: 40px;
    animation: floatingOne 5s ease-in-out infinite;
}

.why-floating-card:nth-child(2){
    top: 150px;
    right: 35px;
    animation: floatingTwo 6s ease-in-out infinite;
}

.why-floating-card:nth-child(3){
    bottom: 70px;
    left: 80px;
    animation: floatingThree 5.5s ease-in-out infinite;
}

.why-card-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.why-card-top i{
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), #76afff);
    color: #fff;
    font-size: 18px;
    box-shadow: 0 14px 30px rgba(15,95,255,0.18);
}

.why-card-label{
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(15,95,255,0.08);
    color: var(--primary-dark);
    font-size: 13px;
    font-weight: 700;
}

.why-floating-card h3{
    font-size: 24px;
    color: var(--black);
    margin-bottom: 10px;
}

.why-floating-card p{
    color: var(--text);
    line-height: 1.7;
    font-size: 15px;
}

/* ORTA BADGE */
.why-center-badge{
    position: absolute;
    right: 55px;
    bottom: 70px;
    width: 165px;
    height: 165px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0f5fff, #7eb1ff);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 24px 50px rgba(15,95,255,0.20);
    animation: pulseBadge 3.5s ease-in-out infinite;
}

.why-center-badge-inner{
    width: 125px;
    height: 125px;
    border-radius: 50%;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    color: #fff;
    backdrop-filter: blur(10px);
}

.why-center-badge-inner strong{
    font-size: 34px;
    line-height: 1;
    margin-bottom: 8px;
}

.why-center-badge-inner span{
    font-size: 12px;
    line-height: 1.4;
    max-width: 90px;
}

/* REVEAL */
.reveal-left,
.reveal-right{
    opacity: 0;
    transition: all .9s ease;
}

.reveal-left{
    transform: translateX(-40px);
}

.reveal-right{
    transform: translateX(40px);
}

.reveal-left.active,
.reveal-right.active{
    opacity: 1;
    transform: translateX(0);
}

/* ANİMASYONLAR */
@keyframes floatingOne{
    0%,100%{ transform: translateY(0px); }
    50%{ transform: translateY(-12px); }
}

@keyframes floatingTwo{
    0%,100%{ transform: translateY(0px); }
    50%{ transform: translateY(14px); }
}

@keyframes floatingThree{
    0%,100%{ transform: translateY(0px); }
    50%{ transform: translateY(-10px); }
}

@keyframes pulseBadge{
    0%,100%{
        transform: scale(1);
        box-shadow: 0 24px 50px rgba(15,95,255,0.20);
    }
    50%{
        transform: scale(1.04);
        box-shadow: 0 30px 60px rgba(15,95,255,0.28);
    }
}

/* RESPONSIVE */
@media (max-width: 1100px){
    .why-wrapper{
        grid-template-columns: 1fr;
    }

    .why-visual-frame{
        min-height: 560px;
    }
}

@media (max-width: 768px){
    .why-visual-frame{
        min-height: auto;
        padding: 24px;
        display: grid;
        gap: 18px;
    }

    .why-floating-card{
        position: relative;
        width: 100%;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        animation: none !important;
    }

    .why-center-badge{
        position: relative;
        right: auto;
        bottom: auto;
        margin: 8px auto 0;
        width: 140px;
        height: 140px;
    }

    .why-center-badge-inner{
        width: 108px;
        height: 108px;
    }
}

/* PROJELER ALANI */
.projects-preview{
    position: relative;
    background:
        linear-gradient(180deg, #f9fbff 0%, #eef4ff 100%);
    overflow: hidden;
}

.projects-bg-circle{
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.projects-bg-circle-1{
    width: 320px;
    height: 320px;
    top: 40px;
    left: -120px;
    background: rgba(15,95,255,0.10);
}

.projects-bg-circle-2{
    width: 360px;
    height: 360px;
    right: -120px;
    bottom: 80px;
    background: rgba(15,95,255,0.08);
}

/* PROJELER BAŞLIK */
.projects-head{
    position: relative;
    z-index: 2;
    margin-bottom: 40px;
}

.projects-head-row{
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 26px;
    align-items: end;
}

.projects-head-text h2{
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1.08;
    color: var(--black);
    margin-bottom: 16px;
    max-width: 820px;
}

.projects-head-text p{
    color: var(--text);
    font-size: 16px;
    line-height: 1.8;
    max-width: 760px;
}

.projects-mini-panel{
    padding: 24px;
    border-radius: 26px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(15,95,255,0.10);
    box-shadow: 0 20px 45px rgba(18,35,65,0.08);
    backdrop-filter: blur(12px);
}

.projects-mini-label{
    display: inline-block;
    margin-bottom: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(15,95,255,0.08);
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.projects-mini-panel strong{
    display: block;
    color: var(--black);
    font-size: 22px;
    line-height: 1.3;
    margin-bottom: 10px;
}

.projects-mini-panel p{
    color: var(--text);
    line-height: 1.7;
}

/* PROJE SAHNESİ */
.projects-stage{
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 24px;
    align-items: stretch;
}

.projects-side{
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 24px;
}

/* KART GENEL */
.project-card{
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    min-height: 320px;
    background: #0a1221;
    box-shadow: 0 28px 60px rgba(18,35,65,0.14);
    transform-style: preserve-3d;
    transition: transform .35s ease, box-shadow .35s ease;
    isolation: isolate;
}

.project-card:hover{
    box-shadow: 0 34px 70px rgba(18,35,65,0.20);
}

.project-card-large{
    min-height: 720px;
}

.project-card-medium{
    min-height: 348px;
}

.project-card-dark .project-content{
    background: linear-gradient(to top, rgba(3,7,17,0.88), rgba(3,7,17,0.16));
}

/* GÖRSEL */
.project-image-wrap{
    position: absolute;
    inset: 0;
}

.project-image-wrap img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .85s ease;
}

.project-card:hover .project-image-wrap img{
    transform: scale(1.08);
}

/* GRID OVERLAY */
.project-overlay-grid{
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 34px 34px;
    opacity: .25;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,1));
    pointer-events: none;
    z-index: 1;
}

/* PARLAYAN EFEKT */
.project-shine{
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.18), transparent 30%);
    opacity: 0;
    transition: opacity .25s ease;
    mix-blend-mode: screen;
}

.project-card:hover .project-shine{
    opacity: 1;
}

/* İÇERİK */
.project-content{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    padding: 28px;
    background: linear-gradient(to top, rgba(3,7,17,0.82), rgba(3,7,17,0.08));
    color: #fff;
    transition: transform .35s ease;
}

.project-card:hover .project-content{
    transform: translateY(-8px);
}

.project-top-line{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.project-badge{
    display: inline-flex;
    align-items: center;
    padding: 9px 15px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.14);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    backdrop-filter: blur(10px);
}

.project-number{
    font-size: 18px;
    font-weight: 800;
    color: #8fb8ff;
    letter-spacing: 1px;
}

.project-content h3{
    font-size: clamp(24px, 3vw, 38px);
    line-height: 1.15;
    margin-bottom: 12px;
}

.project-card-medium .project-content h3{
    font-size: 28px;
}

.project-content p{
    color: rgba(255,255,255,0.82);
    line-height: 1.7;
    max-width: 90%;
}

.project-meta{
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.project-meta-item{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.10);
    font-size: 14px;
    font-weight: 600;
}

.project-meta-item i{
    color: #90baff;
}

/* TICKER */
.projects-ticker{
    position: relative;
    z-index: 2;
    margin-top: 28px;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(135deg, #0b1530, #0f5fff);
    box-shadow: 0 20px 45px rgba(15,95,255,0.18);
    padding: 16px 0;
}

.projects-ticker-track{
    display: flex;
    align-items: center;
    gap: 30px;
    width: max-content;
    animation: projectsTicker 28s linear infinite;
}

.projects-ticker-track span{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    letter-spacing: .2px;
}

.projects-ticker-track i{
    font-size: 7px;
    color: #b7d0ff;
}

@keyframes projectsTicker{
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-50%);
    }
}

/* REVEAL */
.reveal-up,
.reveal-left,
.reveal-right{
    opacity: 0;
    transition: all .9s ease;
}

.reveal-up{
    transform: translateY(40px);
}

.reveal-left{
    transform: translateX(-40px);
}

.reveal-right{
    transform: translateX(40px);
}

.reveal-up.active,
.reveal-left.active,
.reveal-right.active{
    opacity: 1;
    transform: translate(0,0);
}

/* RESPONSIVE */
@media (max-width: 1100px){
    .projects-head-row,
    .projects-stage{
        grid-template-columns: 1fr;
    }

    .projects-side{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: unset;
    }

    .project-card-large{
        min-height: 560px;
    }

    .project-card-medium{
        min-height: 380px;
    }
}

@media (max-width: 768px){
    .projects-side{
        grid-template-columns: 1fr;
    }

    .project-card-large,
    .project-card-medium{
        min-height: 420px;
    }

    .project-content{
        padding: 22px;
    }

    .project-content h3{
        font-size: 26px;
    }

    .project-card-medium .project-content h3{
        font-size: 24px;
    }

    .project-content p{
        max-width: 100%;
    }

    .projects-mini-panel{
        padding: 20px;
    }
}

/* CTA ALANI */
.cta-section{
    padding: 0 0 100px;
}

.cta-box{
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    background:
        linear-gradient(135deg, #0b1530, #0f5fff 55%, #63a0ff);
    color: var(--white);
    padding: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-shadow: 0 25px 60px rgba(15,95,255,0.25);
}

.cta-box::before{
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(255,255,255,0.20), transparent 65%);
    top: -60px;
    right: -60px;
}

.cta-content,
.cta-actions{
    position: relative;
    z-index: 2;
}

.cta-content h2{
    font-size: clamp(28px, 4vw, 46px);
    line-height: 1.15;
    margin-bottom: 12px;
}

.cta-content p{
    max-width: 760px;
    color: rgba(255,255,255,0.88);
}

.cta-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* SIRADIŞI FOOTER ALANI */
.footer-new{
    position: relative;
    background:
        linear-gradient(180deg, #02050c 0%, #06101f 35%, #081a35 100%);
    color: rgba(255,255,255,0.82);
    overflow: hidden;
    margin-top: 40px;
}

/* FOOTER CTA BANDI */
.footer-cta-wrap{
    position: relative;
    z-index: 2;
    padding-top: 40px;
}

.footer-cta-box{
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    background:
        linear-gradient(135deg, rgba(15,95,255,0.24), rgba(255,255,255,0.06));
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 25px 60px rgba(0,0,0,0.25);
    backdrop-filter: blur(14px);
}

.footer-cta-box::before{
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    right: -100px;
    top: -100px;
    background: radial-gradient(circle, rgba(125,178,255,0.28), transparent 65%);
    pointer-events: none;
}

.footer-mini-title{
    display: inline-block;
    margin-bottom: 12px;
    color: #9cc1ff;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
}

.footer-cta-content h2{
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.1;
    color: #fff;
    margin-bottom: 14px;
    max-width: 760px;
}

.footer-cta-content p{
    max-width: 760px;
    color: rgba(255,255,255,0.78);
}

.footer-cta-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    position: relative;
    z-index: 2;
}

/* FOOTER ANA GÖVDE */
.footer-main{
    position: relative;
    padding: 90px 0 40px;
}

.footer-blur{
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.footer-blur-1{
    width: 280px;
    height: 280px;
    background: rgba(15,95,255,0.22);
    top: 100px;
    left: -60px;
}

.footer-blur-2{
    width: 300px;
    height: 300px;
    background: rgba(66,133,255,0.16);
    right: -80px;
    bottom: 40px;
}

/* FOOTER DEV BAŞLIK */
.footer-showcase{
    position: relative;
    margin-bottom: 50px;
    padding-bottom: 26px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-showcase h2{
    font-size: clamp(52px, 11vw, 150px);
    line-height: 0.9;
    color: rgba(255,255,255,0.06);
    letter-spacing: 6px;
    font-weight: 900;
    user-select: none;
}

.footer-showcase span{
    display: block;
    margin-top: 12px;
    color: #8fb8ff;
    letter-spacing: 5px;
    font-size: 13px;
    font-weight: 700;
}

/* FOOTER GRID */
.footer-grid-new{
    display: grid;
    grid-template-columns: 1.2fr .7fr .8fr 1fr;
    gap: 30px;
    position: relative;
    z-index: 2;
}

/* FOOTER SOL */
.footer-about-col p{
    margin-top: 22px;
    color: rgba(255,255,255,0.72);
    max-width: 420px;
}

.footer-note-box{
    margin-top: 26px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px;
    border-radius: 20px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.06);
    max-width: 420px;
}

.footer-note-box i{
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f5fff, #4a95ff);
    color: #fff;
    font-size: 20px;
}

.footer-note-box strong{
    display: block;
    color: #fff;
    margin-bottom: 6px;
    font-size: 16px;
}

.footer-note-box span{
    color: rgba(255,255,255,0.72);
    font-size: 14px;
}

/* FOOTER LINK KOLONLARI */
.footer-links-col h4,
.footer-contact-col h4{
    color: #fff;
    margin-bottom: 20px;
    font-size: 18px;
    position: relative;
    padding-left: 14px;
}

.footer-links-col h4::before,
.footer-contact-col h4::before{
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 4px;
    height: 18px;
    border-radius: 10px;
    background: linear-gradient(180deg, #0f5fff, #7ab2ff);
}

.footer-links-col ul{
    display: grid;
    gap: 14px;
}

.footer-links-col ul li a{
    color: rgba(255,255,255,0.72);
    font-weight: 500;
    transition: all .3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.footer-links-col ul li a::before{
    content: "";
    width: 0;
    height: 2px;
    background: #69a3ff;
    transition: all .3s ease;
}

.footer-links-col ul li a:hover{
    color: #fff;
    transform: translateX(6px);
}

.footer-links-col ul li a:hover::before{
    width: 18px;
}

/* FOOTER İLETİŞİM */
.footer-contact-col{
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-contact-card{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    border-radius: 20px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.06);
    transition: all .35s ease;
}

.footer-contact-card:hover{
    transform: translateY(-4px);
    background: rgba(255,255,255,0.07);
}

.footer-contact-card i{
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f5fff, #4a95ff);
    color: #fff;
    font-size: 18px;
}

.footer-contact-card span{
    display: block;
    color: #9ec1ff;
    font-size: 13px;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

.footer-contact-card a,
.footer-contact-card p{
    color: #fff;
    line-height: 1.5;
}

/* FOOTER ALT BAR */
.footer-bottom-new{
    position: relative;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 22px 0;
    background: rgba(0,0,0,0.18);
    z-index: 2;
}

.footer-bottom-new-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.footer-bottom-new-inner p{
    color: rgba(255,255,255,0.66);
    font-size: 14px;
}

.footer-bottom-line{
    flex: 1;
    min-width: 120px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(110,168,255,0.6), transparent);
}

/* RESPONSIVE FOOTER */
@media (max-width: 1100px){
    .footer-grid-new{
        grid-template-columns: 1fr 1fr;
    }

    .footer-cta-box{
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 768px){
    .footer-main{
        padding: 70px 0 30px;
    }

    .footer-grid-new{
        grid-template-columns: 1fr;
    }

    .footer-showcase h2{
        line-height: 1;
        letter-spacing: 2px;
    }

    .footer-bottom-new-inner{
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-bottom-line{
        width: 100%;
    }

    .footer-cta-box{
        padding: 28px 22px;
        border-radius: 24px;
    }
}

/* ANİMASYON */
@keyframes fadeUp{
    from{
        opacity: 0;
        transform: translateY(28px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

/* RESPONSIVE */
@media (max-width: 1100px){
    .hero-inner,
    .about-grid,
    .why-grid{
        grid-template-columns: 1fr;
    }

    .hero-side-card{
        max-width: 650px;
    }

    .stats-grid,
    .projects-grid,
    .footer-grid{
        grid-template-columns: repeat(2, 1fr);
    }

    .services-grid{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 860px){
    .topbar-inner{
        justify-content: center;
    }

    .navbar{
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(3,10,21,0.98);
        border-bottom: 1px solid rgba(255,255,255,0.06);
        display: none;
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 16px 24px;
        gap: 16px;
    }

    .navbar.open{
        display: flex;
    }

    .mobile-menu-btn{
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .header-actions .btn{
        display: none;
    }

    .stats-grid,
    .services-grid,
    .projects-grid,
    .why-cards,
    .footer-grid{
        grid-template-columns: 1fr;
    }

    .service-card.wide{
        grid-column: span 1;
    }

    .about-images{
        min-height: auto;
        display: grid;
        gap: 18px;
    }

    .about-image.large,
    .about-image.small{
        position: static;
        width: 100%;
        height: 320px;
    }

    .about-image.small{
        border: none;
    }

    .cta-box{
        flex-direction: column;
        align-items: flex-start;
        padding: 34px 24px;
    }

    .hero{
        min-height: auto;
    }

    .hero-inner{
        padding: 160px 0 90px;
    }

    .hero-feature-box{
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 560px){
    .topbar{
        display: none;
    }

    .header-inner{
        min-height: 78px;
    }

    .logo-mark{
        width: 46px;
        height: 46px;
        font-size: 17px;
    }

    .hero h1{
        font-size: 36px;
    }

    .hero p{
        font-size: 16px;
    }

    .section-space{
        padding: 80px 0;
    }

    .stat-card,
    .service-card,
    .why-mini-card{
        padding: 22px;
    }

    .project-card{
        min-height: 340px;
    }

    .floating-btn{
        width: 52px;
        height: 52px;
        border-radius: 16px;
        font-size: 20px;
    }

    .preloader-logo .logo-a{
        font-size: 34px;
        letter-spacing: 6px;
    }
}

/* HAKKIMIZDA HERO V2 */
.about-hero-v2{
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: #06101f;
    display: flex;
    align-items: center;
}

.about-hero-v2-bg{
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(3,7,17,0.90), rgba(3,7,17,0.76), rgba(3,7,17,0.50)),
        url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=1800&q=80') center/cover no-repeat;
    transform: scale(1.06);
}

.about-hero-v2-overlay{
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 22%, rgba(15,95,255,0.18), transparent 22%),
        radial-gradient(circle at 82% 65%, rgba(15,95,255,0.14), transparent 24%);
}

.about-hero-grid{
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: .22;
    pointer-events: none;
}

.about-hero-glow{
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.about-hero-glow-1{
    width: 320px;
    height: 320px;
    background: rgba(15,95,255,0.18);
    top: 100px;
    left: -100px;
}

.about-hero-glow-2{
    width: 340px;
    height: 340px;
    background: rgba(15,95,255,0.12);
    bottom: 40px;
    right: -120px;
}

.about-hero-v2-inner{
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 40px;
    align-items: center;
    padding: 120px 0 80px;
}

.about-hero-kicker{
    display: inline-block;
    margin-bottom: 16px;
    color: #94beff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.about-hero-v2-content h1{
    color: #fff;
    font-size: clamp(42px, 6vw, 82px);
    line-height: 1.03;
    letter-spacing: -1px;
    margin-bottom: 20px;
    max-width: 820px;
}

.about-hero-v2-content h1 span{
    color: #89b6ff;
}

.about-hero-v2-content p{
    color: rgba(255,255,255,0.82);
    font-size: 18px;
    line-height: 1.8;
    max-width: 720px;
    margin-bottom: 28px;
}

.about-hero-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 34px;
}

.about-hero-mini-stats{
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.about-hero-mini-stat{
    min-width: 180px;
    padding: 18px;
    border-radius: 20px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(12px);
}

.about-hero-mini-stat strong{
    display: block;
    color: #fff;
    font-size: 34px;
    line-height: 1;
    margin-bottom: 8px;
}

.about-hero-mini-stat strong::after{
    content: "%";
    font-size: .55em;
    margin-left: 2px;
}

.about-hero-mini-stat span{
    color: rgba(255,255,255,0.76);
    font-size: 14px;
    font-weight: 600;
}

/* HERO SAĞ GÖRSEL */
.about-hero-v2-visual{
    position: relative;
}

.about-visual-frame{
    position: relative;
    min-height: 620px;
    border-radius: 34px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(14px);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,0.22);
}

.about-visual-frame::before{
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 34px 34px;
    opacity: .28;
}

.about-floating-box{
    position: absolute;
    width: 280px;
    padding: 24px;
    border-radius: 26px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.14);
    color: #fff;
    box-shadow: 0 18px 40px rgba(0,0,0,0.14);
    backdrop-filter: blur(18px);
    transition: transform .3s ease;
}

.about-floating-box:nth-child(1){
    top: 48px;
    left: 34px;
    animation: aboutFloatOne 6s ease-in-out infinite;
}

.about-floating-box:nth-child(2){
    top: 170px;
    right: 32px;
    animation: aboutFloatTwo 6.5s ease-in-out infinite;
}

.about-floating-box:nth-child(3){
    bottom: 72px;
    left: 74px;
    animation: aboutFloatThree 5.5s ease-in-out infinite;
}

.floating-label{
    display: inline-block;
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    color: #dceaff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.about-floating-box h3{
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 10px;
}

.about-floating-box p{
    color: rgba(255,255,255,0.82);
    line-height: 1.7;
    font-size: 15px;
}

.about-center-core{
    position: absolute;
    right: 60px;
    bottom: 54px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0f5fff, #7ab2ff);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 28px 55px rgba(15,95,255,0.22);
    animation: corePulse 3.8s ease-in-out infinite;
}

.about-center-core-inner{
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    color: #fff;
    backdrop-filter: blur(10px);
}

.about-center-core-inner strong{
    font-size: 38px;
    line-height: 1;
    margin-bottom: 8px;
}

.about-center-core-inner span{
    font-size: 12px;
    line-height: 1.4;
    max-width: 90px;
}

/* STORY */
.about-story{
    background: linear-gradient(180deg, #f9fbff 0%, #eef4ff 100%);
}

.about-story-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.about-story-left h2{
    font-size: clamp(30px, 4vw, 54px);
    line-height: 1.08;
    color: var(--black);
    margin-bottom: 18px;
}

.about-story-left p{
    color: var(--text);
    line-height: 1.85;
    margin-bottom: 16px;
    max-width: 640px;
}

.about-story-signature{
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
}

.signature-line{
    width: 90px;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), #8cb8ff);
}

.about-story-signature strong{
    display: block;
    color: var(--black);
    margin-bottom: 4px;
}

.about-story-signature span{
    color: var(--text);
    font-size: 14px;
}

.about-story-right{
    position: relative;
    min-height: 620px;
}

.about-story-image.main{
    width: 78%;
    height: 560px;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(18,35,65,0.14);
}

.about-story-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-story-card{
    position: absolute;
    width: 290px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 20px;
    border-radius: 24px;
    background: rgba(255,255,255,0.90);
    border: 1px solid rgba(15,95,255,0.10);
    box-shadow: 0 22px 50px rgba(18,35,65,0.10);
    backdrop-filter: blur(12px);
}

.about-story-card:nth-child(2){
    right: 0;
    top: 70px;
}

.about-story-card:nth-child(3){
    right: 28px;
    bottom: 50px;
}

.about-story-card i{
    width: 54px;
    height: 54px;
    min-width: 54px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), #79b0ff);
    color: #fff;
    font-size: 20px;
}

.about-story-card h3{
    font-size: 20px;
    color: var(--black);
    margin-bottom: 6px;
}

.about-story-card p{
    color: var(--text);
    line-height: 1.6;
    font-size: 14px;
}

/* MARQUEE */
.about-marquee{
    overflow: hidden;
    background: linear-gradient(135deg, #0b1530, #0f5fff);
    padding: 16px 0;
    box-shadow: 0 18px 45px rgba(15,95,255,0.16);
}

.about-marquee-track{
    display: flex;
    align-items: center;
    gap: 30px;
    width: max-content;
    animation: aboutMarquee 28s linear infinite;
}

.about-marquee-track span{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}

.about-marquee-track i{
    font-size: 7px;
    color: #bdd4ff;
}

@keyframes aboutMarquee{
    0%{ transform: translateX(0); }
    100%{ transform: translateX(-50%); }
}

/* PILLARS */
.about-pillars-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.pillar-card{
    padding: 32px 28px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(15,95,255,0.08);
    box-shadow: 0 24px 55px rgba(18,35,65,0.08);
    transition: all .35s ease;
}

.pillar-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 30px 65px rgba(18,35,65,0.12);
}

.pillar-icon{
    width: 68px;
    height: 68px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), #79b0ff);
    color: #fff;
    font-size: 24px;
    margin-bottom: 18px;
}

.pillar-top{
    display: inline-block;
    margin-bottom: 12px;
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.pillar-card h3{
    font-size: 28px;
    line-height: 1.25;
    color: var(--black);
    margin-bottom: 12px;
}

.pillar-card p{
    color: var(--text);
    line-height: 1.8;
}

/* PERFORMANCE */
.about-performance{
    background: linear-gradient(135deg, #07111f, #0b1730 55%, #10264e);
    color: #fff;
    overflow: hidden;
    position: relative;
}

.about-performance::before{
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    right: -100px;
    top: -120px;
    background: radial-gradient(circle, rgba(15,95,255,0.22), transparent 65%);
    filter: blur(20px);
}

.about-performance-wrap{
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;
    align-items: center;
}

.about-performance-left h2{
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1.08;
    margin-bottom: 16px;
}

.about-performance-left p{
    color: rgba(255,255,255,0.80);
    line-height: 1.8;
    margin-bottom: 28px;
    max-width: 680px;
}

.performance-progress-list{
    display: grid;
    gap: 18px;
}

.progress-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #fff;
    margin-bottom: 8px;
    font-weight: 700;
}

.progress-bar{
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    overflow: hidden;
}

.progress-bar span{
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0f5fff, #8bb7ff);
    transition: width 1.4s ease;
}

.about-performance-right{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.performance-stat-card{
    padding: 26px;
    border-radius: 26px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(14px);
    text-align: center;
}

.performance-stat-card strong{
    display: block;
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1;
    margin-bottom: 10px;
    color: #fff;
}

.performance-stat-card strong::after{
    content: "%";
    font-size: .55em;
    margin-left: 2px;
}

.performance-stat-card span{
    color: rgba(255,255,255,0.82);
    font-weight: 600;
    line-height: 1.5;
}

/* MODEL / TIMELINE */
.about-model{
    background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
}

.about-model-timeline{
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 24px;
}

.timeline-line{
    position: absolute;
    left: 8%;
    right: 8%;
    top: 26px;
    height: 2px;
    background: linear-gradient(90deg, rgba(15,95,255,0.20), rgba(15,95,255,0.55), rgba(15,95,255,0.20));
    z-index: 0;
}

.timeline-step{
    position: relative;
    z-index: 1;
    padding: 30px 24px;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 22px 50px rgba(18,35,65,0.08);
}

.timeline-dot{
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #7ab2ff);
    box-shadow: 0 18px 35px rgba(15,95,255,0.18);
    margin-bottom: 14px;
}

.timeline-no{
    display: inline-block;
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.timeline-step h3{
    font-size: 24px;
    color: var(--black);
    margin-bottom: 10px;
}

.timeline-step p{
    color: var(--text);
    line-height: 1.8;
}

/* VALUES V2 */
.about-values-v2{
    background: #f6f9ff;
}

.values-v2-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.value-v2-card{
    padding: 28px;
    border-radius: 26px;
    background: #fff;
    border: 1px solid rgba(15,95,255,0.07);
    box-shadow: 0 22px 50px rgba(18,35,65,0.08);
    transition: all .35s ease;
}

.value-v2-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 28px 60px rgba(18,35,65,0.12);
}

.value-v2-card i{
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15,95,255,0.10);
    color: var(--primary);
    font-size: 24px;
    margin-bottom: 18px;
}

.value-v2-card h3{
    font-size: 24px;
    color: var(--black);
    margin-bottom: 10px;
}

.value-v2-card p{
    color: var(--text);
    line-height: 1.7;
}

/* LAND FOCUS */
.about-land-focus{
    background: linear-gradient(180deg, #f8fbff 0%, #edf4ff 100%);
}

.land-focus-box{
    border-radius: 34px;
    overflow: hidden;
    background: linear-gradient(135deg, #07111f, #0f5fff 58%, #6ca6ff);
    padding: 42px;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 28px;
    align-items: center;
    color: #fff;
    box-shadow: 0 28px 65px rgba(15,95,255,0.22);
}

.land-focus-left h2{
    font-size: clamp(32px, 4vw, 56px);
    line-height: 1.05;
    margin-bottom: 16px;
}

.land-focus-left p{
    color: rgba(255,255,255,0.86);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 760px;
}

.land-focus-features{
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.land-feature{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-radius: 16px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.12);
    font-weight: 600;
}

.land-feature i{
    color: #dce9ff;
}

.land-focus-right{
    padding: 30px;
    border-radius: 28px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.16);
    backdrop-filter: blur(14px);
}

.land-focus-icon{
    width: 72px;
    height: 72px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.14);
    color: #fff;
    font-size: 28px;
    margin-bottom: 18px;
}

.land-focus-right h3{
    font-size: 30px;
    margin-bottom: 12px;
}

.land-focus-right p{
    color: rgba(255,255,255,0.84);
    line-height: 1.8;
    margin-bottom: 20px;
}

/* REVEAL */
.reveal-up,
.reveal-left,
.reveal-right{
    opacity: 0;
    transition: all .9s ease;
}

.reveal-up{ transform: translateY(40px); }
.reveal-left{ transform: translateX(-40px); }
.reveal-right{ transform: translateX(40px); }

.reveal-up.active,
.reveal-left.active,
.reveal-right.active{
    opacity: 1;
    transform: translate(0,0);
}

/* ABOUT ANIMS */
@keyframes aboutFloatOne{
    0%,100%{ transform: translateY(0px); }
    50%{ transform: translateY(-12px); }
}

@keyframes aboutFloatTwo{
    0%,100%{ transform: translateY(0px); }
    50%{ transform: translateY(14px); }
}

@keyframes aboutFloatThree{
    0%,100%{ transform: translateY(0px); }
    50%{ transform: translateY(-10px); }
}

@keyframes corePulse{
    0%,100%{
        transform: scale(1);
        box-shadow: 0 28px 55px rgba(15,95,255,0.22);
    }
    50%{
        transform: scale(1.04);
        box-shadow: 0 34px 66px rgba(15,95,255,0.30);
    }
}

/* RESPONSIVE */
@media (max-width: 1100px){
    .about-hero-v2-inner,
    .about-story-grid,
    .about-performance-wrap,
    .land-focus-box{
        grid-template-columns: 1fr;
    }

    .about-pillars-grid,
    .values-v2-grid{
        grid-template-columns: repeat(2, 1fr);
    }

    .about-model-timeline{
        grid-template-columns: repeat(2, 1fr);
    }

    .timeline-line{
        display: none;
    }
}

@media (max-width: 860px){
    .about-hero-v2{
        min-height: auto;
    }

    .about-hero-v2-inner{
        padding: 150px 0 90px;
    }

    .about-visual-frame{
        min-height: auto;
        padding: 24px;
        display: grid;
        gap: 18px;
    }

    .about-floating-box{
        position: relative;
        width: 100%;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        animation: none !important;
    }

    .about-center-core{
        position: relative;
        right: auto;
        bottom: auto;
        margin: 8px auto 0;
        width: 150px;
        height: 150px;
    }

    .about-center-core-inner{
        width: 114px;
        height: 114px;
    }

    .about-story-right{
        min-height: auto;
        display: grid;
        gap: 18px;
    }

    .about-story-image.main{
        width: 100%;
        height: 360px;
    }

    .about-story-card{
        position: relative;
        width: 100%;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
    }

    .about-performance-right,
    .about-model-timeline,
    .about-pillars-grid,
    .values-v2-grid{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px){
    .about-hero-v2-content h1{
        font-size: 38px;
    }

    .about-hero-v2-content p{
        font-size: 16px;
    }

    .about-hero-mini-stat{
        width: 100%;
    }

    .pillar-card,
    .value-v2-card,
    .timeline-step,
    .land-focus-right{
        padding: 24px;
    }

    .land-focus-box{
        padding: 28px 22px;
    }
}


/* HİZMETLER HERO V2 */
.services-hero-v2{
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #06101f;
}

.services-hero-bg{
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(3,7,17,0.92), rgba(3,7,17,0.76), rgba(3,7,17,0.45)),
        url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=1800&q=80') center/cover no-repeat;
    transform: scale(1.05);
}

.services-hero-overlay{
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 20%, rgba(15,95,255,0.18), transparent 24%),
        radial-gradient(circle at 82% 70%, rgba(15,95,255,0.14), transparent 24%);
}

.services-hero-grid{
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 38px 38px;
    opacity: .22;
}

.services-hero-glow{
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.services-hero-glow-1{
    width: 300px;
    height: 300px;
    top: 80px;
    left: -80px;
    background: rgba(15,95,255,0.18);
}

.services-hero-glow-2{
    width: 340px;
    height: 340px;
    right: -120px;
    bottom: 0;
    background: rgba(15,95,255,0.12);
}

.services-hero-inner{
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 34px;
    align-items: center;
    padding: 130px 0 90px;
}

.services-hero-kicker{
    display: inline-block;
    margin-bottom: 16px;
    color: #93beff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.services-hero-content h1{
    color: #fff;
    font-size: clamp(40px, 6vw, 82px);
    line-height: 1.03;
    letter-spacing: -1px;
    margin-bottom: 18px;
    max-width: 820px;
}

.services-hero-content h1 span{
    color: #88b6ff;
}

.services-hero-content p{
    color: rgba(255,255,255,0.82);
    font-size: 18px;
    line-height: 1.8;
    max-width: 700px;
    margin-bottom: 26px;
}

.services-hero-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 26px;
}

.services-breadcrumb{
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(10px);
}

.services-breadcrumb a{
    color: #9dc4ff;
}

.services-breadcrumb span{
    color: rgba(255,255,255,0.42);
}

.services-breadcrumb strong{
    color: #fff;
}

/* HERO GÖRSEL */
.services-hero-visual{
    position: relative;
    min-height: 620px;
}

.services-hero-image-main{
    position: absolute;
    right: 0;
    top: 20px;
    width: 82%;
    height: 540px;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 28px 60px rgba(0,0,0,0.28);
}

.services-hero-image-main img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services-floating-panel{
    position: absolute;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    width: 300px;
    padding: 20px;
    border-radius: 24px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.14);
    color: #fff;
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

.services-floating-panel i{
    width: 54px;
    height: 54px;
    min-width: 54px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), #7ab2ff);
    color: #fff;
    font-size: 20px;
}

.services-floating-panel strong{
    display: block;
    font-size: 20px;
    margin-bottom: 4px;
}

.services-floating-panel span{
    color: rgba(255,255,255,0.80);
    line-height: 1.6;
}

.services-floating-panel-1{
    left: 0;
    top: 100px;
    animation: servicesFloatOne 6s ease-in-out infinite;
}

.services-floating-panel-2{
    left: 70px;
    bottom: 20px;
    animation: servicesFloatTwo 6.5s ease-in-out infinite;
}

@keyframes servicesFloatOne{
    0%,100%{ transform: translateY(0px); }
    50%{ transform: translateY(-10px); }
}

@keyframes servicesFloatTwo{
    0%,100%{ transform: translateY(0px); }
    50%{ transform: translateY(10px); }
}

/* STRIP */
.services-strip{
    overflow: hidden;
    background: linear-gradient(135deg, #0b1530, #0f5fff);
    padding: 16px 0;
    box-shadow: 0 18px 45px rgba(15,95,255,0.18);
}

.services-strip-track{
    display: flex;
    align-items: center;
    gap: 30px;
    width: max-content;
    animation: servicesStripRun 28s linear infinite;
}

.services-strip-track span{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}

.services-strip-track i{
    font-size: 7px;
    color: #bdd4ff;
}

@keyframes servicesStripRun{
    0%{ transform: translateX(0); }
    100%{ transform: translateX(-50%); }
}

/* INTRO V2 */
.services-intro-v2{
    background: linear-gradient(180deg, #f9fbff 0%, #eef4ff 100%);
}

.services-intro-v2-grid{
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 30px;
    align-items: center;
}

.services-intro-v2-content h2{
    font-size: clamp(30px, 4vw, 50px);
    line-height: 1.08;
    color: var(--black);
    margin-bottom: 18px;
}

.services-intro-v2-content p{
    color: var(--text);
    line-height: 1.85;
    margin-bottom: 16px;
}

.services-intro-v2-visual{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.services-intro-stat-card{
    padding: 24px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(15,95,255,0.08);
    box-shadow: 0 22px 50px rgba(18,35,65,0.08);
    text-align: center;
}

.services-intro-stat-card strong{
    display: block;
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1;
    color: var(--primary);
    margin-bottom: 10px;
}

.services-intro-stat-card strong::after{
    content: "%";
    font-size: .55em;
    margin-left: 2px;
}

.services-intro-stat-card span{
    color: var(--dark);
    font-weight: 600;
    line-height: 1.5;
}

/* SERVIS KART V2 */
.services-cards-v2{
    background: #f7faff;
}

.services-cards-v2-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.service-v2-card{
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    background: #fff;
    border: 1px solid rgba(15,95,255,0.08);
    box-shadow: 0 24px 55px rgba(18,35,65,0.08);
    transition: transform .35s ease, box-shadow .35s ease;
    transform-style: preserve-3d;
}

.service-v2-card:hover{
    box-shadow: 0 30px 65px rgba(18,35,65,0.14);
}

.service-v2-card.featured{
    background: linear-gradient(180deg, #ffffff, #edf4ff);
}

.service-v2-card.wide{
    grid-column: span 2;
}

.service-v2-image{
    height: 240px;
    overflow: hidden;
}

.service-v2-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s ease;
}

.service-v2-card:hover .service-v2-image img{
    transform: scale(1.08);
}

.service-v2-content{
    position: relative;
    padding: 28px 26px 30px;
    z-index: 2;
}

.service-v2-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.service-v2-icon{
    width: 66px;
    height: 66px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), #7ab2ff);
    color: #fff;
    font-size: 24px;
    box-shadow: 0 16px 34px rgba(15,95,255,0.18);
}

.service-v2-badge{
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(15,95,255,0.08);
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.service-v2-content h3{
    font-size: 30px;
    color: var(--black);
    margin-bottom: 12px;
}

.service-v2-content p{
    color: var(--text);
    line-height: 1.8;
    margin-bottom: 18px;
}

.service-v2-content ul{
    display: grid;
    gap: 12px;
}

.service-v2-content ul li{
    position: relative;
    padding-left: 24px;
    color: var(--dark);
    font-weight: 600;
}

.service-v2-content ul li::before{
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
}

.service-v2-shine{
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
    z-index: 1;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.22), transparent 30%);
}

.service-v2-card:hover .service-v2-shine{
    opacity: 1;
}

/* HIGHLIGHT */
.services-highlight-box{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: stretch;
    border-radius: 34px;
    overflow: hidden;
    background: linear-gradient(135deg, #07111f, #0f5fff 58%, #6fa8ff);
    box-shadow: 0 28px 65px rgba(15,95,255,0.20);
}

.services-highlight-image{
    min-height: 520px;
}

.services-highlight-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services-highlight-content{
    padding: 42px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.services-highlight-content h2{
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1.08;
    margin-bottom: 16px;
}

.services-highlight-content p{
    color: rgba(255,255,255,0.86);
    line-height: 1.85;
    margin-bottom: 24px;
}

.services-highlight-list{
    display: grid;
    gap: 14px;
}

.services-highlight-item{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.12);
    font-weight: 600;
}

.services-highlight-item i{
    color: #dce9ff;
}

/* WHY */
.services-why{
    background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
}

.services-why-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.services-why-card{
    padding: 28px 24px;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 22px 50px rgba(18,35,65,0.08);
    border: 1px solid rgba(15,95,255,0.08);
    transition: all .35s ease;
}

.services-why-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 28px 60px rgba(18,35,65,0.12);
}

.services-why-card i{
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15,95,255,0.10);
    color: var(--primary);
    font-size: 24px;
    margin-bottom: 18px;
}

.services-why-card h3{
    font-size: 24px;
    color: var(--black);
    margin-bottom: 10px;
}

.services-why-card p{
    color: var(--text);
    line-height: 1.8;
}

/* PROCESS V2 */
.services-process-v2-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.services-process-v2-item{
    padding: 28px 24px;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 22px 50px rgba(18,35,65,0.08);
    border: 1px solid rgba(15,95,255,0.08);
    transition: all .35s ease;
}

.services-process-v2-item:hover{
    transform: translateY(-8px);
}

.services-process-no{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #7ab2ff);
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 16px;
    box-shadow: 0 16px 32px rgba(15,95,255,0.18);
}

.services-process-v2-item h3{
    font-size: 24px;
    color: var(--black);
    margin-bottom: 10px;
}

.services-process-v2-item p{
    color: var(--text);
    line-height: 1.8;
}

/* RESPONSIVE */
@media (max-width: 1100px){
    .services-hero-inner,
    .services-intro-v2-grid,
    .services-highlight-box{
        grid-template-columns: 1fr;
    }

    .services-cards-v2-grid{
        grid-template-columns: repeat(2, 1fr);
    }

    .services-why-grid,
    .services-process-v2-grid{
        grid-template-columns: repeat(2, 1fr);
    }

    .services-hero-visual{
        min-height: 560px;
    }
}

@media (max-width: 860px){
    .services-hero-v2{
        min-height: auto;
    }

    .services-hero-inner{
        padding: 150px 0 90px;
    }

    .services-hero-visual{
        min-height: auto;
        display: grid;
        gap: 18px;
    }

    .services-hero-image-main{
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        height: 360px;
    }

    .services-floating-panel{
        position: relative;
        width: 100%;
        left: auto !important;
        bottom: auto !important;
        top: auto !important;
        animation: none !important;
    }
}

@media (max-width: 768px){
    .services-intro-v2-visual,
    .services-cards-v2-grid,
    .services-why-grid,
    .services-process-v2-grid{
        grid-template-columns: 1fr;
    }

    .service-v2-card.wide{
        grid-column: span 1;
    }

    .services-highlight-image{
        min-height: 320px;
    }

    .services-highlight-content{
        padding: 28px 22px;
    }

    .service-v2-content,
    .services-why-card,
    .services-process-v2-item{
        padding: 24px;
    }
}


/* GENEL RESET */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --primary:#0f5fff;
    --primary-dark:#0a43b8;
    --dark:#081120;
    --dark-2:#0d182a;
    --text:#5d6778;
    --white:#ffffff;
    --bg:#f5f8ff;
    --border:rgba(15,95,255,0.10);
    --shadow:0 24px 55px rgba(18,35,65,0.08);
    --radius:28px;
    --transition:all .35s ease;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:var(--bg);
    color:var(--dark);
    overflow-x:hidden;
}

body.modal-open{
    overflow:hidden;
}

a{
    text-decoration:none;
}

img{
    width:100%;
    display:block;
}

button{
    border:none;
    background:none;
    cursor:pointer;
}

ul{
    list-style:none;
}

.container{
    width:min(1240px, calc(100% - 32px));
    margin:0 auto;
}

.section-space{
    padding:100px 0;
}

/* PRELOADER ALANI */
#preloader{
    position:fixed;
    inset:0;
    background:linear-gradient(135deg, #030711, #081120 55%, #102448);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:99999;
    transition:opacity .7s ease, visibility .7s ease;
}

#preloader.hide{
    opacity:0;
    visibility:hidden;
}

.loader-wrap{
    text-align:center;
    color:#fff;
}

.loader-core{
    width:120px;
    height:120px;
    position:relative;
    margin:0 auto 22px;
    border:1px solid rgba(255,255,255,0.10);
    border-radius:50%;
    animation:spinLoader 6s linear infinite;
}

.loader-core span{
    position:absolute;
    width:16px;
    height:16px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--primary), #8abbff);
    box-shadow:0 0 16px rgba(15,95,255,0.7);
}

.loader-core span:nth-child(1){
    top:-8px;
    left:50%;
    transform:translateX(-50%);
}

.loader-core span:nth-child(2){
    left:-8px;
    top:55%;
}

.loader-core span:nth-child(3){
    right:-8px;
    top:30%;
}

.loader-wrap h3{
    font-size:22px;
    letter-spacing:2px;
    margin-bottom:8px;
}

.loader-wrap p{
    color:rgba(255,255,255,0.72);
    font-size:14px;
}

@keyframes spinLoader{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}

/* FLOATING BUTTON */
.floating-btn{
    position:fixed;
    width:56px;
    height:56px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:linear-gradient(135deg, var(--primary), #6ea8ff);
    box-shadow:0 14px 35px rgba(15,95,255,0.24);
    z-index:2000;
    transition:var(--transition);
}

.floating-btn:hover{
    transform:translateY(-5px);
}

.floating-whatsapp{
    left:18px;
    bottom:18px;
    font-size:22px;
}

.floating-top{
    right:18px;
    bottom:18px;
    font-size:20px;
    opacity:0;
    visibility:hidden;
}

.floating-top.show{
    opacity:1;
    visibility:visible;
}

/* HEADER */
.header{
    position:sticky;
    top:0;
    z-index:1500;
    background:rgba(4,9,18,0.92);
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(255,255,255,0.06);
}

.header.scrolled{
    background:rgba(3,7,16,0.97);
}

.header-inner{
    min-height:82px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.logo{
    display:flex;
    align-items:center;
    gap:12px;
    color:#fff;
}

.logo-box{
    width:50px;
    height:50px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, var(--primary), #7eb3ff);
    color:#fff;
    font-weight:800;
    font-size:18px;
    box-shadow:0 14px 32px rgba(15,95,255,0.24);
}

.logo-text{
    display:flex;
    flex-direction:column;
    line-height:1.1;
}

.logo-text strong{
    color:#fff;
    font-size:18px;
}

.logo-text small{
    color:#9dbfff;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:1px;
}

.navbar{
    display:flex;
    align-items:center;
    gap:26px;
}

.navbar a{
    color:rgba(255,255,255,0.82);
    font-weight:600;
    font-size:15px;
    transition:var(--transition);
    position:relative;
}

.navbar a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-7px;
    width:0;
    height:2px;
    background:var(--primary);
    transition:var(--transition);
}

.navbar a:hover,
.navbar a.active{
    color:#fff;
}

.navbar a:hover::after,
.navbar a.active::after{
    width:100%;
}

.header-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.mobile-toggle{
    display:none;
    width:48px;
    height:48px;
    border-radius:14px;
    background:rgba(255,255,255,0.08);
    color:#fff;
    font-size:18px;
}

/* TOPBAR */
.topbar{
    background:linear-gradient(90deg, #07111f, #0c1831 50%, #0f5fff);
    color:#fff;
}

.topbar-inner{
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:10px 0;
    flex-wrap:wrap;
}

.topbar-item{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    color:rgba(255,255,255,0.88);
}

.topbar-item i{
    color:#9fc3ff;
}

/* BUTTONS */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px 24px;
    border-radius:14px;
    font-weight:700;
    font-size:15px;
    transition:var(--transition);
}

.btn-primary{
    background:linear-gradient(135deg, var(--primary), #76adff);
    color:#fff;
    box-shadow:0 14px 30px rgba(15,95,255,0.22);
}

.btn-primary:hover{
    transform:translateY(-4px);
}

.btn-secondary{
    background:rgba(255,255,255,0.10);
    border:1px solid rgba(255,255,255,0.12);
    color:#fff;
    backdrop-filter:blur(10px);
}

.btn-secondary:hover{
    transform:translateY(-4px);
}

.btn-light{
    background:#fff;
    color:var(--dark);
}

.btn-dark{
    background:rgba(255,255,255,0.10);
    border:1px solid rgba(255,255,255,0.14);
    color:#fff;
}

.btn-outline{
    background:transparent;
    border:1px solid rgba(15,95,255,0.16);
    color:var(--dark);
}

/* BADGES */
.section-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 15px;
    border-radius:999px;
    background:rgba(15,95,255,0.08);
    color:var(--primary-dark);
    border:1px solid rgba(15,95,255,0.10);
    font-size:14px;
    font-weight:700;
    margin-bottom:18px;
}

.dark-badge{
    background:rgba(255,255,255,0.08);
    color:#dce9ff;
    border:1px solid rgba(255,255,255,0.12);
}

.light-badge{
    background:rgba(255,255,255,0.12);
    color:#fff;
    border:1px solid rgba(255,255,255,0.14);
}

.light-style{
    background:rgba(255,255,255,0.10);
    color:#fff;
    border:1px solid rgba(255,255,255,0.14);
}

/* BREADCRUMB */
.breadcrumb{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 18px;
    border-radius:16px;
    font-size:14px;
    font-weight:600;
}

.dark-breadcrumb{
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.12);
    color:#fff;
}

.dark-breadcrumb a{
    color:#9fc4ff;
}

.dark-breadcrumb span{
    color:rgba(255,255,255,0.45);
}

.dark-breadcrumb strong{
    color:#fff;
}

/* SECTION HEAD */
.section-head{
    margin-bottom:42px;
}

.section-head.center{
    text-align:center;
    max-width:820px;
    margin:0 auto 42px;
}

.section-head h2{
    font-size:clamp(30px, 4vw, 54px);
    line-height:1.08;
    color:var(--dark);
    margin-bottom:16px;
}

.section-head p{
    color:var(--text);
    line-height:1.85;
}

/* HERO */
.projects-hero{
    position:relative;
    min-height:52vh;
    display:flex;
    align-items:center;
    background:linear-gradient(135deg, #06101f 0%, #0b1730 58%, #102448 100%);
    overflow:hidden;
    padding:150px 0 80px;
}

.projects-hero-overlay{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 18% 22%, rgba(15,95,255,0.18), transparent 24%),
        radial-gradient(circle at 82% 70%, rgba(15,95,255,0.12), transparent 24%);
}

.projects-hero-grid{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size:38px 38px;
    opacity:.22;
}

.projects-hero-content{
    position:relative;
    z-index:2;
    max-width:780px;
}

.projects-hero-content h1{
    color:#fff;
    font-size:clamp(42px, 6vw, 82px);
    line-height:1;
    letter-spacing:-1px;
    margin-bottom:16px;
}

.projects-hero-content p{
    color:rgba(255,255,255,0.82);
    font-size:18px;
    line-height:1.8;
    margin-bottom:24px;
    max-width:700px;
}

/* INTRO */
.projects-intro{
    background:linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
}

.projects-intro-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:30px;
    align-items:center;
}

.projects-intro-left h2{
    font-size:clamp(30px, 4vw, 52px);
    line-height:1.08;
    color:var(--dark);
    margin-bottom:18px;
}

.projects-intro-left p{
    color:var(--text);
    line-height:1.85;
    margin-bottom:16px;
}

.projects-intro-points{
    display:grid;
    gap:14px;
    margin-top:24px;
}

.intro-point{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:0 16px 36px rgba(18,35,65,0.06);
    font-weight:600;
    color:var(--dark);
}

.intro-point i{
    color:var(--primary);
}

.projects-intro-right{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:18px;
}

.intro-stat-card{
    padding:26px 22px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:24px;
    box-shadow:var(--shadow);
    text-align:center;
}

.intro-stat-card strong{
    display:block;
    font-size:clamp(34px, 5vw, 58px);
    line-height:1;
    color:var(--primary);
    margin-bottom:10px;
}

.intro-stat-card strong::after{
    content:"%";
    font-size:.55em;
    margin-left:2px;
}

.intro-stat-card span{
    color:var(--dark);
    font-weight:600;
    line-height:1.5;
}

/* FILTER */
.project-filter-area{
    padding:10px 0 26px;
    background:#f7faff;
}

.project-filter-wrap{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:center;
}

.filter-btn{
    padding:13px 18px;
    border-radius:999px;
    border:1px solid var(--border);
    background:#fff;
    color:var(--dark);
    font-weight:700;
    transition:var(--transition);
}

.filter-btn.active,
.filter-btn:hover{
    background:linear-gradient(135deg, var(--primary), #76adff);
    color:#fff;
    border-color:transparent;
    box-shadow:0 12px 28px rgba(15,95,255,0.18);
}

/* FEATURED */
.featured-project-box{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    border-radius:34px;
    overflow:hidden;
    background:linear-gradient(135deg, #07111f, #0f5fff 58%, #6ba6ff);
    box-shadow:0 28px 65px rgba(15,95,255,0.20);
}

.featured-project-image{
    min-height:560px;
}

.featured-project-image img{
    height:100%;
    object-fit:cover;
}

.featured-project-content{
    padding:42px;
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.featured-project-content h2{
    font-size:clamp(30px, 4vw, 52px);
    line-height:1.08;
    margin-bottom:16px;
}

.featured-project-content p{
    color:rgba(255,255,255,0.86);
    line-height:1.85;
    margin-bottom:24px;
}

.featured-meta{
    display:grid;
    gap:14px;
    margin-bottom:24px;
}

.featured-meta-item{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:14px 16px;
    border-radius:16px;
    background:rgba(255,255,255,0.12);
    border:1px solid rgba(255,255,255,0.12);
}

.featured-meta-item i{
    width:46px;
    height:46px;
    min-width:46px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.14);
    color:#fff;
}

.featured-meta-item strong{
    display:block;
    margin-bottom:4px;
}

.featured-meta-item span{
    color:rgba(255,255,255,0.82);
}

.featured-progress-list{
    display:grid;
    gap:18px;
    margin-bottom:24px;
}

.progress-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#fff;
    font-weight:700;
    margin-bottom:8px;
}

.progress-bar{
    width:100%;
    height:10px;
    border-radius:999px;
    background:rgba(255,255,255,0.12);
    overflow:hidden;
}

.progress-bar span{
    display:block;
    width:0;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg, #0f5fff, #d4e4ff);
    transition:width 1.4s ease;
}

/* SHOWCASE */
.projects-showcase{
    background:linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
}

.projects-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
}

.project-card{
    position:relative;
    overflow:hidden;
    border-radius:30px;
    background:#fff;
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    transition:transform .35s ease, box-shadow .35s ease, opacity .35s ease;
    transform-style:preserve-3d;
}

.project-card.hide{
    opacity:0;
    transform:scale(.96);
    pointer-events:none;
    display:none;
}

.project-card:hover{
    box-shadow:0 30px 65px rgba(18,35,65,0.14);
}

.project-card.large{
    grid-column:span 2;
}

.project-card.wide{
    grid-column:span 2;
}

.project-card-image{
    height:260px;
    overflow:hidden;
}

.project-card.large .project-card-image{
    height:320px;
}

.project-card.wide .project-card-image{
    height:320px;
}

.project-card-image img{
    height:100%;
    object-fit:cover;
    transition:transform .8s ease;
}

.project-card:hover .project-card-image img{
    transform:scale(1.08);
}

.project-card-content{
    position:relative;
    z-index:2;
    padding:28px 26px 30px;
}

.project-card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:16px;
}

.project-badge{
    display:inline-flex;
    align-items:center;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(15,95,255,0.08);
    color:var(--primary-dark);
    font-size:12px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
}

.project-no{
    color:var(--primary);
    font-size:18px;
    font-weight:800;
}

.project-card-content h3{
    font-size:30px;
    color:var(--dark);
    margin-bottom:12px;
    line-height:1.2;
}

.project-card-content p{
    color:var(--text);
    line-height:1.8;
    margin-bottom:18px;
}

.project-tags{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:18px;
}

.project-tags span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border-radius:14px;
    background:#f3f7ff;
    color:var(--dark);
    font-weight:600;
    font-size:14px;
}

.project-tags i{
    color:var(--primary);
}

.project-open-btn{
    padding:13px 18px;
    border-radius:14px;
    background:linear-gradient(135deg, var(--primary), #76adff);
    color:#fff;
    font-weight:700;
    transition:var(--transition);
}

.project-open-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(15,95,255,0.18);
}

.card-shine{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:0;
    transition:opacity .25s ease;
    z-index:1;
    background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.24), transparent 30%);
}

.project-card:hover .card-shine{
    opacity:1;
}

/* FLOW */
.projects-flow{
    background:#f7faff;
}

.projects-flow-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:22px;
}

.projects-flow-item{
    padding:28px 24px;
    border-radius:26px;
    background:#fff;
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.projects-flow-item:hover{
    transform:translateY(-8px);
}

.projects-flow-item span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:64px;
    height:64px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--primary), #7ab2ff);
    color:#fff;
    font-size:20px;
    font-weight:800;
    margin-bottom:16px;
    box-shadow:0 16px 32px rgba(15,95,255,0.18);
}

.projects-flow-item h3{
    font-size:24px;
    color:var(--dark);
    margin-bottom:10px;
}

.projects-flow-item p{
    color:var(--text);
    line-height:1.8;
}

/* CTA */
.cta-section{
    padding:0 0 100px;
}

.cta-box{
    position:relative;
    overflow:hidden;
    border-radius:32px;
    padding:42px;
    background:linear-gradient(135deg, #07111f, #0f5fff 58%, #69a5ff);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    color:#fff;
    box-shadow:0 28px 65px rgba(15,95,255,0.20);
}

.cta-content h2{
    font-size:clamp(28px, 4vw, 46px);
    line-height:1.12;
    margin-bottom:12px;
}

.cta-content p{
    color:rgba(255,255,255,0.86);
    line-height:1.8;
    max-width:760px;
}

.cta-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

/* FOOTER */
.footer{
    background:#050c17;
    color:rgba(255,255,255,0.82);
    padding-top:70px;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.2fr .8fr .8fr;
    gap:28px;
    padding-bottom:34px;
}

.footer-col h4{
    color:#fff;
    margin-bottom:16px;
    font-size:18px;
}

.footer-col p,
.footer-col span,
.footer-col a{
    color:rgba(255,255,255,0.72);
    line-height:1.8;
}

.footer-col ul{
    display:grid;
    gap:10px;
}

.footer-logo-box{
    display:flex;
    gap:14px;
    align-items:flex-start;
    margin-bottom:18px;
}

.footer-logo-text{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,0.08);
    padding:18px 0;
    text-align:center;
    color:rgba(255,255,255,0.66);
    font-size:14px;
}

/* MODAL */
.project-modal{
    position:fixed;
    inset:0;
    z-index:99999;
    opacity:0;
    visibility:hidden;
    transition:all .3s ease;
}

.project-modal.active{
    opacity:1;
    visibility:visible;
}

.project-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(3,7,17,0.72);
    backdrop-filter:blur(10px);
}

.project-modal-dialog{
    position:relative;
    z-index:2;
    width:min(980px, calc(100% - 24px));
    margin:60px auto;
    background:#fff;
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,0.26);
    display:grid;
    grid-template-columns:1fr 1fr;
}

.project-modal-image{
    min-height:420px;
}

.project-modal-image img{
    height:100%;
    object-fit:cover;
}

.project-modal-content{
    padding:34px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.project-modal-category{
    display:inline-flex;
    align-items:center;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(15,95,255,0.08);
    color:var(--primary-dark);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:14px;
}

.project-modal-content h3{
    font-size:clamp(28px, 4vw, 42px);
    color:var(--dark);
    line-height:1.1;
    margin-bottom:14px;
}

.project-modal-content p{
    color:var(--text);
    line-height:1.85;
    margin-bottom:24px;
}

.project-modal-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.project-modal-close{
    position:absolute;
    top:16px;
    right:16px;
    z-index:4;
    width:46px;
    height:46px;
    border-radius:14px;
    background:rgba(255,255,255,0.18);
    color:#fff;
    font-size:20px;
    backdrop-filter:blur(8px);
}

/* REVEAL */
.reveal-up,
.reveal-left,
.reveal-right{
    opacity:0;
    transition:all .9s ease;
}

.reveal-up{
    transform:translateY(40px);
}

.reveal-left{
    transform:translateX(-40px);
}

.reveal-right{
    transform:translateX(40px);
}

.reveal-up.active,
.reveal-left.active,
.reveal-right.active{
    opacity:1;
    transform:translate(0,0);
}

/* RESPONSIVE */
@media (max-width:1100px){
    .projects-intro-grid,
    .featured-project-box{
        grid-template-columns:1fr;
    }

    .projects-grid{
        grid-template-columns:repeat(2, 1fr);
    }

    .projects-flow-grid,
    .footer-grid{
        grid-template-columns:repeat(2, 1fr);
    }

    .cta-box{
        flex-direction:column;
        align-items:flex-start;
    }
}

@media (max-width:860px){
    .navbar{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:rgba(3,7,16,0.98);
        display:none;
        flex-direction:column;
        align-items:flex-start;
        gap:16px;
        padding:20px 16px 24px;
        border-bottom:1px solid rgba(255,255,255,0.06);
    }

    .navbar.open{
        display:flex;
    }

    .mobile-toggle{
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .header-actions .btn{
        display:none;
    }

    .projects-intro-right,
    .projects-grid,
    .projects-flow-grid,
    .footer-grid{
        grid-template-columns:1fr;
    }

    .project-card.large,
    .project-card.wide{
        grid-column:span 1;
    }

    .project-modal-dialog{
        grid-template-columns:1fr;
    }

    .project-modal-image{
        min-height:280px;
    }
}

@media (max-width:768px){
    .topbar{
        display:none;
    }

    .projects-hero{
        min-height:auto;
        padding:130px 0 70px;
    }

    .projects-hero-content p{
        font-size:16px;
    }

    .featured-project-image{
        min-height:320px;
    }

    .featured-project-content,
    .project-card-content,
    .projects-flow-item,
    .project-modal-content,
    .intro-stat-card{
        padding:24px;
    }

    .cta-box{
        padding:30px 22px;
    }
}

/* CONTACT HERO */
.contact-hero{
    position:relative;
    min-height:50vh;
    display:flex;
    align-items:center;
    background:linear-gradient(135deg, #06101f 0%, #0b1730 58%, #102448 100%);
    overflow:hidden;
    padding:150px 0 80px;
}

.contact-hero-overlay{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 18% 22%, rgba(15,95,255,0.18), transparent 24%),
        radial-gradient(circle at 82% 70%, rgba(15,95,255,0.12), transparent 24%);
}

.contact-hero-grid{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size:38px 38px;
    opacity:.22;
}

.contact-hero-content{
    position:relative;
    z-index:2;
    max-width:760px;
}

.contact-hero-content h1{
    color:#fff;
    font-size:clamp(42px, 6vw, 82px);
    line-height:1;
    letter-spacing:-1px;
    margin-bottom:16px;
}

.contact-hero-content p{
    color:rgba(255,255,255,0.82);
    font-size:18px;
    line-height:1.8;
    max-width:700px;
    margin-bottom:24px;
}

/* QUICK CONTACT */
.contact-quick{
    background:linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
}

.contact-quick-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
}

.contact-quick-card{
    padding:28px 24px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:26px;
    box-shadow:var(--shadow);
    transition:var(--transition);
    position:relative;
}

.contact-quick-card:hover{
    transform:translateY(-8px);
    box-shadow:0 30px 65px rgba(18,35,65,0.12);
}

.contact-quick-icon{
    width:64px;
    height:64px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, var(--primary), #7ab2ff);
    color:#fff;
    font-size:24px;
    margin-bottom:18px;
    box-shadow:0 16px 32px rgba(15,95,255,0.18);
}

.contact-quick-card h3{
    font-size:24px;
    color:var(--dark);
    margin-bottom:10px;
}

.contact-quick-card p{
    color:var(--text);
    line-height:1.8;
    margin-bottom:14px;
}

.contact-quick-card a,
.contact-quick-card span{
    display:block;
    color:var(--dark);
    font-weight:700;
    line-height:1.7;
    margin-bottom:14px;
}

.mini-copy-btn{
    padding:10px 14px;
    border-radius:12px;
    background:#f3f7ff;
    color:var(--primary-dark);
    font-weight:700;
    transition:var(--transition);
}

.mini-copy-btn:hover{
    background:var(--primary);
    color:#fff;
}

/* MAIN CONTACT */
.contact-main{
    background:#f7faff;
}

.contact-main-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:28px;
    align-items:start;
}

.contact-form-wrap,
.contact-info-panel{
    background:#fff;
    border:1px solid var(--border);
    border-radius:30px;
    box-shadow:var(--shadow);
    padding:34px 30px;
}

.contact-form-wrap h2,
.contact-info-panel h2{
    font-size:clamp(30px, 4vw, 48px);
    line-height:1.08;
    color:var(--dark);
    margin-bottom:14px;
}

.contact-form-desc,
.contact-info-panel p{
    color:var(--text);
    line-height:1.85;
    margin-bottom:24px;
}

/* FORM */
.form-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
}

.form-group{
    position:relative;
}

.form-group.full{
    grid-column:span 2;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    border:none;
    outline:none;
    background:#f8fbff;
    border:1px solid rgba(15,95,255,0.08);
    border-radius:18px;
    padding:24px 18px 14px;
    font-size:15px;
    color:var(--dark);
    transition:var(--transition);
    resize:none;
}

.form-group select{
    appearance:none;
}

.form-group label{
    position:absolute;
    left:18px;
    top:18px;
    color:#7a8493;
    font-size:14px;
    font-weight:600;
    pointer-events:none;
    transition:var(--transition);
    background:transparent;
}

.form-group.focused label,
.form-group.filled label{
    top:8px;
    font-size:11px;
    color:var(--primary);
    letter-spacing:.5px;
    text-transform:uppercase;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:rgba(15,95,255,0.26);
    background:#fff;
    box-shadow:0 10px 30px rgba(15,95,255,0.08);
}

.form-group.invalid input,
.form-group.invalid select,
.form-group.invalid textarea{
    border-color:#e24a4a;
}

.form-line{
    display:none;
}

.form-bottom{
    margin-top:24px;
}

.submit-btn{
    position:relative;
    min-width:180px;
}

.btn-loader{
    width:18px;
    height:18px;
    border:2px solid rgba(255,255,255,0.4);
    border-top-color:#fff;
    border-radius:50%;
    display:none;
    animation:spinBtn .8s linear infinite;
}

.submit-btn.loading .btn-text{
    display:none;
}

.submit-btn.loading .btn-loader{
    display:inline-block;
}

@keyframes spinBtn{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}

.form-note{
    margin-top:14px;
    color:var(--text);
    line-height:1.7;
    font-size:14px;
}

.form-status{
    margin-top:16px;
    font-weight:700;
    font-size:14px;
}

.form-status.success{
    color:#138a42;
}

.form-status.error{
    color:#d63b3b;
}

/* INFO PANEL */
.contact-info-list{
    display:grid;
    gap:16px;
    margin-bottom:22px;
}

.contact-info-item{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:18px;
    border-radius:20px;
    background:#f8fbff;
    border:1px solid rgba(15,95,255,0.08);
}

.contact-info-item i{
    width:54px;
    height:54px;
    min-width:54px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, var(--primary), #7ab2ff);
    color:#fff;
    font-size:20px;
    box-shadow:0 14px 30px rgba(15,95,255,0.18);
}

.contact-info-item strong{
    display:block;
    color:var(--dark);
    margin-bottom:6px;
    font-size:18px;
}

.contact-info-item a,
.contact-info-item span{
    color:var(--text);
    line-height:1.7;
}

.contact-mini-note{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:20px;
    border-radius:22px;
    background:linear-gradient(135deg, #07111f, #0f5fff 65%, #6ea8ff);
    color:#fff;
}

.contact-mini-note i{
    width:54px;
    height:54px;
    min-width:54px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.14);
    color:#fff;
    font-size:20px;
}

.contact-mini-note strong{
    display:block;
    margin-bottom:6px;
    font-size:18px;
}

.contact-mini-note p{
    color:rgba(255,255,255,0.84);
    line-height:1.7;
    margin:0;
}

/* MAP SECTION */
.contact-map-section{
    background:linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
}

.contact-map-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    align-items:start;
}

.contact-map-wrap h2{
    font-size:clamp(30px, 4vw, 48px);
    line-height:1.08;
    color:var(--dark);
    margin-bottom:18px;
}

.contact-map-box{
    overflow:hidden;
    border-radius:28px;
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    background:#fff;
    min-height:460px;
}

.contact-map-box iframe{
    width:100%;
    height:460px;
    border:none;
}

.contact-side-notes{
    display:grid;
    gap:18px;
}

.contact-note-card{
    padding:26px 24px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:24px;
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.contact-note-card:hover{
    transform:translateY(-8px);
}

.contact-note-card i{
    width:62px;
    height:62px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(15,95,255,0.10);
    color:var(--primary);
    font-size:24px;
    margin-bottom:16px;
}

.contact-note-card h3{
    font-size:24px;
    color:var(--dark);
    margin-bottom:10px;
}

.contact-note-card p{
    color:var(--text);
    line-height:1.8;
}

/* RESPONSIVE */
@media (max-width:1100px){
    .contact-quick-grid,
    .contact-map-grid,
    .footer-grid{
        grid-template-columns:repeat(2, 1fr);
    }

    .contact-main-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width:860px){
    .contact-quick-grid,
    .contact-map-grid,
    .footer-grid,
    .form-grid{
        grid-template-columns:1fr;
    }

    .form-group.full{
        grid-column:span 1;
    }
}

@media (max-width:768px){
    .contact-hero{
        min-height:auto;
        padding:130px 0 70px;
    }

    .contact-hero-content p{
        font-size:16px;
    }

    .contact-form-wrap,
    .contact-info-panel,
    .contact-note-card{
        padding:24px;
    }

    .contact-map-box,
    .contact-map-box iframe{
        height:320px;
        min-height:320px;
    }
}