/* =====================================================
   MERSİN TAKSİ PREMIUM WEBSITE
   FINAL PRODUCTION CSS
===================================================== */


/* =========================
   ROOT
========================= */

:root {

    --yellow:#FFC107;
    --yellow-dark:#d99f00;

    --black:#111111;
    --dark:#181818;

    --white:#ffffff;

    --text:#222;

    --gray:#6b7280;

    --light:#f8f8f8;


    --glass:
    rgba(255,255,255,.10);


    --border:
    rgba(255,255,255,.15);


    --shadow:
    0 20px 60px rgba(0,0,0,.12);


    --radius:
    24px;


    --container:
    1200px;


    --transition:
    .35s cubic-bezier(.4,0,.2,1);

}





/* =========================
   RESET
========================= */


*,
*::before,
*::after{

    margin:0;
    padding:0;

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

    font-family:
    'Inter',
    Arial,
    sans-serif;


    color:
    var(--text);


    background:
    #fff;


    line-height:1.6;


    overflow-x:hidden;

}



img{

    width:100%;

    height:auto;

    display:block;

}



a{

    text-decoration:none;

}



ul{

    list-style:none;

}



button,
input,
textarea{

    border:none;

    outline:none;

    font-family:inherit;

}





/* =========================
   CONTAINER SYSTEM
========================= */


.container{

    width:
    min(90%, var(--container));


    margin-inline:auto;

}



.section{

    padding:
    100px 0;

}





/* =========================
   SECTION TITLE
========================= */


.section-title{

    max-width:750px;

    margin:
    0 auto 60px;

    text-align:center;

}



.section-title span{

    display:inline-block;


    color:
    var(--yellow-dark);


    font-weight:800;


    font-size:14px;


    letter-spacing:2px;


    text-transform:uppercase;


    margin-bottom:15px;

}



.section-title h2{

    font-size:
    clamp(32px,4vw,48px);


    line-height:1.15;


    font-weight:900;


    color:
    var(--black);

}



.section-title p{

    margin-top:20px;


    color:
    var(--gray);


    font-size:17px;

}








/* =========================
   SCROLL BAR
========================= */


.scroll-progress{

    position:fixed;

    top:0;

    left:0;

    height:4px;

    width:0;


    background:
    var(--yellow);


    z-index:9999;

}





/* =========================
   HEADER
========================= */


.header{


    position:fixed;


    top:0;


    left:0;


    width:100%;


    height:90px;


    z-index:1000;


    background:
    rgba(17,17,17,.75);


    backdrop-filter:
    blur(18px);


}



.nav-container{


    height:90px;


    display:flex;


    align-items:center;


    justify-content:space-between;


}





.logo{

    color:white;


    font-size:30px;


    font-weight:900;


    letter-spacing:-1px;


}



.logo span{


    color:
    var(--yellow);


}






.navigation ul{


    display:flex;


    align-items:center;


    gap:35px;


}



.navigation a{


    color:white;


    font-weight:600;


    font-size:15px;


    transition:
    var(--transition);


}



.navigation a:hover{


    color:
    var(--yellow);


}






.call-button{


    background:
    var(--yellow);


    color:
    #000;


    padding:
    15px 30px;


    border-radius:
    50px;


    font-weight:800;


    transition:
    var(--transition);


}



.call-button:hover{


    transform:
    translateY(-4px);


    box-shadow:
    0 15px 30px rgba(255,193,7,.35);


}





/* MOBILE BUTTON */


.mobile-menu{


    display:none;


    background:none;


    cursor:pointer;


}



.mobile-menu span{


    display:block;


    width:28px;


    height:3px;


    background:white;


    margin:6px 0;


}

/* =========================
   HERO SECTION
========================= */


.hero{

    min-height:100vh;

    position:relative;

    display:flex;

    align-items:center;


    padding-top:90px;


    background:

    linear-gradient(
        90deg,
        rgba(0,0,0,.85),
        rgba(0,0,0,.55)
    ),

    url("images/marina.webp");


    background-size:cover;

    background-position:center;


    overflow:hidden;


    color:white;

}





.hero::before{

    content:"";


    position:absolute;


    width:500px;

    height:500px;


    background:
    rgba(255,193,7,.15);


    filter:
    blur(120px);


    right:-200px;

    top:150px;


}




.hero-grid{


    position:relative;


    z-index:2;


    display:grid;


    grid-template-columns:

    1fr .9fr;


    align-items:center;


    gap:70px;


}




.hero-content{

    animation:
    fadeUp .8s ease forwards;

}





.badge{


    display:inline-flex;


    align-items:center;


    gap:8px;


    padding:

    10px 20px;


    border-radius:

    50px;


    background:

    rgba(255,193,7,.15);


    border:

    1px solid rgba(255,193,7,.4);


    color:

    var(--yellow);


    font-weight:700;


    margin-bottom:25px;


}




.hero h1{


    font-size:

    clamp(42px,5vw,70px);


    line-height:

    1.08;


    letter-spacing:-2px;


    font-weight:900;


}



.hero h1 span{


    color:

    var(--yellow);


}




.hero p{


    margin-top:25px;


    max-width:580px;


    font-size:20px;


    color:

    rgba(255,255,255,.8);


}







/* HERO BUTTONS */


.hero-buttons{


    display:flex;


    gap:18px;


    margin-top:35px;


    flex-wrap:wrap;


}



.primary-btn,
.secondary-btn{


    min-height:55px;


    padding:

    0 32px;


    display:inline-flex;


    align-items:center;


    justify-content:center;


    border-radius:

    50px;


    font-weight:800;


    transition:

    var(--transition);


}





.primary-btn{


    background:

    var(--yellow);


    color:#000;


}





.primary-btn:hover{


    transform:

    translateY(-5px);


    box-shadow:

    0 20px 40px rgba(255,193,7,.35);


}





.secondary-btn{


    color:white;


    border:

    2px solid rgba(255,255,255,.7);


}





.secondary-btn:hover{


    background:white;


    color:black;


}








/* HERO IMAGE */


.hero-image{


    position:relative;


}



.hero-image img{


    width:100%;


    max-width:620px;


    margin:auto;


    filter:

    drop-shadow(0 40px 60px rgba(0,0,0,.45));


    animation:

    floating 5s ease-in-out infinite;


}






/* HERO STATS */


.hero-stats{


    margin-top:55px;


    display:flex;


    gap:20px;


    flex-wrap:wrap;


}





.hero-stats div{


    min-width:150px;


    padding:

    18px 22px;


    border-radius:

    18px;


    background:

    rgba(255,255,255,.08);


    border:

    1px solid rgba(255,255,255,.15);


    backdrop-filter:

    blur(15px);


}




.hero-stats strong{


    display:block;


    color:

    var(--yellow);


    font-size:26px;


    font-weight:900;


}



.hero-stats span{


    color:

    rgba(255,255,255,.75);


    font-size:14px;


}








/* =========================
   SERVICES
========================= */


.services{

    background:

    #fff;

}





.services-grid{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:30px;


}




.service-card{


    padding:

    35px;


    background:

    #fff;


    border-radius:

    var(--radius);


    box-shadow:

    var(--shadow);


    border:

    1px solid #eee;


    transition:

    var(--transition);


    position:relative;


    overflow:hidden;


}





.service-card::before{


    content:"";


    position:absolute;


    width:120px;


    height:120px;


    background:

    rgba(255,193,7,.12);


    border-radius:50%;


    top:-50px;


    right:-50px;


}




.service-card:hover{


    transform:

    translateY(-10px);


}



.service-icon{


    width:70px;


    height:70px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:20px;


    background:

    rgba(255,193,7,.15);


    font-size:35px;


    margin-bottom:25px;


}



.service-card h3{


    font-size:22px;


    margin-bottom:15px;


}



.service-card p{


    color:

    var(--gray);


}

/* =========================
   WHY US
========================= */


.why{

    background:
    #f8f8f8;

}




.why-grid{


    display:grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:25px;


}





.why-box{


    background:white;


    padding:35px 25px;


    border-radius:

    var(--radius);


    text-align:center;


    box-shadow:

    0 15px 40px rgba(0,0,0,.08);


    transition:

    var(--transition);


}




.why-box:hover{


    transform:

    translateY(-8px);


}



.why-box div{


    width:70px;


    height:70px;


    margin:

    0 auto 20px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:20px;


    background:

    rgba(255,193,7,.15);


    font-size:32px;


}




.why-box h3{


    margin-bottom:10px;


    font-size:20px;


}




.why-box p{


    color:

    var(--gray);


    font-size:15px;


}








/* =========================
   HOW IT WORKS
========================= */



.steps-grid{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:30px;


}





.step-card{


    position:relative;


    padding:

    45px 30px;


    border-radius:

    var(--radius);


    background:white;


    box-shadow:

    var(--shadow);


    text-align:center;


}



.step-card > span{


    position:absolute;


    top:20px;


    right:25px;


    font-size:60px;


    font-weight:900;


    color:

    rgba(0,0,0,.05);


}





.step-icon{


    width:80px;


    height:80px;


    margin:auto;


    margin-bottom:25px;


    border-radius:25px;


    display:flex;


    align-items:center;


    justify-content:center;


    background:

    var(--yellow);


    font-size:35px;


}





.step-card h3{


    font-size:24px;


    margin-bottom:10px;


}





.step-card p{


    color:

    var(--gray);


}









/* =========================
   STATISTICS
========================= */



.statistics{


    padding:

    80px 0;


    background:

    var(--black);


    color:white;


}





.stats-grid{


    display:grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:25px;


}




.stat-box{


    text-align:center;


    padding:

    30px;


    border-radius:

    20px;


    background:

    rgba(255,255,255,.08);


    backdrop-filter:

    blur(15px);


}



.stat-box strong{


    display:block;


    font-size:

    48px;


    font-weight:900;


    color:

    var(--yellow);


}



.stat-box span{


    color:

    rgba(255,255,255,.75);


}









/* =========================
   REVIEWS
========================= */



.reviews{


    background:

    #fff;


}





.review-slider{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:30px;


}





.review-card{


    padding:

    35px;


    background:

    white;


    border-radius:

    var(--radius);


    box-shadow:

    var(--shadow);


    border:

    1px solid #eee;


}



.stars{


    color:

    #FFC107;


    font-size:22px;


    margin-bottom:20px;


}



.review-card p{


    color:

    var(--gray);


    margin-bottom:20px;


    line-height:1.7;


}



.review-card h4{


    font-size:18px;


}









/* =========================
   FAQ
========================= */



.faq{


    background:

    #f8f8f8;


}



.faq-container{


    max-width:850px;


    margin:auto;


}




.faq-item{


    background:white;


    margin-bottom:15px;


    border-radius:18px;


    overflow:hidden;


}



.faq-question{


    width:100%;


    padding:25px;


    background:white;


    display:flex;


    align-items:center;


    justify-content:space-between;


    cursor:pointer;


    font-weight:700;


    font-size:17px;


}



.faq-question span{


    font-size:25px;


    color:

    var(--yellow-dark);


}




.faq-answer{


    padding:

    0 25px 25px;


    color:

    var(--gray);


}









/* =========================
   CONTACT
========================= */



.contact-grid{


    display:grid;


    grid-template-columns:

    .8fr 1fr;


    gap:60px;


    align-items:start;


}





.contact-info span{


    color:

    var(--yellow-dark);


    font-weight:800;


}



.contact-info h2{


    font-size:42px;


    margin:15px 0;


}



.contact-info p{


    color:

    var(--gray);


}




.contact-box{


    margin-top:25px;


}



.contact-box strong{


    display:block;


    margin-bottom:5px;


}



.contact-box a{


    color:

    var(--black);


    font-weight:700;


}







.contact-form{


    padding:

    40px;


    background:white;


    border-radius:

    var(--radius);


    box-shadow:

    var(--shadow);


}



.contact-form label{


    display:block;


    margin-bottom:20px;


    font-weight:700;


}



.contact-form input,
.contact-form textarea{


    width:100%;


    margin-top:8px;


    padding:16px;


    border-radius:15px;


    background:#f5f5f5;


}



.map iframe{


    width:100%;


    height:400px;


    border:0;


}

/* =========================
   FOOTER
========================= */


.footer{


    background:

    #111;


    color:white;


    padding:

    80px 0 25px;


}




.footer-grid{


    display:grid;


    grid-template-columns:

    1.5fr 1fr 1fr 1fr;


    gap:40px;


}



.footer .logo{


    display:inline-block;


    margin-bottom:20px;


}




.footer p{


    color:

    rgba(255,255,255,.65);


}




.footer h3{


    margin-bottom:20px;


    font-size:20px;


}




.footer ul li{


    margin-bottom:12px;


}



.footer a{


    color:

    rgba(255,255,255,.7);


    transition:

    var(--transition);


}



.footer a:hover{


    color:

    var(--yellow);


}




.social-links{


    display:flex;


    gap:15px;


}




.social-links a{


    padding:

    10px 15px;


    border-radius:

    10px;


    background:

    rgba(255,255,255,.08);


}






.copyright{


    text-align:center;


    margin-top:50px;


    padding-top:25px;


    border-top:

    1px solid rgba(255,255,255,.1);


    color:

    rgba(255,255,255,.5);


}








/* =========================
   MOBILE CALL BUTTON
========================= */


.mobile-call{


    display:none;


    position:fixed;


    bottom:20px;


    right:20px;


    width:60px;


    height:60px;


    border-radius:50%;


    background:

    var(--yellow);


    color:#000;


    align-items:center;


    justify-content:center;


    font-size:28px;


    z-index:999;


    box-shadow:

    0 10px 30px rgba(0,0,0,.3);


}







/* =========================
   ANIMATIONS
========================= */


@keyframes fadeUp{


    from{


        opacity:0;


        transform:
        translateY(40px);


    }


    to{


        opacity:1;


        transform:
        translateY(0);


    }


}




@keyframes floating{


    0%,100%{


        transform:
        translateY(0);


    }


    50%{


        transform:
        translateY(-15px);


    }


}








[data-animation="fade-up"]{


    animation:

    fadeUp .8s ease forwards;


}






/* =========================
   RESPONSIVE TABLET
========================= */



@media(max-width:1100px){



    .hero-grid{


        grid-template-columns:1fr;


        text-align:center;


    }



    .hero p{


        margin-left:auto;


        margin-right:auto;


    }



    .hero-buttons{


        justify-content:center;


    }



    .hero-image{


        margin-top:30px;


    }



    .services-grid{


        grid-template-columns:

        repeat(2,1fr);


    }



    .why-grid{


        grid-template-columns:

        repeat(2,1fr);


    }



    .stats-grid{


        grid-template-columns:

        repeat(2,1fr);


    }



    .review-slider{


        grid-template-columns:

        repeat(2,1fr);


    }



    .footer-grid{


        grid-template-columns:

        repeat(2,1fr);


    }



}










/* =========================
   MOBILE
========================= */



@media(max-width:768px){



    .section{


        padding:70px 0;


    }




    .navigation{


        position:fixed;


        top:90px;


        left:-100%;


        width:100%;


        height:calc(100vh - 90px);


        background:#111;


        transition:.4s;


    }



    .navigation.active{


        left:0;


    }



    .navigation ul{


        flex-direction:column;


        padding-top:40px;


    }




    .call-button{


        display:none;


    }



    .mobile-menu{


        display:block;


    }




    .hero{


        min-height:auto;


        padding:

        150px 0 80px;


    }



    .hero h1{


        font-size:40px;


    }




    .hero p{


        font-size:17px;


    }




    .hero-stats{


        justify-content:center;


    }




    .services-grid,
    .why-grid,
    .steps-grid,
    .review-slider,
    .stats-grid,
    .footer-grid,
    .contact-grid{


        grid-template-columns:

        1fr;


    }





    .contact-info h2{


        font-size:34px;


    }





    .mobile-call{


        display:flex;


    }



}









/* =========================
   SMALL MOBILE
========================= */


@media(max-width:400px){


    .hero h1{



        font-size:34px;


    }



    .primary-btn,
    .secondary-btn{


        width:100%;


    }



}