@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

html,
body,
input,
button,
textarea,
select{

font-family:'Poppins',sans-serif !important;

}
:root{

--ana-renk:#4ade80;
--hover-renk:#22c55e;

--arka:#101820;
--kart:#23272f;

--yazi:#f1f5f9;

}

*{

margin:0;
padding:0;

box-sizing:border-box;

font-family:Arial,sans-serif;

scroll-behavior:smooth;

}

html,
body{

background:#101820;

color:white;

overflow-x:hidden;

}


/* BAŞLIKLAR */

h1,
h2,
h3,
h4,
h5,
h6{

color:white;

}


/* NAVBAR */

nav{

height:80px;

background:#23272f;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 50px;

border-bottom:2px solid #4ade80;

position:sticky;

top:0;

z-index:999;

}

.logo{

display:flex;

align-items:center;

gap:15px;

}

.logo img{

width:50px;
height:50px;

object-fit:contain;

}

.logo h1{

font-size:30px;

font-weight:800;

color:white;

}


/* MENÜ */

nav ul{

display:flex;

align-items:center;

gap:30px;

list-style:none;

}

nav ul a{

text-decoration:none;

color:white;

font-weight:bold;

transition:.3s;

}

nav ul a:hover{

color:#4ade80;

}


/* HERO */

.hero{

height:90vh;

background:
linear-gradient(
rgba(0,0,0,.25),
rgba(0,0,0,.35)
),
url("indexfoto.jpeg");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

display:flex;

align-items:center;

padding-left:80px;

}

.heroText{

width:600px;

}

.heroText h2{

font-size:70px;

font-weight:900;

margin-bottom:20px;

text-shadow:
0 0 10px rgba(0,0,0,.7),
0 0 20px rgba(0,0,0,.6);

}


/* BUTON */

button{

padding:14px 30px;

border:none;

background:#4ade80;

color:#08120c;

border-radius:12px;

font-size:16px;

font-weight:bold;

cursor:pointer;

transition:.3s;

}

button:hover{

background:#22c55e;

transform:translateY(-3px);

}


/* GENEL */

a{

color:inherit;

text-decoration:none;

}


/* KATEGORİLER */

.kategoriler{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:30px;

padding:70px;

}


/* KART */

.kart{

background:#23272f;

padding:40px;

border-radius:20px;

border:1px solid #3f4752;

text-align:center;

transition:.3s;

}

.kart:hover{

transform:translateY(-10px);

border-color:#4ade80;

box-shadow:
0 0 20px rgba(74,222,128,.15);

}

.kart h2{

font-size:28px;

margin-bottom:20px;

color:white;

}

.kart a{

display:inline-block;

padding:12px 25px;

background:#4ade80;

color:#08120c;

border-radius:10px;

font-weight:bold;

transition:.3s;

}

.kart a:hover{

background:#22c55e;

transform:translateY(-3px);

}


/* ŞEHİR LİSTESİ */

.sehirListe{

background:#3a4250;

border:1px solid #4b5563;

padding:22px;

border-radius:16px;

margin-bottom:18px;

display:flex;

justify-content:space-between;

align-items:center;

color:white;

}

.sehirListe *{

color:white;

}

.sehirListe a{

background:none !important;

color:#ff4d4d !important;

padding:0 !important;

font-weight:bold;

}

.sehirListe a:hover{

color:#ff8080 !important;

}


/* GALERİ */

.galeri{

display:flex;

flex-direction:column;

align-items:center;

gap:30px;

padding:50px;

}

.kart img{

width:100%;

max-height:650px;

object-fit:contain;

border-radius:15px;

}


/* BİLGİ */

.bilgi{

padding:20px;

color:white;

}


/* FORM */

input,
textarea,
select{

width:100%;

padding:15px;

border:1px solid #4b5563;

border-radius:10px;

background:#3a4250;

color:white;

font-size:16px;

outline:none;

transition:.3s;

}

input:focus,
textarea:focus,
select:focus{

border-color:#4ade80;

box-shadow:
0 0 10px rgba(74,222,128,.25);

}

input::placeholder,
textarea::placeholder{

color:#cbd5e1;

}

textarea{

resize:none;

}


/* SON PAYLAŞIMLAR */

.sonFoto{

padding:70px 25px;

overflow:hidden;

}

.sonFoto h2{

text-align:center;

font-size:40px;

margin-bottom:40px;

color:white;

}

.slider{

display:flex;

overflow-x:auto;

gap:25px;

padding-bottom:15px;

scroll-behavior:smooth;

scroll-snap-type:x mandatory;

-webkit-overflow-scrolling:touch;

}

.slider::-webkit-scrollbar{

height:8px;

}

.slider::-webkit-scrollbar-thumb{

background:#4ade80;

border-radius:10px;

}

.slideLink{

display:block;

color:white;

flex:0 0 auto;

}

.slide{

width:350px; min-width:350px; max-width:350px; background:#23272f; padding:20px; border-radius:20px; border:1px solid #3f4752; transition:.3s; scroll-snap-align:center; overflow:hidden; box-sizing:border-box;

}

.slide:hover{

transform:translateY(-8px);

border-color:#4ade80;

box-shadow:
0 0 20px rgba(74,222,128,.15);

}

.slide img{

width:100%;

height:250px;

object-fit:cover;

border-radius:15px;

margin-bottom:15px;

}

.slideBilgi{

display:flex;

justify-content:space-between;

gap:10px;

flex-wrap:wrap;

font-size:14px;

color:#9ca3af;

margin-bottom:15px;

}

.slide p{

line-height:26px;

color:#ddd;

word-break:break-word;

}


/* MOBİL */

.menuBtn{

display:none;

}

@media(max-width:768px){

html,
body{

overflow-x:hidden;

}


/* NAVBAR */

nav{

height:auto;

padding:15px;

flex-wrap:wrap;

}

.logo{

gap:10px;

}

.logo img{

width:42px;
height:42px;

}

.logo h1{

font-size:24px;

}

.menuBtn{

display:block;

margin-left:auto;

font-size:30px;

cursor:pointer;

color:white;

}

nav ul{

display:none;

width:100%;

flex-direction:column;

background:#23272f;

padding:15px;

margin-top:15px;

border-radius:15px;

gap:15px;

}

nav ul.aktif{

display:flex;

}

nav ul li{

text-align:center;

}


/* HERO */

.hero{

height:42vh;

min-height:260px;

padding:20px;

justify-content:center;

align-items:center;

text-align:center;

}

.heroText{

width:100%;

display:flex;

flex-direction:column;

align-items:center;

}

.heroText h2{

font-size:38px;

line-height:45px;

margin-bottom:15px;

}


/* KATEGORİLER */

.kategoriler{

grid-template-columns:1fr;

padding:25px;

gap:20px;

}

.kart{

padding:25px;

border-radius:16px;

}

.kart h2{

font-size:24px;

}

.kart a{

padding:10px 22px;

font-size:15px;

}


/* ŞEHİR */

.sehirListe{

padding:18px;

font-size:15px;

border-radius:14px;

}


/* GALERİ */

.galeri{

padding:20px;

gap:20px;

}

.kart img{

max-height:320px;

border-radius:12px;

}


/* TELEFON SON PAYLAŞIMLAR */

.sonFoto{

padding:35px 0;

overflow:hidden;

}

.sonFoto h2{

font-size:28px;

margin-bottom:20px;

text-align:center;

}

.slider{

display:flex !important;

overflow-x:auto !important;

overflow-y:hidden;

gap:14px !important;

padding:0 14px !important;

scroll-snap-type:x mandatory !important;

-webkit-overflow-scrolling:touch;

scroll-behavior:smooth;

}

.slider::-webkit-scrollbar{

display:none;

}

.slideLink{

flex:0 0 92% !important; min-width:92% !important; max-width:92% !important; display:block !important; margin:auto;

}

.slide{

width:100% !important;

min-width:100% !important;

max-width:100% !important;

padding:18px !important;

border-radius:20px !important;

box-sizing:border-box !important;

scroll-snap-align:center !important;

}

.slide img{

width:100% !important; height:280px !important; object-fit:contain !important; background:#1b1f27; border-radius:16px !important; padding:5px;
}

.slideBilgi{

display:flex;

justify-content:space-between;

flex-wrap:wrap;

gap:6px;

font-size:13px;

margin:10px 0;

}

.slide p{

font-size:15px;

line-height:24px;

}


/* FORM */

input,
textarea,
select{

font-size:15px;

padding:14px;

}

button{

padding:12px 24px;

font-size:15px;

}

}

