@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

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

body {
  font-family: "poppins";
  background-color: #bdcfeb;
}

/* Header */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  /* grabient.com */
  background-image: linear-gradient(44deg, #7d9999 0%, #b5fffc 100%);
  z-index: 1000;
  position: fixed;
  width: 100%;
}
header h1 {
  text-shadow: 0 0 30px #b5fffc;
  cursor: pointer;
}
header input {
  padding: 10px 20px;
  border-radius: 10px;
}
header div {
  display: flex;
  gap: 20px;
}
header div button {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  color: white;
}

header div button:hover {
  transform: scale(1.2);
  transition: 1s ease-in-out;
}
header div button:nth-child(1) {
  background: black;
}
header div button:nth-child(2) {
  background: blue;
}
header div button:nth-child(3) {
  background: red;
}

/* Kategoriler */

section {
  padding: 50px;
}
section h1 {
  padding: 30px;
  font-size: 30px;
}
.categories {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin-top: 70px;
}

.category-card {
  margin-top: -40px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  box-shadow: 0 0 30px rgba(20, 20, 20, 0.3);
  cursor: pointer;
}
.category-card:hover {
  transform: scale(1.2);
  transition: 1s ease-in-out;
}

.category-card img {
  width: 100%;
  border-radius: 10px;
}

.category-card p {
  position: absolute;
  bottom: 10px;
  background: white;
  width: 70%;
  text-align: center;
  padding: 10px;
  border-radius: 10px;
  font-weight: 600;
  box-shadow: 2px 2px 10px black;
}

/* Ürünler Kısmı */
.products {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 120px;
  margin-top: 40px;
  cursor: pointer;
}

@media (max-width: 1100px) {
  .products {
    justify-content: center;
    gap: 40px;
  }
}

.card {
  max-width: 250px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  /* https://getcssscan.com/css-box-shadow-examples */
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px,
    rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px,
    rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}

.card img {
  width: 100%;
  border-radius: 10px;
}
.card:hover {
  transform: scale(1.1);
  transition: 1s ease-in-out;
}

.card .action {
  width: 100%;
  padding: 7px;
  display: flex;
  justify-content: space-between;
  color: white;
  background: black;
  border-radius: 10px;
  align-items: center;
}
.card .action span {
  color: greenyellow;
}

.card .action button {
  background-image: linear-gradient(180deg, #a9c9ff 0%, #ffbbec 100%);
  border-radius: 10px;
  color: white;
  padding: 5px 10px;
  border: none;
  font-family: "poppins";
  font-weight: 600;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.521);
  cursor: pointer;
  transition: scale 300ms;
}

.card .action button:hover {
  scale: 0.96;
}

/* Sepet */

.modal-wrapper {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(128, 128, 128, 0.4);
  display: none;
  place-items: center;
}

.active {
  display: grid;
}

.modal {
  background: white;
  width: 70%;
  height: 60%;
  border-radius: 10px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.modal #icon {
  display: flex;
  justify-content: end;
}

.modal #icon img {
  width: 40px;
  cursor: pointer;
  transition: all 0.4s;
}
.modal #icon img:hover {
  scale: 0.87;
}
.modal #list {
  display: flex;
  flex-direction: column;
  /* bütün alanı kaplamasını sağlar */
  flex-grow: 1;
  /* elemanlar sınırın dışına çıkarsa scroll ekle */
  overflow: auto;
  gap: 30px;
  padding: 14px;
}
.modal #list .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.modal #list .item img {
  width: 60px;
  border-radius: 7px;
}
.item .title {
}
.item .price {
  color: green;
}
.modal #list .item p {
}
.modal #list .item #delete {
  width: 30px;
  cursor: pointer;
  transition: all 0.4s;
}
.modal #delete:hover {
  transform: rotate(15deg);
}

.modal #total {
  text-align: center;
}
.modal #total span {
  color: rgb(0, 203, 0);
  font-weight: bold;
}