body{

font-family: 'Poppins', sans-serif;
margin:0;
background:#f5f1e8;
color:#3d3d3d;

}

/* HEADER */

header{

display:flex;
justify-content:space-between;
align-items:center;
padding:20px 40px;
background:#e8dfd1;

}

.logo{

font-size:24px;

}

nav ul{

display:flex;
list-style:none;
gap:30px;

}

nav a{

text-decoration:none;
color:#3d3d3d;
font-weight:500;
position:relative;
transition:0.3s;

}
nav a::after{

content:"";
position:absolute;
width:0%;
height:2px;
left:0;
bottom:-5px;
background:#b89b72;
transition:0.3s;

}

nav a:hover::after{

width:100%;

}

nav a:hover{

color:#b89b72;

}

/* HERO */
.hero{

height:70vh;
display:flex;
justify-content:center;
align-items:center;

background:#f3e8dc;

}

.hero-content{

background:rgba(0,0,0,0.4);
padding:40px;
border-radius:12px;

}

.hero h2{

font-size:48px;
margin-bottom:10px;

}

.hero p{

font-size:18px;
margin-bottom:20px;

}
.hero-btn{

display:inline-block;
padding:12px 25px;
background:#ad9671;
color:#333;
text-decoration:none;
border-radius:8px;
font-weight:500;
transition:0.3s;

}
.hero-button{
  padding: 14px 30px;
  border: none;
  background: linear-gradient(135deg, #f8dabe, #fbb391);
  color: #3d3d3d;
  font-size: 18px;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 8px 15px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Hover efekti */
.hero-button:hover{
  transform: scale(1.05);
  box-shadow: 0 12px 20px rgba(0,0,0,0.2);
  color: white;
  background: linear-gradient(135deg, #ffbe9c, #ffe0cf);
}

/* Butonun üstünden animasyonlu ışık efekti */
.hero-button::after{
  content:"";
  position:absolute;
  top:0;
  left:-75%;
  width:50%;
  height:100%;
  background: rgba(255,255,255,0.3);
  transform: skewX(-25deg);
  transition:0.5s;
}

.hero-button:hover::after{
  left:125%;
}
.hero-btn:hover{

background:#b89b72;
color:white;
transform:scale(1.05);

}

/* BLOG */

.blog{

padding:40px;

}

.post{

background:white;
padding:25px;
margin-bottom:25px;
border-radius:12px;
box-shadow:0 5px 15px rgba(0,0,0,0.08);
transition:0.3s;

}

.post:hover{

transform:translateY(-8px);
background:#efe6d8;
box-shadow:0 10px 25px rgba(0,0,0,0.15);

}

/* FOOTER */

footer{

text-align:center;
padding:20px;
background:#e8dfd1;

}
.fade-title{

opacity:0;
transform:translateY(30px);
animation:fadeUp 1s ease forwards;

}

.fade-text{

opacity:0;
transform:translateY(30px);
animation:fadeUp 1.5s ease forwards;

}

@keyframes fadeUp{

to{

opacity:1;
transform:translateY(0);

}

}