@import url("https://fonts.googleapis.com/css2?family=Bellota:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Judson:ital,wght@0,400;0,700;1,400&display=swap");

@import url('https://fonts.googleapis.com/css2?family=Josefin+Slab:ital@0;1&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #efefef;
  /* margin: 10%; */
  font-family: "Bellota", system-ui;
  font-family: "Judson", serif;
}

.container {
    /* border: 2px solid red;  */ 
  margin: 50px auto;
  border-radius: 1.5rem;
  box-shadow: 10px 10px 50px black;
}

/* ---------------------------------- */
/*               ICONBAR              */
/* ---------------------------------- */

.iconbar {
    /* border: 2px solid blue; */  
  display: flex;
  justify-content: space-between;
  padding: 10px 50px;
  flex-wrap: wrap;
  /* flex-wrap CSS özelliği bir esnek kutu içersindeki öğelerin ana-eksende birden fazla satır üzerine sarılıp sarılmayacağını ayarlamak için kullanılır. */
  margin-left: 0.4rem;
  gap: 1rem;
  border-bottom: 2px solid #d9d9d9;
}

.input-part {
  /* border: 2px solid green; */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem;

}

.input-part select {
  /* border: 2px solid red; */
  width: 188px;
  height: 40px;
  background-color: #d9d9d9;
  border-radius: 5px;
  font-family: "Bellota", system-ui;
  padding: 0.5rem;
}

.search-input {
  /* border: 2px solid red; */
  width: 300px;
  height: 40px;
  background-color: #d9d9d9;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  margin-left: 0.5rem;
  padding: 0.5rem;

}
.search-input input {
  background-color: initial;
  border: none;
  font-size: 1rem;
  padding: 0.5rem;
}
.support {
  /* border: 2px solid red; */
  text-align: right;
  margin-left: 1rem;
}
.support .support-number {
  font-size: 2em;
}
.support .support-text {
  font-size: 0.8rem;
}
.logo {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  box-shadow: 1px 2px 5px black;
  margin: 1rem;
  cursor: pointer;
}

.icons {
  /* border: 2px solid red; */
  margin-right: 2rem;
  cursor: pointer;
}

.icons img {
  padding: 10px;
}

/* ---------------------------------- */
/*               NAVBAR               */
/* ---------------------------------- */

.navbar {
  /* border: 2px solid red; */
  display: flex;
  align-items: center;
  padding: 10px 50px;
  margin-left: 3rem;
  padding-bottom: 0rem;
}

.button {
  /* border: 2px solid blue; */
  display: flex;
  align-items: center;
  padding: 1rem;
  height: 40px;
  font-size: 1.3rem;
  background-color: #d9d9d9;
  border-radius: 5px;
  font-style: italic;
  gap: 1rem;
  padding-bottom: 1.8rem;
  padding-top: 1.8rem;
  cursor: pointer;
}

.nav {
   /* border: 2px solid orange;  */
}

li {
  display: inline-block;
  margin-left: 1rem;
  cursor: pointer;
}

/* ---------------------------------- */
/*               HEADER               */
/* ---------------------------------- */

header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  background-image: url(./images/stock.jpg);
  padding: 1rem 5rem;
  margin-top: 1rem;
  gap: 5rem;

}

.essential {
  background-color: #d5dee5;
  display: flex;
  align-items: center;
  border-radius: 5px;
  box-shadow: 5px 5px 10px black;
}

.essential-text {
  /* border: 2px solid red; */
  padding: 20px;
  font-style: italic;
  letter-spacing: 0.3px;
}

.lighting {
  background-color: #ffc868;
  width: 400px;
  height: 300px;
  overflow: hidden;
  /* "overflow" özelliği, bir alana sığmayacak kadar büyük içeriğe ne olacağını kontrol eder.Overflow özelliği, bir etiketin içeriği belirtilen alana sığmadığında içeriğin kırpılıp kırpılmayacağını veya kaydırma çubukları eklenip eklenmeyeceğini belirtir */
  position: relative;
  /* "position:relative" özelliği, normal konumuna göre konumlandırılmıştır. Relative olarak konumlandırılmış bir etiketin top, bottom, left ve right özelliklerinin ayarlanması, normal konumundan uzağa ayarlanmasına neden olacaktır. */
  border-radius: 5px;
  box-shadow: 5px 5px 10px black;
}

.lighting img {
  width: 100%;
  height: 300px;
  position: absolute;
  /* position:absolute; özelliği verdiğimizde, element en yakın ebeveyn elementine göre yeniden konumlanır. top, bottom, left, right ve z-index CSS özelliklerine göre konumu ebeveyn elementine göre ayarlanabilinir. Element web sayfasının normal akışında yer almaz. */
  bottom: 0;
}

.light {
  /* border: 2px solid red; */
  width: 80%;
  float: right;

  margin-top: 20px;
  font-style: italic;
  padding: 2rem;
}

/* ---------------------------------- */
/*              CATEGORY             */
/* ---------------------------------- */

.categorySection{
background-color: #AEA08D;
}

.cathegoryPart,
.product-part{
  padding: 2rem;
  font-size: 1.5rem;

}

.cathegories{
/* border: 2px solid red; */
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}

.cathegory{
  width: 20rem;
  height: 20rem;
  margin: 1rem;
  background-color: #eeecec;
  padding: 1rem 2px 1rem 1rem;
  border-radius: 10px;
  font-family: 'Josefin Slab', serif;
  transition: 0.5s;
  margin-top: 4rem;
  cursor: pointer;
}

.cathegory:hover{
transform: scale(1.08);
/* elementin yatay ve dikey boyutlarını bir arada değiştirmek için kullanılır. Scale özelliği, elementi orantılı bir şekilde büyütür veya küçültür, böylece elementin orantıları korunur. */
z-index: 2;

}

.cathegory img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 1rem ;
  border-radius: 2rem;
  justify-content: center;
  padding-right: 2rem;
  padding-bottom: 2rem;
  
}

/* ---------------------------------- */
/*               PRODUCT              */
/* ---------------------------------- */

.productSection{
  background-color: #eeecec;
}



.products{
  /* border: 2px solid red; */
  display: flex;
  flex-wrap:wrap ;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.product{
  padding-bottom: 0.6rem;
  margin-top: 3rem;
  margin-bottom: 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
  width: 15rem;
  height: 15rem;
  background-color: #D9D9D9;
  /* margin: 1rem; */
  text-align: center;
  box-shadow: 2px 2px 20px black;
  border-radius: 1rem;
  overflow: hidden;
  transition: 0.5s;
  cursor: pointer;
}
.product:hover{
  transform: scale(1.08);
  /* elementin yatay ve dikey boyutlarını bir arada değiştirmek için kullanılır. Scale özelliği, elementi orantılı bir şekilde büyütür veya küçültür */
  z-index:2;
}

.product img{
  width: 100%;
  height: 90%;
  object-fit: cover;
  /* object-fit özelliği, bir görsel veya video etiketlerinin kabına sığdırmak için nasıl yeniden boyutlandırılması gerektiğini belirtmek için 
  kullanılır. */

  /* cover - Görüntü en boy oranını korur ve verilen boyutu doldurur. Görüntü sığacak şekilde kırpılır */

}

/* ---------------------------------- */
/*               CONTACT              */
/* ---------------------------------- */

.contact{
  background-color: #AEA08D;
  display: flex;
  padding: 2rem;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

}

.expert{
  background-color: inherit;
  width: 50%;
  padding: 1rem;
}

.lookforExpert{
  font-family: "Bellota", system-ui;
  font-size: 2rem;
  line-height: 1.5;
}

.LeaveInfo{
margin-top: 1rem;
line-height: 1.5;

}

span{
color:  #ff7b00;
text-shadow: #909090 1px 1px;
}

.formSection{
  /* border: 2px solid red; */
  background-color: inherit;
  width: 40%;font-size: 1.5rem;
  
}

.formElement{
  margin: 1.5rem 1rem;
}

.formElement input{
width: 100%;
background-color: inherit;
padding: 0.5rem 0;
border: none;
border-bottom: 1px solid black;
}

.submit{
padding: 1rem;
border-radius: 5px;
width: 9rem;
height: 40px;
font-style: italic;
margin-left: 1rem;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
position: relative;
color: black;
font-weight: bold;
/* "position:relative" özelliği, normal konumuna göre konumlandırılmıştır. Relative olarak konumlandırılmış bir etiketin top, bottom, left ve right özelliklerinin ayarlanması, normal konumundan uzağa ayarlanmasına neden olacaktır. */
transition: color 0.4s linear;
/* rengin değisme suresi */


}
.submit:hover {
  color:  #ff7b00;
text-shadow: #909090 0.5px 0px;
  
}

/* web sitelerinde gezinirken, mouse imleciyle bir görselin üzerine geldiğinizde görsel büyür, ya da bir butonun üzerine geldiğinizde buton renk değiştirir, parlamaya başlar, işte bu harika özelliği yapmamızı sağlayan */

/* ---------------------------------- */
/*               FOOTER               */
/* ---------------------------------- */

.copyright{
display: flex;
justify-content: space-between;
/* border: 2px solid red; */
padding: 2rem;
align-items: center;
}

.left{
 /* background-color: red; */ 
}

.policy{
/* background-color: blue; */
display: flex;
gap: 1rem;
}

.policy a{
  text-decoration: none;
  color: inherit;
  /* Tüm elementlere (kalıtsallık özelliği olmayanlar dahil) inherit değeri atayabiliriz. inherit değeri atadığımız element üst elementinin değerlerini alacaktır. */
  border-bottom: 1px solid black;
}