* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Poppins, sans-serif;
        }

        body {

            background: #f5f8fc;
            overflow-x: hidden;

        }

        header {

            width: 100%;
            padding: 20px 8%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            background: white;
            box-shadow: 0 2px 15px rgba(0, 0, 0, .05);
            z-index: 999;

        }

        .logo {

            display: flex;
            align-items: center;
            gap: 15px;

        }

        .logo img {

            width: 60px;

        }

        .logo h2 {

            color: #2563eb;

        }

        nav {

            display: flex;
            gap: 25px;

        }

        nav a {

            text-decoration: none;
            color: #333;
            font-weight: 500;

        }

        .btn {

            padding: 14px 26px;
            background: #2563eb;
            color: white;
            border-radius: 10px;
            text-decoration: none;
            font-weight: 600;
            transition: .3s;

        }

        .btn:hover {

            background: #1d4ed8;

        }

        .hero {

            padding: 150px 8% 80px;

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 50px;

        }

        .hero-left {

            flex: 1;

        }

        .hero-left h1 {

            font-size: 58px;

            color: #1e293b;

            line-height: 1.2;

        }

        .hero-left h1 span {

            color: #2563eb;

        }

        .hero-left p {

            margin: 30px 0;

            font-size: 20px;

            color: #555;

            line-height: 1.8;

        }

        .hero-right {

            flex: 1;
            text-align: center;

        }

        .hero-right img {

            width: 90%;
            max-width: 600px;

            animation: float 3s infinite ease-in-out;

        }

        @keyframes float {

            0% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-20px);
            }

            100% {
                transform: translateY(0);
            }

        }

        .features {

            padding: 80px 8%;

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

            gap: 30px;

        }

        .card {

            background: white;

            padding: 35px;

            border-radius: 20px;

            box-shadow: 0 10px 30px rgba(0, 0, 0, .08);

            transition: .3s;

        }

        .card:hover {

            transform: translateY(-10px);

        }

        .card h3 {

            margin: 20px 0;

            color: #2563eb;

        }

        .card p {

            color: #666;

            line-height: 1.8;

        }

        .stats {

            background: #2563eb;

            padding: 80px 8%;

            display: flex;

            justify-content: space-around;

            color: white;

            text-align: center;

            flex-wrap: wrap;

        }

        .stats h2 {

            font-size: 55px;

        }

        .cta {

            padding: 100px 8%;

            text-align: center;

        }

        .cta h2 {

            font-size: 42px;

            margin-bottom: 20px;

        }

        footer {

            padding: 30px;

            background: #1e293b;

            color: white;

            text-align: center;

        }

        @media(max-width:900px) {

            .hero {

                flex-direction: column;

                text-align: center;

            }

            .hero-left h1 {

                font-size: 40px;

            }

            nav {

                display: none;

            }

        }
html{

    scroll-behavior:smooth;

}
/* ===========================
   FORM MESAJLARI
=========================== */

.formMesaj{
    margin:25px 0;
    animation:fadeIn .5s ease;
}

/* ===========================
   BAŞARILI MESAJ
=========================== */

.basariMesaj{

    background:rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(34,197,94,.35);

    border-radius:20px;

    padding:45px 35px;

    text-align:center;

    box-shadow:
        0 20px 45px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.08);

    animation:fadeIn .5s ease;

}

.basariMesaj .ikon{

    width:90px;
    height:90px;

    margin:0 auto 20px;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:50%;

    background:rgba(34,197,94,.15);

    color:#22c55e;

    font-size:48px;

    animation:pop .6s ease;

}

.basariMesaj h3{

    font-size:30px;

    color:#ffffff;

    margin-bottom:12px;

    font-weight:700;

}

.basariMesaj p{

    color:#cbd5e1;

    font-size:17px;

    line-height:1.7;

}

/* ===========================
   HATA MESAJI
=========================== */

.hataMesaj{

    background:rgba(239,68,68,.12);

    border:1px solid rgba(239,68,68,.35);

    color:#0c0707;

    border-radius:15px;

    padding:18px 20px;

    text-align:center;

    font-weight:600;

    animation:shake .4s ease;

}

/* ===========================
   ANİMASYONLAR
=========================== */

@keyframes fadeIn{

    from{

        opacity:0;
        transform:translateY(25px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes pop{

    0%{

        transform:scale(.5);
        opacity:0;

    }

    70%{

        transform:scale(1.1);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes shake{

    0%{transform:translateX(0);}
    20%{transform:translateX(-8px);}
    40%{transform:translateX(8px);}
    60%{transform:translateX(-5px);}
    80%{transform:translateX(5px);}
    100%{transform:translateX(0);}

}

/* ===========================
   MOBİL
=========================== */

@media(max-width:768px){

.basariMesaj{

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:20px;

    padding:45px 35px;

    text-align:center;

    box-shadow:
        0 15px 40px rgba(0,0,0,.12);

}

.basariMesaj .ikon{

    width:90px;
    height:90px;

    margin:0 auto 20px;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:50%;

    background:#dcfce7;

    color:#16a34a;

    font-size:48px;

}

.basariMesaj h3{

    color:#111827;

    font-size:30px;

    margin-bottom:12px;

    font-weight:700;

}

.basariMesaj p{

    color:#4b5563;

    font-size:17px;

    line-height:1.7;

}

}
/* CTA Bölümü */

.cta{

    padding:120px 20px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(180deg,#f8fafc 0%,#eef4ff 100%);

}

/* Kart */

.cta-box{

    width:100%;

    max-width:720px;

    padding:55px;

    background:#ffffff;

    border-radius:24px;

    border:1px solid #e5e7eb;

    box-shadow:
        0 15px 40px rgba(15,23,42,.08),
        0 5px 15px rgba(15,23,42,.05);

    transition:.35s;

}

.cta-box:hover{

    transform:translateY(-4px);

    box-shadow:
        0 25px 60px rgba(15,23,42,.12),
        0 10px 25px rgba(15,23,42,.08);

}

.cta-box h2{

    font-size:40px;

    color:#111827;

    margin-bottom:15px;

    text-align:center;

}

.cta-box p{

    color:#6b7280;

    font-size:18px;

    text-align:center;

    margin-bottom:35px;

    line-height:1.7;

}

.form-group{

    margin-bottom:18px;

}

.form-group input,
.form-group textarea{

    width:100%;

    padding:15px 18px;

    border:1px solid #d1d5db;

    border-radius:12px;

    background:#f9fafb;

    color:#111827;

    font-size:16px;

    box-sizing:border-box;

    transition:.25s;

}

.form-group input:focus,
.form-group textarea:focus{

    outline:none;

    border-color:#2563eb;

    background:#ffffff;

    box-shadow:0 0 0 4px rgba(37,99,235,.12);

}

.btn-gonder{

    width:100%;

    padding:16px;

    border:none;

    border-radius:12px;

    background:#2563eb;

    color:#fff;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.btn-gonder:hover{

    background:#1d4ed8;

    transform:translateY(-2px);

}