* {
  box-sizing: border-box;
}


body{
background-color: #000000;
padding-top:0px;
 min-height: 100%;
margin:0;

}

.ustbar{
width:100%;
height:50px;
background: rgba(255, 255, 255, 0.9);

left:0;

display:flex;
justify-content:space-between;



background-color:#3E3636

}



.ustpng{
border-radius:10px;
}



.banner{
  min-height: 100vh;

  display: flex;
  flex-direction: column;      
  justify-content: center;     
  align-items: center;         

  background-image: url("resimler/banner3.jpg");
  background-size: cover;
  background-position: center;

}

.ana_baslik{
padding-top:200px;
margin: auto;
  margin-top:50px;
text-align:center;
font-size:64px;
color:#ffffff;
}

.ana_paragraf{
  margin: auto;
margin-left:50px;
margin-right:50px;
  text-align: justify;
  font-family: 'Source Serif 4', serif;
  font-size: 24px;
  line-height: 1.7;
  max-width: 1000px;
color:#ffffff;

}


.banner a {
  text-decoration: none;
  color: black;
}

.liste{
padding-top:30px;
opacity: 1;
}
.sol_liste{
align-items: left;
padding-left: 20%;
}
.sag_liste{
align-items: right;
padding-right: 20%;
}
.liste li{

list-style:none;
display: flex;
width: fit-content;
margin-top:30px;
padding: 20px;
background-color: #fff3f3;
opacity: 0.3;
border-radius: 15px;

}
.liste li:hover{
    opacity: 1;
    transition: all 0.1s ease-in-out;
    list-style: none;
    background-color: #f8f8f8;
    border: 0px solid rgb(255, 0, 0);
    border-radius: 15px;
    padding: 20px;

}



.ustpng{
width:40px;
height:40px;
opacity:0.7;
border-radius:10px;
box-shadow: 0 0 0 rgba(0,0,0,0);
transition: transform 0.3s ease, box-shadow 0.3s ease;

}
.ustpng:hover{
opacity:1;
transition: transform 0.3s ease;
  transform: scale(1.15);
  box-shadow: 0 0 10px 7px rgba(255,255,255,0.7);
}




.navigasyon_bar{



display: flex;
justify-content:space-between;

box-shadow: 0 0 0 rgba(0,0,0,0);
transition: transform 0.3s ease, box-shadow 0.3s ease;
padding:5px;

position:fixed;
width:100%;
top:0;

  overflow: hidden;

z-index:100;
background-color:#D72323;

opacity:0.7;
}

.huawei_png{
width:30px;
height:30px;
padding-top:0px;
padding-bottom:0px;
margin:0;
object-fit: contain;
}


.ic_div{
  display: flex;
  align-items: center;    
  text-align: center;
  gap:8px;
}


.navigasyon_bar img{
transition: transform 0.3s ease;
  transform: scale(1);
}
.navigasyon_bar img:hover{
  transform: scale(1.20);
}


.navigasyon_bar a:hover{
    opacity: 1;
    transition: all 0.1s ease-in-out;
  box-shadow: 0 12px 25px rgba(0,0,0,0.18);

    
    background-color: #ffffff;
    border: 0px solid rgb(255, 0, 0);
    border-radius: 15px;
    
transform: translateY(-3px) scale(1.01);
  box-shadow: 0 0 10px 7px rgba(255,255,255,0.7);


}
.navigasyon_bar:hover{
opacity:1;
}

.navigasyon_bar a{
  text-decoration: none;
  color: black;
padding: 10px;
margin-right:20px;
}
.navpng{
width:40;
height:40;
}






.alt-banner {
  background-color: #3E3636;
  text-align: center;
  padding: 20px;
width:100%;
color:#D72323;


}

.last_foot{
text-align:center;
color:#D72323;


margin-top:30px;
}
.foot a{
text-decoration:none;

color:#D72323;

margin:50px;
}

.foot_divs{
display:flex;
justify-content:space-between;
margin-bottom:50px;
margin-top:50px;
width:auto;
height:50px;
background-color:#3E3636;
gap:10px;
border-radius:20px;


}
.foot_divs a{
text-decoration:none;
text-align:left;
color:#3E3636;
border-radius:20px;

}
.foot_div1{
width:auto;
height:50px;

border-radius:20px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
color:#D72323;
line-height:25px;


}
.foot_div1:hover{
transform: translateY(-2px) scale(1.01);
  box-shadow: 0 12px 25px rgba(0,0,0,0.25);
color:#D72323;
}
.foot_divs a:hover{
background-color:#f8f8f8;

}
.footer_foto{
width:50px;
height:50px;
border-radius:20px;
float:left;
margin-right: 10px;

}




.uclu-div{
display:flex;
justify-content:space-between;;
padding-left:15%;
padding-right:15%;
gap:20px;
padding-top:50px;
margin-bottom:50px;

}
.mini_foto{
width:100%;
height:50%;
border-radius:20px;

}

.ic_p{
text-align:center;
}

.mini_foto:hover{
width:100%;
height:50%;
align-items:center;
margin:left:0;
}

.uclu-div a{
text-decoration:none;
color:#F5EDED;
 
}

.div1{
transition: transform 0.3s ease, box-shadow 0.3s ease;

  width: 100%;
  max-width: 420px;

height:450px;

clip-path: polygon(
  20% 100%,  /* sol alt */
  0% 50%,    /* sol orta */
  20% 0%,    /* sol üst */
  80% 0%,    /* sağ üst */
  100% 50%,  /* sağ orta */
  80% 100%   /* sağ alt */
);
  transition: clip-path 3s ease;
background-color:#D72323;

border-radius:20px;
padding-bottom:72px;
.div_h1{
text-align:center;
}

}

.div1:hover{
transform: translateY(-2px) scale(1.01);
  box-shadow: 0 0 20px 10px rgba(255,255,255,0.7);

border-radius:20px;
 clip-path: none;

}
.div2{
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-radius:20px;

  width: 100%;
  max-width: 420px;
height:450px;


 clip-path: polygon(
  20% 100%,  /* sol alt */
  0% 50%,    /* sol orta */
  20% 0%,    /* sol üst */
  80% 0%,    /* sağ üst */
  100% 50%,  /* sağ orta */
  80% 100%   /* sağ alt */
);
  transition: clip-path 3s ease;
background-color:#D72323;

.div_h1{
text-align:center;

}



}
.div2:hover{
transform: translateY(-2px) scale(1.01);

  box-shadow: 0 0 20px 10px rgba(255,255,255,0.7);
border-radius:20px;

 clip-path: none;

}
.div3{
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-radius:20px;

h1{
text-align:center;
}

}
.div3:hover{
transform: translateY(-2px) scale(1.01);
  box-shadow: 0 12px 25px rgba(0,0,0,0.25);

}










.sidebar {
  position: fixed;
  top: 30%;
  right: 10px;

  width: 60px;
  height: 30vh;

  background-color: #D72323;
  display: flex;
  align-items: center;

  padding-top: 20px;
  z-index: 100;

  opacity: 0.3;
  overflow: hidden;
  border-radius: 20px;

  transition: all 0.4s ease;
}

.sidebar:hover {
  width: 450px;
  height: 75vh;
  top: 10%;
  opacity: 1;
}








.side_bar_baslik{
display:blok;

}


.side_liste{
padding-top:30px;
opacity: 1;
  display: flex;
  justify-content: center;

box-shadow: 0 0 0 rgba(0,0,0,0);
transition: box-shadow 0.3s ease;

}
.side_sol_liste{
align-items: left;

}
.side_sag_liste{
align-items: right;
padding-right: 5vh;

}
.side_liste li{
 flex-direction: column;

list-style:none;
display: flex;
width: fit-content;
margin-top:30px;
padding: 20px;
background-color: #fff3f3;
opacity: 1;
border-radius: 15px;
align-items:center;

}
.side_liste li:hover{
   
    transition: all 0.1s ease-in-out;
    list-style: none;
 flex-direction: column;
margin-top: 30px;
    background-color: #f8f8f8;
    border: 0px solid rgb(255, 0, 0);
    border-radius: 15px;
    padding: 20px;
  box-shadow: 0 0 10px 7px rgba(255,255,255,0.7);

}

.side_liste a{
text-decoration:none;
color:#000000;
}

.side_bar_img{
width:120px;
height:100px;

}







.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.icerik {
  position: relative;
  z-index: 2;
  height: 100%;

  display: flex;
  justify-content: center;

  align-items: center;

  color: white;
  font-size: 18px;
}


.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1;
}

.hero {
  transition: opacity 0.6s ease;
}








.kategori-kart {
 
 
  border-radius: 20px;
  padding: 30px;
  color: white;
  transition: all 0.3s;
}
.kategori-kart a{
text-decoration:none;
color:#F5EDED;
}

.kategori-kart:hover {
  box-shadow: 0 0 10px 7px rgba(255,255,255,0.7);
  transform: translateY(-5px);
}

.kategori-kart h3 {
  color: #D72323;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.kategori-kart h2 {
  font-size: 1.8rem;
  margin-bottom: 15px;
}







.baslik{
text-align:center;

  margin: auto;
margin-top:50px;
  margin-bottom:50px;
max-width: 1000px;
color:#D72323;

}
.paragraf{

  margin: auto;
  text-align: justify;
  font-family: 'Source Serif 4', serif;
  font-size: 18px;
  line-height: 1.7;
  max-width: 1000px;
color:#F5EDED;


}

.siralama{
  margin: auto;
  text-align: justify;
  font-family: 'Source Serif 4', serif;
  font-size: 18px;
  line-height: 1.7;
  max-width: 1000px;
color:#F5EDED;

}