* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* Gri Zemin ve Menü Başlangıç*/
#topbar {
  background-color: #f2f2f2;
  width: 100%;
  height: 30px;
  overflow: none;
}
#topbar_nav_bar {
  max-width: 1280px;
  height: 30px;
  margin: auto;
}
#topbar_menu > ul {
  list-style: none;
  margin-top: 5px;
  float: right;
}
#topbar_menu > ul > li {
  display: inline-block;
}
#topbar_menu > ul > li > a {
  color: black;
  margin-left: 30px;
  text-decoration: none;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 13px;
}
#topbar_menu > ul > li > a:hover {
  color: crimson;
  transition: 0.5s;
}
#topbar_menu > ul > li > a > i {
  padding-right: 5px;
}
/* Gri Zemin ve Menü Bitiş*/

/* Logo, Menü, İletişim Başlangıç*/

#topcontainer {
  max-width: 1280px;
  height: 100px;
  margin: auto;
  overflow: none;
  margin-top: 2px;
}
#Logo_Box {
  width: 15%;
  height: 80px;
  float: left;
  margin-top: 20px;
}
#menu_box {
  width: 70%;
  height: 80px;
  float: left;
  margin-top: 10px;
}
ul.top_menu {
  list-style: none;
  margin-left: 200px;
  margin-top: 20px;
}
ul.top_menu > li {
  float: left;
  position: relative;
}
ul.top_menu > li > a {
  display: block;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 15px;
  color: black;
  padding: 0px 15px;
  line-height: 50px;
  text-decoration: none;
}
ul.top_menu > li > a > i {
  font-size: 15px;
  float: right;
  margin-top: 18px;
  margin-left: 5px;
}
ul.top_menu > li > a:hover {
  color: crimson;
  transition: 0.5s;
}
ul.top_menu ul {
  background-color: white;
  width: 170px;
  height: 270px;
  position: absolute;
  top: 50px;
  left: -30px;
  visibility: hidden;
  transition: 250ms all;
  list-style: none;
  z-index: 1;
  border: 0.5px solid black;
  border-radius: 5px;
  text-align: center;
}
ul.top_menu ul li a {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  display: inline-block;
  padding: 6px;
  color: grey;
  text-decoration: none;
  font-size: 15px;
}
ul.top_menu ul li a:hover {
  color: crimson;
  transition: 0.5s;
}
ul.top_menu > li:hover ul {
  visibility: visible;
  opacity: 1;
}
ul.top_menu ul li a h3 {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  display: inline-block;
  color: black;
  font-weight: bold;
  font-size: 15px;
  margin-top: 15px;
  margin-bottom: 5px;
}
ul.top_menu ul li a h3:hover {
  color: crimson;
  transition: 0.5s;
}
#cellcenter_box {
  width: 15%;
  height: 80px;
  float: right;
  overflow: none;
  margin-top: 20px;
}
#cellcenter_box_img > img {
  margin-top: 12px;
  margin-left: 20px;
}
#cellcenter_box_img > h1 {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  margin-top: 24px;
  text-align: left;
  float: right;
  color: crimson;
}
/* Logo, Menü, İletişim Bitiş*/

/*Search Alanı, Kırmızı Bant, Kullanıcı iconları Başlangıç*/

#kategori_bar {
  background-color: crimson;
  width: 100%;
  height: 50px;
  overflow: none;
}
#kagetori_container {
  max-width: 1280px;
  height: 50px;
  margin: auto;
  overflow: none;
}
#kategori_box {
  width: 20%;
  height: 50px;
  background-color: rgb(12, 10, 10);
  float: left;
}
#kategori_box > nav > ul {
  list-style: none;
  float: left;
  margin-top: 15px;
  margin-left: 18px;
}
#kategori_box > nav > ul > li {
  display: inline-block;
}
#kategori_box > nav > ul > li > a {
  color: white;
  text-decoration: none;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
}
#kategori_box > nav > ul > li > a:hover {
  color: crimson;
  transition: 0.5s;
}
#kategori_box > nav > ul > li > a > i {
  margin-right: 5px;
}
#search_box {
  width: 45%;
  height: 50px;
  float: left;
  overflow: none;
}
#search_box > input {
  width: 87%;
  height: 50px;
  float: left;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 16px;
  padding-left: 20px;
  background-color: rgb(236,236,236);
  border:0px;
  color: crimson;
  
}
#search_box > ::placeholder{
  font-weight: bold;
  color: black;
}
#search_box > a > button {
  color: black;
  height: 50px;
  width: 13%;
  float: left;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 16px;
  border:0px;
  background-color: rgb(220,220,220);
}
#search_box > a > button:hover {
  color: crimson;

}
#user_icon {
  width: 35%;
  height: 50px;
  background-color: rgb(12, 10, 10);
  float: right;
}
#favorite {
  border-right: 2px solid white;
  width: 33%;
  height: 50px;
  float: left;
}
#favorite > ul {
  list-style: none;
  float: left;
  margin-top: 15px;
  margin-left: 15px;
}
#favorite > ul > li {
  display: inline-block;
}
#favorite > ul > li > a {
  color: white;
  text-decoration: none;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 17px;
}
#favorite > ul > li > a:hover {
  color: crimson;
  transition: 0.5s;
}
#favorite > ul > li > a > i {
  margin-right: 5px;
}
#message {
  border-right: 2px solid white;
  width: 33%;
  height: 50px;
  float: left;
}
#message > ul {
  list-style: none;
  float: left;
  margin-top: 15px;
  margin-left: 5px;
}
#message > ul > li {
  display: inline-block;
}
#message > ul > li > a {
  color: white;
  text-decoration: none;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 16px;
}
#message > ul > li > a:hover {
  color: crimson;
  transition: 0.5s;
}
#message > ul > li > a > i {
  margin-right: 5px;
}
#basket {
  border-right: 2px solid white;
  width: 34%;
  height: 50px;
  float: left;
}
#basket > ul {
  list-style: none;
  float: left;
  margin-top: 15px;
  margin-left: 25px;
}
#basket > ul > li {
  display: inline-block;
}
#basket > ul > li > a {
  color: white;
  text-decoration: none;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 17px;
}
#basket > ul > li > a:hover {
  color: crimson;
  transition: 0.5s;
}
#basket > ul > li > a > i {
  margin-right: 5px;
}
/*Search Alanı, Kırmızı Bant, Kullanıcı iconları Bitiş*/

#container {
  background-color: gainsboro;
  width: 100%;
  height: 450px;
}
#container_box {
  max-width: 1280px;
  height: 450px;
  margin: auto;
  overflow: none;
}
#container_kategori_box {
  width: 20%;
  height: 450px;
  background-color: white;
  float: left;
}
#container_kategori_box_menu > ul {
  list-style: none;
}
#container_kategori_box_menu > ul > li {
  width: 100%;
  height: 35px;
  margin-top: 6px;
  margin-bottom: 6px;
  line-height: 25px;
  padding-left: 30px;
  border-bottom: 2px solid #f2f2f2;
}
#container_kategori_box_menu > ul > li > a {
  color: black;
  text-decoration: none;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 17px;
}
#container_kategori_box_menu > ul > li > a:hover {
  color: crimson;
  margin-left: 20px;
  transition: 0.5s;
}
#container_kategori_box_menu > ul > li > a > i {
  float: right;
  font-size: 20px;
  margin-right: 10px;
}
ul.kategori_menu ul {
  background-color: white;
  width: 720px;
  height: 285px;
  position: relative;
  top: -30px;
  left: 225px;
  visibility: hidden;
  transition: 250ms all;
  list-style: none;
  z-index: 1;
  border-bottom: 2px solid #f2f2f2
  border-radius: 5px;
}
ul li .yanmenu {
  display: inline-block;
  margin-top: 5px;
  margin-left: 50px;
}
ul li .yanmenu > li {
  margin-top: 10px;
}
ul.kategori_menu ul li a {
  text-decoration: none;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  color: grey;
}
ul.kategori_menu ul li a:hover {
  color: crimson;
  transition: 0.5s;
}
ul.kategori_menu > li:hover ul {
  visibility: visible;
  opacity: 1;
}
ul.kategori_menu ul li > a > h3 {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  color: black;
  font-weight: bold;
  font-size: 20px;
  border-bottom: 2px solid #f2f2f2;
}
ul.kategori_menu ul li a h3:hover {
  color: crimson;
  transition: 0.5s;
}
.slider_container {
  position: relative;
  width: 722px;
  height: 450px;
  overflow: hidden;

}
.slider_content {
  position: absolute;
  width: 500%;
  left: 0px;
  animation: slider 15s infinite
}
.slider_content:hover {
  animation-play-state: paused;
}
.slider_item {
  width: 722px;
  float: left;
}
.slider_item > img {
  width: 722px;
  float: left;
}
@keyframes slider {
  0% {
    transform: translateX(0px);
  }
  10% {
    transform: translateX(-20%);
  }
  20% {
    transform: translateX(-20%);
  }
  30% {
    transform: translateX(-40%);
  }
  40% {
    transform: translateX(-40%);
  }
  50% {
    transform: translateX(-60%);
  }
  60% {
    transform: translateX(-60%);
  }
  70% {
    transform: translateX(-80%);
  }
  80% {
    transform: translateX(-80%);
  }
  90% {
    transform: translateX(0px);
  }
}
.kategori_banner{
  width: 300px;
  height: 450px;
  position: relative;
  bottom: 450px;
  left: 980px;
  z-index: 1;
  transition-timing-function: ease-in;
}
.kategori_banner >  a:hover > img{
  margin-left: 15px;
  transition: 0.7s;
}
#kategori_name ul > li > ul {
  width: 1240px;
  height: 50px;
  background-color: gainsboro;
  border-radius: 0px 0px 10px 10px;
  margin-top: 15px;
  list-style: none;
  display: none;
}

#kategori_name ul > li:hover > ul {
  display: inline-block;
}

#kategori_name ul > li > ul > li {
  display: inline-block;
  margin: 15px;
  padding-left: 60px;
}
#kategori_name ul > li > ul > li > a {
  color: black;
  text-decoration: none;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
}
#kategori_name ul > li > ul > li:hover a {
  visibility: visible;
  color: crimson;
  transition: 0.5s;
}
#apple_content {
  max-width: 1280px;
  margin: auto;
  height: 900px;
  margin-top: 40px;
}
#apple_banner > img {
  z-index: -1;
}
#apple_content_kategori {
  width: 15%;
  height: 900px;
  border: 1px solid black;
  border-radius: 5px;
  margin-top: 5px;
  float: left;
}
#apple_content_kategori > h1 {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  margin-top: 30px;
  margin-left: 10px;
  color: crimson;
}
#apple_content_kategori > h3 {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 15px;
  font-weight: bold;
  margin: auto;
  text-align: left;
  color: grey;
  margin-left: 20px;
  padding-top: 5px;
}
#box1 {
  width: 240px;
  height: 400px;
  float: left;
  margin-top: 5px;
  margin-left: 25px;
  background: url("../img/iphone_13_Yesil_On.jpg") no-repeat;
}
#box1:hover {
  background: url("../img/iphone_13_Yesil_Arka.jpg") no-repeat;
}
#box1 > h3 {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  text-decoration: none;
  text-align: center;
  color: crimson;
  font-weight: bold;
  font-size: 18px;
  margin-top: 305px;
}
#box1 > p {
  text-decoration: none;
  text-align: center;
  color: black;
  font-weight: bold;
  font-size: 20px;
  padding-top: 3px;
}
#box2 {
  width: 240px;
  height: 400px;
  float: left;
  margin-top: 5px;
  margin-left: 25px;
  background: url("../img/iphone_13_Pembe_On.jpg") no-repeat;
}
#box2:hover {
  background: url("../img/iphone_13_Pembe_Arka.jpg") no-repeat;
}
#box2 > h3 {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  text-decoration: none;
  text-align: center;
  color: crimson;
  font-weight: bold;
  font-size: 18px;
  margin-top: 305px;
}
#box2 > p {
  text-decoration: none;
  text-align: center;
  color: black;
  font-weight: bold;
  font-size: 20px;
  padding-top: 3px;
}
#box3 {
  width: 240px;
  height: 400px;
  float: left;
  margin-top: 5px;
  margin-left: 25px;
  background: url("../img/iphone_13_Kırmızı_On.jpg") no-repeat;
}
#box3:hover {
  background: url("../img/iphone_13_Kırmızı_Arka.jpg") no-repeat;
}
#box3 > h3 {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  text-decoration: none;
  text-align: center;
  color: crimson;
  font-weight: bold;
  font-size: 18px;
  margin-top: 305px;
}
#box3 > p {
  text-decoration: none;
  text-align: center;
  color: black;
  font-weight: bold;
  font-size: 20px;
  padding-top: 3px;
}
#box4 {
  width: 240px;
  height: 400px;
  float: left;
  margin-top: 5px;
  margin-left: 25px;
  background: url("../img/iphone_13_Gold_On.jpg") no-repeat;
}
#box4:hover {
  background: url("../img/iphone_13_Gold_Arka.jpg") no-repeat;
}
#box4 > h3 {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  text-decoration: none;
  text-align: center;
  color: crimson;
  font-weight: bold;
  font-size: 18px;
  margin-top: 305px;
}
#box4 > p {
  text-decoration: none;
  text-align: center;
  color: black;
  font-weight: bold;
  font-size: 20px;
  padding-top: 3px;
}
.button {
  background-color: black;
  border: none;
  color: white;
  border-radius: 10px;
  padding: 10px 27px;
  display: inline-block;
  text-align: center;
  margin-left: 40px;
  margin-top: 5px;
  text-decoration: none;
  font-size: 16px;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  cursor: pointer;
}
a.button:hover {
  background-color: crimson;
  color: white;
}
.apple_search_box {
  width: 100%;
  height: 50px;
  float: left;
  margin-left: 10px;
  margin-top: 15px;
}
.apple_search_box > input {
  width: 60%;
  height: 50px;
  float: left;
}

.apple_search_box > button {
  color: black;
  height: 50px;
  width: 30%;
  float: left;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 16px;
}
#tel_marka_ad {
  color: black;
  height: 40px;
  width: 100%;
  float: left;
  margin-left: 10px;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 20px;
  margin-top: 20px;
  margin-bottom: 120px;
}
#tel_urun_ad {
  color: black;
  height: 40px;
  width: 100%;
  float: left;
  margin-left: 10px;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 20px;
  margin-top: 20px;
  margin-bottom: 120px;
}
/*--------------------------CONTAİNER DİV ZEYNEL------------------------------------------------------------------------*/
#ozelcontainer {
  width: 1280px;
  height: 400px;
  margin: auto;
  margin-top: 30px;
}
.ozelcontainer-Baslık {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 25px;
}
.hr-line {
  width: 200px;
  height: 2px;
  background: crimson;
  border: 2px solid crimson;
}
.hr-line-2 {
  width: 1080px;
  height: 1px;
  background: grey;
  border: 0.5px solid grey;
  margin-left: 198px;
}
#foto1 {
  width: 250px;
  height: 325px;
  padding: 15px;
  box-shadow: 0px 10px 10px -10px;
  float: left;
  margin-left: 5px;
}
.foto1-cerceve {
  width: 210px;
  height: 30px;
  text-align: center;
  padding-top: 3px;
}
.foto1-cerceve > a {
  text-decoration: none;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 20px;
  color: black;
  font-weight: bold;
}
.foto1-cerceve:hover a {
  background-color: black;
  color: white;
  padding: 4px 50px;
  font-weight: bold;
  transition: 0.7s;
}
/*----------------------------------*/
#firsatcontainer {
  width: 1280px;
  height: 650px;
  margin: auto;
}
#firsatcontainer-left {
  margin-top: 15px;
  float: left;
  width: 75%;
  height: 400px;
  border: 2px solid #f2f2f2;
}
#firsatcontainer-bottom {
  float: left;
  width: 75%;
  height: 200px;
  border: 2px solid #f2f2f2;
}
#firsatcontainer-right {
  margin-top: 15px;
  float: right;
  width: 20%;
  height: 600px;
  border: 2px solid #f2f2f2;
}
#firsatcontainer-left-button {
  float: left;
  width: 5%;
  height: 400px;
  padding-left: 5px;
  padding-top: 150px;
}
#firsatcontainer-right-button {
  float: right;
  width: 5%;
  height: 400px;
  padding-left: 5px;
  padding-top: 150px;
}
.firsatcontainer-left-img {
  float: left;
  padding-top: 25px;
  width: 30%;
  height: 400px;
}
.firsatcontainer-left-icerik {
  float: left;
  padding-top: 25px;
  width: 60%;
  height: 400px;
}
.firsatcontainer-left-icerik > h3 {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 22px;
  color: black;
  font-weight: bold;
  padding-top: 15px;
}
.firsatcontainer-left-yazı-star {
  margin-top: 20px;
}
.firsatcontainer-left-icerik > h4 {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 16px;
  color: crimson;
  font-weight: bold;
  padding-top: 15px;
}
.firsatcontainer-left-yazı {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 14px;
  color: grey;
  font-weight: bold;
  padding-top: 15px;
  padding-right: 20px;
  text-align: justify;
  margin-left: 5px;
}
h3.fiyat {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 22px;
  color: black;
  font-weight: bold;
  padding-top: 15px;
}
.firsatcontainer-box {
  width: 100%;
  height: 30px;
  background-color: grey;
}
.firsatcontainer-box > h3 {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 16px;
  color: white;
  font-weight: bold;
  padding-left: 40px;
  padding-top: 5px;
}
.firsatcontainer-box > h3 > i {
  padding-right: 10px;
}
.firsatcontainer-box-item {
  width: 250px;
  height: 100px;
  margin-top: 15px;
  margin-left: 2px;
  border-bottom: 2px solid #f2f2f2;
}
.firsatcontainer-box-item-img {
  float: left;
}
.firsatcontainer-box-item-yazı > a {
  text-decoration: none;
}
.firsatcontainer-box-item-yazı > a > h3 {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 15px;
  color: grey;
  font-weight: bold;
  padding-top: 20px;
  text-decoration: none;
  padding-top: 24px;
}
.firsatcontainer-box-item-yazı > a > h3:hover {
  font-weight: bold;
  color: crimson;
}
.firsatcontainer-bottom-img {
  width: 130px;
  height: 130px;
  border: 2px solid #f2f2f2;
  float: left;
  margin-left: 25px;
  margin-top: 15px;
}
.firsatcontainer-bottom-img:hover {
  border: 2px solid crimson;
  border-radius: 5px;
}
.firsatcontainer-bottom-img > a {
  text-decoration: none;
  float: left;
  padding-top: 10px;
  padding-left: 10px;
  color: grey;
}

.firsatcontainer-bottom-img > a > h3 {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 14px;
  color: grey;
  font-weight: bold;
  padding-top: 12px;
}
.firsatcontainer-bottom-img > a > h3:hover {
  color: crimson;
}
#busra {
  width: 1280px;
  height: 200px;
  margin: auto;
  margin-top: 20px;
}
#busrasol {
  width: 620px;
  height: 200px;
  float: left;
}
#busrasag {
  width: 620px;
  height: 200px;
  float: right;
}
/* -----Büşra Hanım Login ----- */

#account {
  max-width: 1280px;
  height: 450px;
  margin: auto;
  margin-top: 100px;
}

#login {
  width: 630px;
  height: 450px;
  float: left;
  padding-top: 20px;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 16px;
}
.line {
  width: 620px;
  height: 3px;
  background: crimson;
  margin-top: 10px;
  margin-bottom: 20px;
}
#mailadresi {
  width: 620px;
  height: 30px;
  float: left;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 16px;
  background-color: rgb(237, 237, 237);
  margin-top: 10px;
  margin-bottom: 20px;
  text-align: left;
  padding-left: 15px;
}
#parola {
  width: 620px;
  height: 30px;
  float: left;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 16px;
  background-color: rgb(237, 237, 237);
  margin-top: 5px;
  text-align: left;
  padding-left: 15px;
  margin-bottom: 20px;
}
.login_button {
  margin-top: 10px;
  width: 70px;
  height: 30px;
  background-color: crimson;
  color: white;
  border-radius: 3px;
  margin-left: 16px;
}
.login_button:hover {
  background-color: black;
  color: white;
}
#login > form > a {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 16px;
  text-decoration: none;
  color: black;
  float: left;
  margin-left: 20px;
}
#login > form > a:hover {
  color: crimson;
}
#register {
  width: 630px;
  height: 450px;
  float: right;
  padding-top: 20px;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 16px;
}
.register_button {
  margin-top: 10px;
  width: 100px;
  height: 30px;
  background-color: crimson;
  color: white;
  border-radius: 3px;
  margin-left: 16px;
}
.register_button:hover {
  background-color: black;
  color: white;
}
.hesap_button {
  width: 200px;
  height: 30px;
  background-color: crimson;
  color: white;
  border-radius: 3px;
  margin-top: 30px;
}
.hesap_button:hover {
  background-color: black;
  color: white;
}
#hesap {
  width: 630px;
  height: 450px;
  float: right;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 16px;
}
.hesapbox {
  width: 500px;
  height: 300px;
  margin-top: 35px;
  margin-left: 30px;
}
.hesapbox-baslik {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 20px;
  color: crimson;
}
.line-2 {
  width: 600px;
  height: 3px;
  background: crimson;
  margin-bottom: 20px;
  margin-top: 10px;
}
.hesapbox-yazi {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 20px;
  padding-top: 10px;
  margin-top: 5px;
}
.login_button > a {
  text-decoration: none;
}
.login_button a:hover {
  background-color: black;
  color: white;
}
/* -----Büşra Hanım Login ----- */
#footer-bg {
  width: 100%;
  height: 250px;
  background-color: rgb(232, 232, 232);
}
#footer-1 {
  width: 1280px;
  height: 200px;
  margin: auto;
  margin-top: 50px;
  margin-bottom: 100px;
}
#footer-box-1 {
  width: 250px;
  height: 220px;
  float: left;
  margin-left: 15px;
  margin-top: 10px;
}
.footer-baslik {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 18px;
  margin-left: 33px;
  margin-top: 15px;
}
#footer-box-1 > ul {
  list-style: none;
}
#footer-box-1 > ul > li {
  margin-top: 13px;
}
#footer-box-1 ul li a {
  text-decoration: none;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 14px;
  margin-left: 15px;
  color: grey;
  opacity: 0.7;
}
#footer-box-1 ul li a i {
  padding-right: 10px;
}
#footer-box-1 > ul > li > a:hover {
  margin-left: 25px;
  color: crimson;
  opacity: 1;
  transition: 0.6s;
}
#footer-2 {
  width: 1280px;
  height: 300px;
  background-color: rgb(48, 47, 47);
}
#footer-bottom {
  width: 100%;
  height: 100px;
  background-color: rgb(89, 89, 89);
}
#footer-bottom-icerik {
  width: 1280px;
  height: 100px;
  margin: auto;
}
.footer-bottom-icerik-baslik {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 15px;
  margin-left: 400px;
  color: white;
  padding-top: 15px;
}
#footer-bottom-icerik > img {
  margin-left: 450px;
  margin-top: 20px;
}
/* --------------------*/
#sepetim_container {
  width: 1280px;
  height: 200px;
  margin: auto;
  margin-top: 100px;
  margin-bottom: 125px;
}
#tablo {
  width: 1280px;
  height: 180px;
  border: 0.5px solid grey;
}
.tablo-1 {
  width: 10%;
  height: 40px;
  border: 0.5px solid grey;
  float: left;
}
.tablo-2 {
  width: 20%;
  height: 40px;
  border: 0.5px solid grey;
  float: left;
}
.tablo-3 {
  width: 30%;
  height: 40px;
  border: 0.5px solid grey;
  float: left;
}
.tablo-1 > h3 {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 16px;
  padding-top: 10px;
  padding-left: 40px;
}
.tablo-2 > h3 {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 16px;
  padding-top: 10px;
  padding-left: 100px;
}
.tablo-3 > h3 {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 16px;
  padding-top: 10px;
  padding-left: 160px;
}
.tablo-1_alt {
  width: 10%;
  height: 85px;
  border: 0.5px solid grey;
  float: left;
}
.tablo-1_alt > a > i {
  margin-top: 25px;
  margin-left: 50px;
  font-size: 25px;
}
.tablo-1_alt > a > i:hover {
  color: crimson;
  transition: 0.3s;
}
.tablo-2_alt {
  width: 20%;
  height: 85px;
  border: 0.5px solid grey;
  float: left;
}
.tablo-3_alt {
  width: 30%;
  height: 85px;
  border: 0.5px solid grey;
  float: left;
}
.tablo-1_alt > h3 {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 16px;
  margin-top: 30px;
  margin-left: 35px;
  color: grey;
}
.tablo-2_alt > h3 {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 80px;
  margin-left: 50px;
}
.tablo-3_alt > h3 {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 16px;
  padding-top: 10px;
  padding-left: 10px;
}
.tablo-2_alt > a > img {
  width: 80px;
  height: 80px;
  margin-left: 85px;
}
.tablo-2_alt > h3 > a {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 18px;
  text-decoration: none;
  color: black;
}
.tablo-2_alt > h3 > a:hover {
  color: crimson;
  transition: 0.3s;
}
.UrunAdet {
  width: 100px;
  height: 30px;
  margin-top: 25px;
  margin-left: 145px;
}
.UrunAdetSol {
  width: 25px;
  height: 25px;
  float: left;
  margin-top: 2px;
  background-color: grey;
}
.UrunAdetSag {
  width: 25px;
  height: 25px;
  float: right;
  margin-top: 2px;
  background-color: grey;
}
.UrunAdetOrta {
  width: 50px;
  height: 25px;
  float: left;
  margin-top: 2px;
  background-color: rgb(238, 238, 238);
  border: 0px;
}
.indirim-box > input {
  width: 200px;
  height: 30px;
  float: left;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 16px;
  background-color: rgb(237, 237, 237);
  margin-top: 10px;
  margin-bottom: 20px;
  text-align: left;
  padding-left: 15px;
  margin-right: 5px;
}
.kupon_button {
  width: 150px;
  height: 30px;
  background-color: crimson;
  color: white;
  border-radius: 3px;
  margin-top: 10px;
}
.kupon_button:hover {
  background-color: black;
  color: white;
}
.sepet_guncelle_button {
  width: 150px;
  height: 30px;
  background-color: crimson;
  color: white;
  border-radius: 3px;
  margin-top: 10px;
}
.sepet_guncelle_button:hover {
  background-color: black;
  color: white;
}
.odeme_buton {
  width: 200px;
  height: 30px;
  background-color: crimson;
  color: white;
  border-radius: 3px;
  margin-top: 10px;
  float: right;
}
.odeme_buton:hover {
  background-color: black;
  color: white;
}
#fashion-container {
  max-width: 1280px;
  height: 650px;
  margin: auto;
  margin-top: 30px;
}
#fashion-menu {
  width: 1275px;
  height: 30px;
  background-color: rgb(242, 242, 242);
}
#fashion-menu > a {
  text-decoration: none;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 16px;
  color: black;
  line-height: 30px;
  float: right;
  margin-right: 105px;
}
#fashion-menu > a:hover {
  color: crimson;
}
#fashion-tek {
  width: 200px;
  height: 600px;
  float: left;
}
#fashion-box {
  width: 215px;
  height: 300px;
  float: left;
  border: 2px solid #f2f2f2;
}
#fashion-tek > a > img:hover {
  opacity: 0.6;
}
#fashion-box > a > img:hover {
  opacity: 0.5;
}
.fashion-box-baslik {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 16px;
  margin-left: 13px;
  text-align: center;
}
.fashion-box-sepet {
  margin-left: 45px;
}
a.fashion-button {
  background-color: black;
  border: none;
  color: white;
  border-radius: 10px;
  padding: 5px 22px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  position: relative;
  z-index: 1;
  bottom: 140px;
  opacity: 0;
}
a.fashion-button:hover {
  background-color: crimson;
  font-weight: bold;
  color: white;
  opacity: 1;
}
#urun-detay-page {
  width: 1280px;
  height: 520px;
  margin: auto;
  margin-top: 50px;
}
#urun-detay-kategori {
  width: 15%;
  height: 500px;
  float: left;
  border: 2px solid #f2f2f2;
  margin-right: 5px;
}
.urun-detay-kategori-box {
  width: 100%;
  height: 50px;
  background-color: #f2f2f2;
}
.urun-detay-kategori-icerik {
  width: 100%;
  height: 50px;
  border-bottom: 2px solid #f2f2f2;
}
.urun-detay-kategori-icerik > a {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  text-decoration: none;
  color: grey;
  line-height: 50px;
  margin-left: 16px;
}
.urun-detay-kategori-icerik > a:hover {
  color: crimson;
}
.urun-detay-kategori-box > h3 {
  color: black;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 18px;
  line-height: 50px;
  margin-left: 15px;
}
.urun-detay-kategori-box > h3 > i {
  padding-right: 8px;
}
#urun-detay-genel {
  width: 84%;
  height: 500px;
  float: left;
  margin-left: 5px;
}
#urun-detay-genel-resim-cerceve {
  width: 40%;
  height: 500px;
  border: 2px solid #f2f2f2;
  float: left;
  margin-left: 5px;
}
#urun-detay-genel-kucuk-resim-genel {
  width: 12%;
  height: 500px;
  float: left;
  text-align: center;
}
.urun-detay-genel-kucuk-resim > a > img {
  width: 110px;
  height: 110px;
  border: 2px solid #f2f2f2;
  margin-top: 8px;
}
#urun-detay-kategori-icerik {
  width: 47%;
  height: 500px;
  float: right;
}
.urun-detay-kategori-baslik {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 20px;
}

#urun-detay-kategori-icerik-item-color {
  width: 400px;
  height: 60px;
  margin-top: 5px;
}
.urun-detay-kategori-icerik-item-baslik {
  margin-right: 40px;
  padding-left: 10px;
  margin-top: 20px;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 16px;
  float: left;
}
#urun-detay-kategori-icerik-color-box-1 {
  width: 30px;
  height: 30px;
  float: left;
  margin-top: 15px;
  margin-right: 10px;
  background-color: rgb(77, 77, 77);
}
#urun-detay-kategori-icerik-color-box-2 {
  width: 30px;
  height: 30px;
  float: left;
  margin-top: 15px;
  margin-right: 10px;
  background-color: grey;
}
#urun-detay-kategori-icerik-color-box-3 {
  width: 30px;
  height: 30px;
  float: left;
  margin-top: 15px;
  margin-right: 10px;
  background-color: green;
}
#urun-detay-kategori-icerik-color-box-4 {
  width: 30px;
  height: 30px;
  float: left;
  margin-top: 15px;
  margin-right: 10px;
  background-color: red;
}
#urun-detay-kategori-icerik-item-size {
  width: 400px;
  height: 60px;
  margin-top: 5px;
  margin-bottom: 10px;
  padding-left: 20px;
}
.urun-detay-kategori-icerik-item-size-baslik {
  margin-right: 40px;
  padding-left: 10px;
  margin-top: 20px;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 16px;
  float: left;
}
#urun-detay-kategori-icerik-size-box-1 {
  width: 30px;
  height: 30px;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  float: left;
  margin-top: 15px;
  margin-right: 10px;
  border: 0.5px solid grey;
  padding-left: 8px;
  padding-top: 6px;
}
#urun-detay-kategori-icerik-size-box-2 {
  width: 30px;
  height: 30px;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  float: left;
  margin-top: 15px;
  margin-right: 10px;
  border: 0.5px solid grey;
  padding-left: 6px;
  padding-top: 6px;
}
#urun-detay-kategori-icerik-size-box-3 {
  width: 30px;
  height: 30px;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  float: left;
  margin-top: 15px;
  margin-right: 10px;
  border: 0.5px solid grey;
  padding-left: 6px;
  padding-top: 6px;
}
#urun-detay-kategori-icerik-size-box-4 {
  width: 30px;
  height: 30px;
  font-weight: bold;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 16px;
  float: left;
  margin-top: 15px;
  margin-right: 10px;
  border: 0.5px solid grey;
  padding-left: 6px;
  padding-top: 6px;
}
#urun-detay-kategori-buton-icerik {
  width: 500px;
  height: 90px;
  margin-left: 5px;
}
.UrunDetayAdetSol {
  width: 25px;
  height: 25px;
  float: left;
  margin-top: 2px;
  background-color: grey;
}
.UrunDetayAdetSag {
  width: 25px;
  height: 25px;
  float: left;
  margin-top: 2px;
  background-color: grey;
}
.UrunDetayAdetOrta {
  width: 50px;
  height: 25px;
  float: left;
  margin-top: 2px;
  background-color: rgb(238, 238, 238);
  border: 0px;
}
a.urundetaysepet-button {
  background-color: #f2f2f2;
  border: none;
  color: grey;
  padding: 5px 22px;
  border-radius: 3px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  position: relative;
  left: 10px;
  top: 6px;
}
a.urundetaysepet-button:hover {
  color: crimson;
  border: 0.3px solid crimson;
  font-weight: bold;
}
a.buynow-button {
  background-color: #f2f2f2;
  border: none;
  color: grey;
  padding: 5px 22px;
  border-radius: 3px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  position: relative;
  left: 160px;
  top: -13px;
}
a.buynow-button:hover {
  color: crimson;
  border: 0.3px solid crimson;
}
a.favori-button {
  background-color: #f2f2f2;
  border: none;
  color: grey;
  padding: 5px 22px;
  border-radius: 3px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  position: relative;
  left: 0px;
  top: 10px;
}
a.favori-button:hover {
  color: crimson;
  border: 0.3px solid crimson;
}
a.karsilastirma-button {
  background-color: #f2f2f2;
  border: none;
  color: grey;
  padding: 5px 22px;
  border-radius: 3px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  position: relative;
  left: 200px;
  top: -9px;
}
a.karsilastirma-button:hover {
  color: crimson;
  border: 0.3px solid crimson;
}
.urun-detay-kategori-icerik-share-name > a > i {
  color: grey;
  font-size: 30px;
  margin-top: 12px;
  margin-left: 10px;
}
.urun-detay-kategori-icerik-share-name > a > i:hover {
  color: crimson;
}
.urun-detay-kategori-icerik-link-name > a {
  text-decoration: none;
  color: grey;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 16px;
  position: relative;
  top: 20px;
  right: 30px;
}
#urun-detay-aciklama-page {
  width: 1280px;
  height: 600px;
  margin: auto;
}
#urun-detay-firsatcontainer-left {
  float: left;
  width: 20%;
  height: 600px;
  border: 2px solid #f2f2f2;
}
#urun-detay-firsatcontainer-left-button {
  float: left;
  width: 5%;
  height: 400px;
  padding-left: 5px;
  padding-top: 150px;
}
#urun-detay-firsatcontainer-left-button {
  float: right;
  width: 5%;
  height: 400px;
  padding-left: 5px;
  padding-top: 150px;
}
.urun-detay-firsatcontainer-left-img {
  float: left;
  padding-top: 25px;
  width: 30%;
  height: 400px;
}
#urun-detay-aciklama {
  float: left;
  width: 75%;
  height: 250px;
  float: right;
}
.urun-detay-aciklama-menu > ul {
  width: 100%;
  height: 50px;
  list-style: none;
}
.urun-detay-aciklama-menu > ul > li {
  display: inline-block;
  line-height: 50px;
  background-color: #f2f2f2;
  padding: 0px 34px;
  float: left;
}
.urun-detay-aciklama-menu > ul > li > a {
  text-decoration: none;
  color: grey;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 17px;
}
.urun-detay-aciklama-menu > ul > li a:hover {
  color: crimson;
  transition: 0.5s;
}

.urun-detay-aciklama-baslik {
  margin-top: 15px;
  margin-left: 15px;
  margin-bottom: 15px;
  color: grey;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 18px;
}
.urun-detay-aciklama-icerik {
  margin-top: 15px;
  margin-left: 15px;
  margin-bottom: 15px;
  margin-right: 15px;
  color: grey;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 16px;
  text-align: justify;
}
#urun-detay-ilgili-pages {
  float: left;
  width: 75%;
  height: 350px;
  margin-top: 5px;
  float: right;
  padding-top: 5px;
}
.urun-detay-hr-line {
  width: 200px;
  height: 2px;
  background: crimson;
  border: 2px solid crimson;
}
.urun-detay-hr-line-2 {
  width: 760px;
  height: 1px;
  background: grey;
  border: 0.5px solid grey;
  margin-left: 198px;
}
#urun-detay-ilgili-pages #fashion-box {
  margin-top: 6px;
  margin-left: 1px;
  border: 2px solid #f2f2f2;
}