/* ===========================
   ENTER TAKSİ
   STYLE.CSS
===========================*/

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

:root{

    --yellow:#FFC107;
    --black:#0B0B0B;
    --dark:#151515;
    --gray:#8c8c8c;
    --white:#ffffff;
    --transition:.35s ease;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;
    background:var(--black);
    color:var(--white);
    overflow-x:hidden;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}

img{

    max-width:100%;

}


/*============================
NAVBAR
============================*/

header{
    position:fixed;
    top:20px;
    left:0;
    width:100%;
    z-index:1000;
    display:flex;
    justify-content:center;
    pointer-events:none;
}

.navbar{

    width:min(1200px,92%);
    height:78px;

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

    padding:0 35px;

    background:rgba(15,15,15,.45);

    backdrop-filter:blur(18px);
.navbar{

transition:.35s;

}

.navbar.active{

height:65px;

background:rgba(10,10,10,.82);

backdrop-filter:blur(30px);

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

}
    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

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

    pointer-events:auto;

    transition:.35s;
    height:72px;
    background:rgba(15,15,15,.28);
    backdrop-filter:blur(25px);
}

.logo{

    .logo{

font-size:34px;

font-weight:900;

}
    letter-spacing:1px;
    color:white;

}

.logo span{

    color:#FFC107;

}

.logo span{

    color:var(--yellow);

}

.menu{

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

}

.menu a{
.menu a:first-child{

color:#FFC107;

}
    color:#fff;

    font-size:15px;

    font-weight:500;

    letter-spacing:.3px;

    transition:.3s;

}

.menu a:hover{

    color:#FFC107;

}

.menu a::after{

    content:"";

    position:absolute;

    width:0;

    height:2px;

    background:var(--yellow);

    left:0;

    bottom:-6px;

    transition:.3s;

}

.menu a:hover::after{

    width:100%;

}


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

.hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:120px 8% 80px;
    background-image:
linear-gradient(
rgba(0,0,0,.70),
rgba(0,0,0,.40)),
url("enter-taksii.jpg");
overflow:visible;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}

.overlay{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.88) 0%,
        rgba(0,0,0,.62) 38%,
        rgba(0,0,0,.20) 72%,
        rgba(0,0,0,.08) 100%
    );

    backdrop-filter:brightness(.95);
}

.hero-content{

    position:relative;
    z-index:10;
    max-width:650px;
    margin-top:70px;
    animation:fadeLeft 1.2s ease;

}

.hero-small{

    color:var(--yellow);

    font-weight:600;

    letter-spacing:2px;

    margin-bottom:15px;

}

.hero h1{

font-size:78px;
font-weight:800;
line-height:1.05;
margin-bottom:25px;
text-shadow:0 8px 25px rgba(0,0,0,.4);

}

.hero-text{

max-width:520px;

font-size:19px;

line-height:34px;

color:#efefef;

margin-bottom:40px;

}

.hero-button{

position:relative;

overflow:hidden;

}

.hero-button::before{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;

height:100%;

background:rgba(255,255,255,.25);

transform:skewX(-25deg);

transition:.7s;

}

.hero-button:hover::before{

left:130%;

}

.hero-button:hover{

transform:translateY(-5px) scale(1.04);

box-shadow:0 20px 45px rgba(255,193,7,.45);

}

.hero-button:hover{

    transform:translateY(-5px);

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

}


/*============================
FLOATING BUTTONS
============================*/

.floating-buttons{

position:fixed;

right:25px;

bottom:25px;

top:auto;

transform:none;

display:flex;

flex-direction:column;

gap:15px;

z-index:9999;

}

.call-btn,
.whatsapp-btn{
.call-btn,
.whatsapp-btn{

animation:pulse 6s infinite;

}

@keyframes pulse{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

}
    width:62px;

    height:62px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    color:white;

    transition:.35s;

}

.call-btn{

    background:#ffb300;

}

.whatsapp-btn{

    background:#25D366;

}

.call-btn:hover,
.whatsapp-btn:hover{

    transform:scale(1.12);

}


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

@media(max-width:992px){

.menu{

display:none;

}

.hero h1{letter-spacing:-2px;

font-size:54px;

}

.hero{filter:saturate(1.05);

padding:0 35px;

}

}

@media(max-width:768px){

.hero h1{

    font-size:60px;

    font-weight:800;

    line-height:1.08;

    letter-spacing:-1px;

    margin-bottom:22px;

}

.hero-text{

    max-width:500px;

    font-size:18px;

    line-height:32px;

    color:#e7e7e7;

}

.logo{

font-size:24px;

}

.floating-buttons{

right:15px;

}

.call-btn,
.whatsapp-btn{

width:55px;

height:55px;

}

}
@keyframes fadeLeft{

0%{

opacity:0;

transform:translateX(-70px);

}

100%{

opacity:1;

transform:translateX(0);

}

}
/*============================
HERO FEATURES
============================*/

.hero-features{
    position:absolute;
    left:8%;
    bottom:-70px;   /* Aşağı indir */
    display:flex;
    gap:20px;
    z-index:20;
    flex-wrap:wrap;
}

.feature-card{
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 22px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    transition:.35s ease;
}

.feature-card:hover{
    transform:translateY(-6px);
    background:rgba(255,193,7,.18);
}

.feature-card i{
    color:#FFC107;
    font-size:20px;
}

.feature-card span{
    color:#fff;
    font-weight:600;
    font-size:15px;
}

@media(max-width:768px){

    .hero-features{
        position:static;
        margin-top:40px;
        justify-content:center;
    }

    .feature-card{
        width:100%;
        justify-content:center;
    }

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

.services{
    padding:180px 8% 100px;
}

.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title span{
    color:#FFC107;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
}

.section-title h2{
    font-size:42px;
    margin:15px 0;
}

.section-title p{
    color:#bdbdbd;
    max-width:650px;
    margin:auto;
    line-height:28px;
}

.services-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
}

.service-card{
    background:#1b1b1b;
    padding:40px 30px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.06);
    transition:.35s ease;
    text-align:center;
}

.service-card:hover{

    transform:
    translateY(-12px);

    border-color:#FFC107;

    box-shadow:
    0 20px 50px rgba(255,193,7,.22);
.service-card i{

transition:.35s;

}

.service-card:hover i{

transform:
rotate(8deg)
scale(1.15);

}
}

.service-card i{
    width:75px;
    height:75px;
    line-height:75px;
    border-radius:50%;
    background:#FFC107;
    color:#111;
    font-size:28px;
    margin-bottom:25px;
}

.service-card h3{
    font-size:22px;
    margin-bottom:15px;
}

.service-card p{
    color:#bdbdbd;
    line-height:28px;
}
.call-btn,
.whatsapp-btn{

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

}
padding:14px 20px;

font-size:14px;

border-radius:14px;
padding:18px 48px;

font-size:20px;

font-weight:700;

border-radius:50px;
.hero::before{

content:"";

position:absolute;

inset:0;

background:url("enter-taksii.jpg") center/cover;

animation:heroZoom 18s linear infinite alternate;

z-index:-2;

}

@keyframes heroZoom{

from{

transform:scale(1);

}

to{

transform:scale(1.08);

}

}
/*============================
PAGE LOAD ANIMATION
============================*/

.hero-small,
.hero h1,
.hero-text,
.hero-button 

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

}

.hero-button:hover{

box-shadow:
0 25px 55px rgba(255,193,7,.55);

}
.hero-features{

    opacity:0;

    transform:translateY(40px);

    transition:all .8s ease;

}

.loaded .hero-small{

    opacity:1;
    transform:translateY(0);

}

.loaded .hero h1{

    opacity:1;
    transform:translateY(0);

    transition-delay:.2s;

}

.loaded .hero-text{

    opacity:1;
    transform:translateY(0);

    transition-delay:.45s;

}

.loaded .hero-button{

    opacity:1;
    transform:translateY(0);

    transition-delay:.65s;

}

.loaded .hero-features{

    opacity:1;
    transform:translateY(0);

    transition-delay:.85s;

}
/*============================
SCROLL ANIMATION
============================*/

.hidden{
    opacity:0;
    transform:translateY(70px);
    transition:all .8s ease;
}

.show{
    opacity:1;
    transform:translateY(0);
}
/*============================
SCROLL DOWN
============================*/

.scroll-down{

    position:absolute;

    bottom:25px;

    left:50%;

    transform:translateX(-50%);

    width:48px;

    height:48px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.20);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    animation:scrollDown 2s infinite;

    z-index:20;

}

@keyframes scrollDown{

0%,100%{

transform:translateX(-50%) translateY(0);

}

50%{

transform:translateX(-50%) translateY(10px);

}

}