:root{

--green:#1f8f4d;
--green-dark:#126637;
--light-green:#eaf8ef;
--white:#ffffff;
--cream:#fbfaf5;
--text:#1e2a22;
--gray:#707970;
--orange:#ff9f1c;

}


*{

margin:0;
padding:0;
box-sizing:border-box;

}


html{

scroll-behavior:smooth;

}



body{

font-family:'Poppins',sans-serif;

background:var(--cream);

color:var(--text);

overflow-x:hidden;

}



img{

width:100%;

display:block;

}



a{

text-decoration:none;

color:inherit;

}



.container{

width:min(1200px,90%);

margin:auto;

}



.section{

padding:100px 0;

}



.green-bg{

background:

linear-gradient(
180deg,
#eaf8ef,
#ffffff
);

}





/* NAVBAR */


.navbar{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

padding:22px 0;

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

backdrop-filter:blur(15px);

}



.nav-container{

width:min(1200px,90%);

margin:auto;

display:flex;

align-items:center;

justify-content:space-between;

}



.logo{

display:flex;

flex-direction:column;

font-family:'Playfair Display',serif;

}



.logo span{

font-size:38px;

font-weight:700;

color:var(--green);

}



.logo small{

font-size:11px;

letter-spacing:5px;

color:var(--gray);

}




nav{

display:flex;

gap:30px;

}



nav a{

font-size:14px;

transition:.3s;

}



nav a:hover{

color:var(--green);

}




.sepet{

background:var(--green);

color:white;

padding:12px 25px;

border-radius:30px;

}





/* BUTON */


.btn{

display:inline-block;

background:

linear-gradient(
135deg,
var(--green),
#39b86a
);

color:white;

padding:15px 35px;

border-radius:50px;

font-weight:600;

transition:.4s;

}



.btn:hover{

transform:translateY(-5px);

box-shadow:
0 15px 35px rgba(31,143,77,.3);

}




.btn-outline{

display:inline-block;

margin-left:15px;

padding:15px 35px;

border-radius:50px;

border:2px solid white;

color:white;

}




/* HERO */


.hero{

height:100vh;

position:relative;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

overflow:hidden;

background:

linear-gradient(
rgba(0,80,40,.45),
rgba(0,0,0,.45)
),

url("https://images.unsplash.com/photo-1542838132-92c53300491e?w=1600");


background-size:cover;

background-position:center;

color:white;

}



#three-area{

position:absolute;

inset:0;

z-index:1;

}



.hero-content{

position:relative;

z-index:2;

max-width:850px;

}



.etiket{

color:var(--green);

font-size:12px;

letter-spacing:5px;

font-weight:600;

margin-bottom:25px;

}



.hero .etiket{

color:#b9ffcf;

}




.hero h1{

font-family:'Playfair Display',serif;

font-size:110px;

line-height:.9;

}



.hero h1 span{

color:#b9ffcf;

font-style:italic;

}



.hero p{

font-size:18px;

max-width:650px;

margin:30px auto;

line-height:1.8;

}


/* BAŞLIK */

.baslik{

text-align:center;

margin-bottom:60px;

}



.baslik h2{

font-family:'Playfair Display',serif;

font-size:55px;

color:var(--text);

}





/* HAKKIMIZDA */


.iki{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}



.market-image{

border-radius:35px;

overflow:hidden;

box-shadow:
0 30px 70px rgba(0,0,0,.12);

}



.market-image img{

height:600px;

object-fit:cover;

}





.istatistik{

display:flex;

gap:20px;

margin-top:40px;

}



.istatistik div{

background:white;

padding:25px;

border-radius:20px;

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

}



.istatistik strong{

display:block;

font-size:35px;

color:var(--green);

}



.istatistik span{

font-size:13px;

color:var(--gray);

}







/* KATEGORİLER */


.kategori-grid{

display:grid;

grid-template-columns:repeat(6,1fr);

gap:20px;

}



.kategori{

background:white;

padding:30px 15px;

border-radius:25px;

text-align:center;

transition:.4s;

}



.kategori span{

font-size:45px;

}



.kategori h3{

margin:15px 0;

font-size:18px;

}



.kategori p{

font-size:13px;

color:var(--gray);

}



.kategori:hover{

transform:translateY(-10px);

background:var(--green);

color:white;

}





/* ÜRÜNLER */


.urun-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

}



.urun{

background:white;

border-radius:25px;

overflow:hidden;

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

transition:.4s;

}



.urun:hover{

transform:translateY(-10px);

}



.urun img{

height:230px;

object-fit:cover;

}



.urun h3{

padding:20px 20px 10px;

font-size:20px;

}



.urun p{

padding:0 20px;

color:var(--gray);

font-size:14px;

}



.urun strong{

display:block;

padding:15px 20px;

font-size:22px;

color:var(--green);

}



.urun button{

margin:0 20px 25px;

width:calc(100% - 40px);

padding:13px;

border:none;

border-radius:30px;

background:var(--green);

color:white;

cursor:pointer;

}





/* AVANTAJLAR */


.avantaj-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

}



.avantaj-grid div{

background:white;

padding:35px;

border-radius:25px;

transition:.3s;

}



.avantaj-grid div:hover{

transform:translateY(-8px);

}



.avantaj-grid h3{

font-size:20px;

margin-bottom:15px;

}





/* TARİF */


.tarif-box{

background:white;

border-radius:40px;

padding:50px;

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

align-items:center;

box-shadow:
0 25px 60px rgba(0,0,0,.08);

}



.tarif-box h2{

font-family:'Playfair Display';

font-size:55px;

}



.tarif-box img{

border-radius:30px;

height:400px;

object-fit:cover;

}





/* İLETİŞİM */


.iletisim-box{

text-align:center;

padding:60px;

border-radius:35px;

background:

linear-gradient(
135deg,
var(--green),
var(--green-dark)
);

color:white;

}



.iletisim-box h2{

font-family:'Playfair Display';

font-size:50px;

margin-bottom:20px;

}





/* FOOTER */


footer{

background:#10351f;

color:white;

text-align:center;

padding:60px;

}



footer h3{

font-family:'Playfair Display';

font-size:40px;

color:#b9ffcf;

}





/* MOBİL */


@media(max-width:1000px){


nav{

display:none;

}



.hero h1{

font-size:70px;

}



.iki,
.tarif-box{

grid-template-columns:1fr;

}



.kategori-grid{

grid-template-columns:repeat(3,1fr);

}



.urun-grid{

grid-template-columns:repeat(2,1fr);

}



.avantaj-grid{

grid-template-columns:repeat(2,1fr);

}


}




@media(max-width:600px){


.hero h1{

font-size:50px;

}



.kategori-grid,
.urun-grid,
.avantaj-grid{

grid-template-columns:1fr;

}



.baslik h2{

font-size:40px;

}



.tarif-box,
.iletisim-box{

padding:30px;

}



}