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

html{
scroll-behavior:smooth;
}

body{
background:#0f0f0f;
overflow-x:hidden;
color:white;
font-family:'Roboto', sans-serif;
}
h1, h2, h3, .logo, .footer h3{
    font-family:'Oswald', sans-serif;
    text-transform:uppercase;
    letter-spacing:1.5px;
}
.nav-call,
.call-btn,
.cta a{
    font-family:'Oswald', sans-serif;
    letter-spacing:1px;
    font-weight:500;
}
.road{
    width:320px;
    height:12px;
    background:#333;
    position:relative;
    overflow:visible; /* önemli */
    border-radius:50px;
    margin-top:10px;
}

.road::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    width:100%;
    height:2px;
    background:
    repeating-linear-gradient(
        to right,
        #ffd400 0px,
        #ffd400 25px,
        transparent 25px,
        transparent 50px
    );
    transform:translateY(-50%);
}

.taxi{
    position:absolute;
    left:-100px;
    top:50%;
    transform:translateY(-70%);
    font-size:75px;
    line-height:1;
    z-index:10;
    animation:drive 1.8s linear infinite;
    filter:
        drop-shadow(0 0 12px rgba(255,212,0,.8))
        drop-shadow(0 0 25px rgba(255,212,0,.5));
}

@keyframes drive{

100%{
left:350px;
}

}

.loader h3{
font-weight:500;
color:#ffc400;
}

/* HERO */

.hero{
height:100vh;
position:relative;
background:
linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.7)),
url("img/orhangazi.jpg");
background-size:cover;
background-position:center;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
padding:20px;
}

.overlay{
position:absolute;
inset:0;
backdrop-filter:blur(3px);
}

nav{
position:absolute;
top:0;
left:0;
width:100%;
padding:25px 8%;
display:flex;
justify-content:space-between;
align-items:center;
z-index:2;
}

.logo{
    display:flex;
    align-items:center;
}

.logo img{
    height:100px;
    width:auto;
    display:block;
    object-fit:contain;
}

.nav-call{
background:#FFD400;
padding:12px 22px;
border-radius:50px;
text-decoration:none;
font-weight:600;
color:black;
}

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

.badge{
background:rgba(255,212,0,.15);
border:1px solid rgba(255,212,0,.4);
padding:10px 18px;
border-radius:30px;
display:inline-block;
margin-bottom:20px;
}

.hero h1{
font-size:7rem;
line-height:1.1;
margin-bottom:25px;
color:#fff;
}
.hero h1 span{
    color:#FFD400;
    text-shadow:
        0 0 10px rgba(255,212,0,.5),
        0 0 20px rgba(255,212,0,.3);
}

.hero p{
font-size:1.1rem;
opacity:.9;
max-width:700px;
margin:auto;
}

.hero-buttons{
margin-top:35px;
display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;
}

.call-btn{
background:#FFD400;
color:black;
padding:18px 35px;
border-radius:60px;
text-decoration:none;
font-weight:700;
font-size:1rem;
transition:.4s;
}

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

.info-btn{
border:2px solid white;
color:white;
padding:18px 35px;
border-radius:60px;
text-decoration:none;
}

.floating-taxi{
    position:absolute;
    font-size:42px;
    opacity:.18;
    z-index:1;
    pointer-events:none;
    filter:
        drop-shadow(0 0 10px rgba(255,212,0,.4));
}

/* Soldan Sağa */
 
.taxi1{
    top:15%;
    animation:driveRight 8s linear infinite;
}

.taxi2{
    top:28%;
    animation:driveRight 11s linear infinite;
    animation-delay:-3s;
}

.taxi3{
    top:42%;
    animation:driveRight 9s linear infinite;
    animation-delay:-6s;
}

.taxi4{
    top:75%;
    animation:driveRight 12s linear infinite;
    animation-delay:-2s;
}

/* Sağdan Sola */

.taxi5{
    top:20%;
    animation:driveLeft 10s linear infinite;
    animation-delay:-5s;
}

.taxi6{
    top:55%;
    animation:driveLeft 8s linear infinite;
    animation-delay:-1s;
}

.taxi7{
    top:68%;
    animation:driveLeft 13s linear infinite;
    animation-delay:-7s;
}

.taxi8{
    top:88%;
    animation:driveLeft 9s linear infinite;
    animation-delay:-4s;
}

@keyframes driveRight{

    0%{
        left:-100px;
        transform:scaleX(1);
    }

    100%{
        left:110%;
        transform:scaleX(1);
    }

}

@keyframes driveLeft{

    0%{
        left:110%;
        transform:scaleX(-1);
    }

    100%{
        left:-100px;
        transform:scaleX(-1);
    }

}

@keyframes float{

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

}

/* ABOUT */

.about{
padding:100px 8%;
}

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

.section-title h2{
font-size:2.5rem;
margin-bottom:15px;
}

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

.card{
background:#181818;
padding:35px;
border-radius:25px;
text-align:center;
border:1px solid rgba(255,255,255,.05);
transition:.4s;
}

.card:hover{
transform:translateY(-10px);
}

.card i{
font-size:40px;
color:#FFD400;
margin-bottom:20px;
}

.card h3{
margin-bottom:10px;
}

/* CTA */

.cta{
padding:120px 8%;
text-align:center;
background:linear-gradient(135deg,#FFD400,#ffb700);
color:black;
}

.cta h2{
font-size:3rem;
margin-bottom:15px;
}

.cta p{
margin-bottom:25px;
}

.cta a{
display:inline-block;
padding:18px 35px;
background:black;
color:white;
text-decoration:none;
border-radius:60px;
font-weight:600;
}

/* FLOAT PHONE */

.floating-call{
position:fixed;
right:25px;
bottom:25px;
width:70px;
height:70px;
background:#FFD400;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
text-decoration:none;
font-size:25px;
color:black;
z-index:999;
animation:pulse 2s infinite;
}

@keyframes pulse{

0%{
box-shadow:0 0 0 0 rgba(255,212,0,.7);
}

70%{
box-shadow:0 0 0 20px rgba(255,212,0,0);
}

100%{
box-shadow:0 0 0 0 rgba(255,212,0,0);
}

}

/* RESPONSIVE */

@media(max-width:992px){

.cards{
grid-template-columns:1fr;
}

.hero h1{
font-size:2.8rem;
}

}

@media(max-width:768px){

.hero h1{
font-size:4.5rem;
}

nav{
padding:20px;
}

.logo{
font-size:1rem;
}

.nav-call{
padding:10px 15px;
font-size:.8rem;
}

.call-btn,
.info-btn{
width:100%;
}

}



/* FOOTER */

.footer{
    background:#0b0b0b;
    color:#ccc;
    border-top:1px solid rgba(255,255,255,0.08);
}

.footer-container{
    max-width:1200px;
    margin:auto;
    padding:70px 8%;
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:60px;
}

.footer-col h3{
    color:#FFD400;
    font-size:1.4rem;
    margin-bottom:15px;
}

.footer-col h4{
    color:#fff;
    font-size:1rem;
    margin-bottom:15px;
    letter-spacing:1px;
}

.footer-col p{
    line-height:1.7;
    color:#aaa;
    font-size:0.95rem;
}

/* listeler */
.footer-col ul{
    list-style:none;
    padding:0;
}

.footer-col ul li{
    margin-bottom:12px;
    display:flex;
    align-items:center;
    gap:10px;
    color:#aaa;
}

.footer-col ul li i{
    color:#FFD400;
    min-width:18px;
}

.footer-col a{
    color:#aaa;
    text-decoration:none;
    transition:0.3s;
}

.footer-col a:hover{
    color:#FFD400;
}

/* alt bölüm */
.footer-bottom{
    border-top:1px solid rgba(255,255,255,0.08);
    padding:20px 8%;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
    font-size:0.9rem;
    color:#777;
}

.creator{
    color:#FFD400;
    text-decoration:none;
    font-weight:500;
}

.creator:hover{
    opacity:0.8;
}

/* SEO TEXT — CARD YOK, SADE METİN */
.footer-seo{
    max-width:1200px;
    margin:auto;
    padding:20px 8% 40px;
    border-top:1px solid rgba(255,255,255,0.05);
}

.footer-seo p{
    color:#777;
    font-size:0.85rem;
    line-height:1.6;
    text-align:center;
}


@media(max-width:768px){

    .footer-container{
        grid-template-columns:1fr;
        gap:40px;
        text-align:center;
    }

    .footer-bottom{
        flex-direction:column;
        text-align:center;
    }

}

@media(max-width:768px){

    .footer-container{
        grid-template-columns:1fr;
        text-align:center;
        gap:30px;
    }

    .footer-col ul li{
        justify-content:center;
    }

    .footer-bottom{
        flex-direction:column;
        text-align:center;
    }
}

.hero-subtitle{
    margin:10px 0 20px;
    font-size:1.8rem;
    font-weight:600;
    color:#fff;
    letter-spacing:0.5px;
}

.hero-subtitle span{
    color:#FFD400;
    font-weight:700;
}

@media(max-width:768px){

    .hero-subtitle{
        font-size:1.7rem;
    }

}