/* Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

/* CSS RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: none;
  outline: none;
  text-decoration: none;
  list-style: none;
  text-transform: capitalize;
  transition: 0.2s linear all;
}

/* Root */

/* projede genel olarak kullanacağımız yapıları ve değerleri rootta saklarız ki değişiklik yapmamız gerekitğinde her birisini tek tek değiştirmeyelim */

:root {
  --main-color: #d3ad7f;
  --black-color: #13131a;
  --bg-color: #010103;
  --border: 0.1rem solid rgba(255, 255, 255, 0.3);
}

body {
  background-color: var(--bg-color);
  color: white;
  font-family: "Roboto", sans-serif;
}

html {
  overflow-x: hidden;
  /* site içi yönlendirmeleri yumuşak biçimde gerçekleştir */
  scroll-behavior: smooth;

  /* normalde 1 rem = 16px. HTML'e font-size vererek rem'in temsil edeceği değeri değiştirebiliyoruz. */

  /* 
    1rem => 16px 
    font-size: 10px;

    1rem => 10px
    
    */

  font-size: 10px;
}

/* çıkan scrollbarın kapladığı alan */
html::-webkit-scrollbar {
  width: 0.2rem;
}

/* scrollbarın arkaplanı */
html::-webkit-scrollbar-track {
  background-color: transparent;
}
/* scrollbarın tuttuğumuz kısmını düzenlediğimiz yer */
html::-webkit-scrollbar-thumb {
  background-color: white;
  border-radius: 5rem;
}

.btn {
  /* 
        inline => bütün satırı kapsamaz diğer elementlerle yan yana gelebilir.

        block => margin ve width alabilir
    */
  display: inline-block;
  padding: 0.9rem 3rem;
  font-size: 1.7rem;
  background-color: var(--main-color);
  color: white;
  cursor: pointer;
}

.btn:hover {
  scale: 1.1;
}

section {
  padding: 2rem 7%;
}

.heading {
  text-align: center;
  font-size: 4rem;
  text-transform: uppercase;
  padding-bottom: 4rem;
}

.heading span {
  color: var(--main-color);
  text-transform: uppercase;
}

/* header */

header {
  background-color: var(--bg-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 6%;
  border-bottom: var(--border);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 100%;
}

header .icons {
  display: none;
}

.logo img {
  height: 6rem;
  border-radius: 50%;
}

.navbar a {
  color: white;
  font-size: 1.6rem;
  margin: 0 1rem;
}

.navbar a:hover {
  color: var(--main-color);
  border-bottom: 0.1rem solid var(--main-color);
  padding-bottom: 0.5rem;
}

header .icons i {
  color: white;
  cursor: pointer;
  font-size: 2.5rem;
}

/* home */

.home {
  min-height: 100vh;
  background-image: url("./images/home.jpg");
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
  padding: 0 10vw;
}

.home .content {
  max-width: 60rem;
}

.home .content h3 {
  font-size: 6rem;
  text-transform: uppercase;
}

.home .content p {
  font-size: 1.5rem;
  padding: 1rem 0;
  line-height: 1.8;
  font-weight: lighter;
  color: aliceblue;
}

/* * About */
.about .row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.about .row .image {
  flex: 1 1 45rem;
}

.about .row .image img {
  width: 100%;
}

.about .row .content {
  flex: 1 1 45rem;
  padding: 2rem;
}

.about .row .content h3 {
  font-size: 3rem;
}

.about .row .content p {
  font-size: 1.6rem;
  padding: 1rem 0;
  line-height: 1.5;
}

/* menü kısmı */

.menu .box-container {
  display: grid;
  /* 
    
    bu aşağıdaki yapıyla belirlediğimiz değerin katları kadar (30, 60, 90, 120rem) boş alan olduğunda her bir kat için yeni bir sütun oluşturur, eğer yeterince boş alan yoksa, ekstra kalan boşluğu her bir sütunun arasında pay eder(bunu da 1fr ile sağlarız).
    */
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  gap: 1rem;
}

.menu .box {
  border: var(--border);
  padding: 5rem;
  text-align: center;
  transition: all 0.4s;
}

.menu .box img {
  height: 10rem;
  width: 10rem;
  border-radius: 50%;
}

.menu .box h3 {
  font-size: 2rem;
  padding: 1rem 0;
}

.menu .box:hover {
  background-color: white;
  color: black;
  cursor: pointer;
}

.menu .box .price {
  font-size: 2.5rem;
  padding: 0.5rem 0;
}

.menu .box .price span {
  font-size: 1.5rem;
  font-weight: lighter;
  text-decoration: line-through;
}

/* products kısmı */

.products .box-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  gap: 1.5rem;
}

.products .product-box {
  border: var(--border);
  padding: 2rem;
  text-align: center;
}

.products .product-box .image {
  padding: 2rem 0;
}

.products .product-box .image img {
  height: 25rem;
  width: 25rem;
}

.products .product-box .content h3 {
  font-size: 2.5rem;
}

.products .product-box .content .stars {
  padding: 1.5rem;
}

.products .product-box .content .stars i {
  font-size: 1.7rem;
  color: var(--main-color);
}

.products .product-box .content .price {
  font-size: 2.5rem;
}

.products .product-box .content .price span {
  font-size: 1.5rem;
  text-decoration: line-through;
  font-weight: lighter;
}

/* incelemeler kısmı */

.reviews .box-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  gap: 1.5rem;
}

.reviews .box-container .box {
  border: var(--border);
  padding: 3rem 2rem;
  text-align: center;
}

.reviews .box-container .box img {
  height: 7rem;
  width: 7rem;
  border-radius: 50%;
}

.reviews .box p {
  font-size: 1.5rem;
  line-height: 1.8;
  color: gainsboro;
  padding: 2rem 0;
}

.reviews .box h3 {
  font-size: 2rem;
  padding: 1rem 0;
}

.reviews .box .stars i {
  font-size: 1.5rem;
  color: var(--main-color);
}

/* Contact Us */
.contact-us .row {
  display: flex;
  background-color: var(--black-color);
  flex-wrap: wrap;
  gap: 1rem;
}

.contact-us .row .map {
  flex: 1 1 45rem;
  width: 100%;
  object-fit: cover;
}

.contact-us .row form {
  flex: 1 1 45rem;
  padding: 5rem 2rem;
}
.contact-us .row form h3 {
  text-transform: uppercase;
  font-size: 3.5rem;
}

.contact-us .row form .input-box {
  display: flex;
  align-items: center;
  margin: 2rem 0 2rem;
  background: var(--black-color);
  border: var(--border);
}
.contact-us .row form .input-box span {
  font-size: 2rem;
  padding-left: 2rem;
}

.contact-us .row form .input-box input {
  width: 100%;
  padding: 2rem;
  font-size: 1.7rem;
  background: none;
  text-transform: none;
  color: #ffff;
}

.contact-us .row form .btn-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-us .row form .btn-container .btn {
  width: 200px;
}

/* * Blogs */
.blogs .box-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  gap: 1.5rem;
}

.blogs .box-container .box {
  border: var(--border);
}

.blogs .box-container .box .image {
  width: 100%;
  height: 25rem;
  overflow: hidden;
}

.blogs .box-container .box:hover .image img {
  transform: scale(1.2);
}

.blogs .box-container .box .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blogs .box-container .box .content {
  padding: 2rem;
}
.blogs .box-container .box .content .title {
  color: #ffff;
  font-size: 2.5rem;
  line-height: 1.5;
}
.blogs .box-container .box .content .title:hover {
  color: var(--main-color);
}
.blogs .box-container .box .content span {
  display: block;
  font-size: 1.5rem;
  padding-top: 1rem;
  color: var(--main-color);
}

.blogs .box-container .box .content p {
  font-size: 1.8rem;
  line-height: 1.8;
  color: #ccc;
  padding: 1rem 0;
}

/* * Footer */

footer {
  background-color: var(--black-color);
  text-align: center;
}

footer .share {
  padding: 1rem 0;
}

footer .share i {
  height: 5rem;
  width: 5rem;
  font-size: 2rem;
  border: var(--border);
  border-radius: 50%;
  line-height: 5rem;
  margin: 0.3rem;
}
footer .share i:hover {
  background-color: var(--main-color);
}

footer .links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 2rem 0;
  gap: 1rem;
}

footer .links a {
  padding: 0.7rem 2rem;
  color: #ffff;
  font-size: 2rem;
  border: var(--border);
}
footer .links a:hover {
  background-color: var(--main-color);
}

footer .copyright {
  font-size: 2rem;
  font-weight: lighter;
  padding: 1.5rem;
}

footer .copyright span {
  color: var(--main-color);
}

/* Media Tags */

@media (max-width: 800px) {
  header {
    padding: 1.5rem 2rem;
  }
  header .icons {
    display: flex;
    gap: 1rem;
  }

  header .navbar {
    position: absolute;
    top: 120%;
    right: 3%;
    display: none;
    flex-direction: column;
    background-color: var(--bg-color);
    padding: 2rem;
    border-radius: 10px;
    gap: 3rem;
    text-align: center;
    box-shadow: 0 0 10px var(--main-color);
  }
  header .navbar.active {
    display: flex;
  }

  section {
    padding: 2rem;
  }

  .home {
    background-position: left;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .home .content h3 {
    font-size: 4.5rem;
  }

  .about .row .content h3 {
    font-size: 2.5rem;
  }

  .about .row .content p {
    font-size: 1.3rem;
  }

  .btn-container .btn {
    width: 100% !important;
  }
}

@media (max-width: 600px) {
  html {
    font-size: 8px;
  }

  header .icons i {
    font-size: 2rem;
  }
}