/* Pengaturan Global */

/* Mendaftarkan font ke dalam CSS, dan memberi nama family */
@font-face {
   font-family: 'Poppins';
   src: url(../fonts/poppins.woff2);
}

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

html {
   /* agar scroll ketika klik pada navigasi menjadi halus */
   scroll-behavior: smooth;
}

body {
   /* mendaftarkan semua teks pada body menjadi family Poppins */
   font-family: 'Poppins';
}

a {
   /* menghilangkan garis bawah pada link */
   text-decoration: none;

   /* menghilangkan warna bawaan pada link */
   color: unset;
}

h2 {
   /* mengatur ukuran huruf ke 34 pixel */
   font-size: 34px;
}

h3 {
   /* mengatur ukuran huruf ke 1.2rem */
   font-size: 1.2rem;
}

h1,
h2,
h3 {
   /* mengatur tebal huruf */
   font-weight: bold;
}

img {
   /* 
      mengatur agar semua elemen img memiliki panjang maksimal 100% agar
      tidak besar gambar tidak melebihi layar ataupun pembungkus
   */
   max-width: 100%;
}

/* Navigasi */

nav {
   /* background-color mengatur warna latar belakang */
   background-color: red;

   /* penulisan 2 background-color seperti ini akan mengabaikan penulisan sebelumnya */
   background-color: rgb(83, 23, 23);

   /* box-shadow membuat efek bayangan */
   box-shadow: 0 3px 7px -2px #000;

   /* width mengatur panjang elemen */
   width: 100%;
   padding-top: 10px;
   padding-bottom: 10px;

   /* position mengatur posisi elemen, static untuk biasa, fixed untuk efek menempel */
   position: fixed;

   /* Nilai z-index semakin besar, maka elemen akan semakin di depan */
   z-index: 500;
}

/* 
   PERHATIKAN bahwa dalam mengatur elemen, nama elemen langsung ditulis
   sedangkan untuk mengatur class, dibutuhkan tanda titik (.) terlebih dulu
   img {} berarti elemen dengan tag img, 
   sedangkan .img artinya elemen dengan kelas img   
*/

.baris {
   /* 
      display: flex memiliki pengaturan yang dapat mengatur agar elemen
      di dalamnya memiliki ukuran yang fleksibel
   */
   display: flex;

   /* 
      align-items: center mengatur elemen di dalamnya rata tengah vertikal
   */
   align-items: center;

   /* 
      justify-content: center mengatur elemen di dalamnya rata tengah horizontal
   */
   justify-content: center;

   /* 
      flex-wrap: wrap mengatur agar jika panjang elemen berlebih, maka elemen
      akan otomatis diletakan di baris baru
   */
   flex-wrap: wrap;
}

section {
   /* text-align mengatur rata tulisan, bisa bernilai: left, right, center, justify */
   text-align: center;
}

.logo {
   /* height mengatur tinggi elemen */
   height: 40px;
   margin-left: 20px;
}

.navigasi {
   margin-left: auto;
   margin-right: 15px;
}

.navigasi a,
.shop {
   color: #fff;
   padding-left: 8px;
   padding-right: 8px;
}

.navigasi a:hover[href="#best-seller"] {
   background-color: #FFF8DC;
   border-radius: 80px;
   color: #000;
}

.navigasi a:hover[href="#our-team"] {
   background-color: #FFF8DC;
   border-radius: 80px;
   color: #000;
}

.navigasi a:hover[href="#review"] {
   background-color: #FFF8DC;
   border-radius: 80px;
   color: #000;
}

.navigasi a:hover[href="#contact-us"] {
   background-color: #FFF8DC;
   border-radius: 80px;
   color: #000;
}

.shop {
   margin-right: 100px;
}

.chat {
   margin-right: 30px;
   background-color: #FFF8DC;
   color: #800000;
   padding-top: 5px;
   padding-right: 15px;
   padding-bottom: 5px;
   padding-left: 15px;
   border-radius: 10px;
}


/* HEADER */


header,
section {
   /*
    padding mengatur jarak ke dalam
    pada padding dan margin ditambahkan top / right / bottom / top 
    untuk mengatur jarak masing-masing 
   */
   padding-top: 80px;
   padding-bottom: 80px;

   /* margin mengatur jarak ke luar */
   margin-bottom: 80px;
}

/* penulisan CSS dapat digabung dengan beberapa elemen */
.col-kiri,
.col-kanan {
   /* width mengatur panjang elemen. 50% artinya setengah ukuran pembungkus */
   width: 50%;
}

.col-kiri {
   padding-left: 50px;
   padding-right: 120px;
}

.judul-header {
   margin-bottom: 20px;
}

.subjudul-header {
   /* font-size digunakan untuk mengatur ukuran huruf */
   font-size: 18px;
}

.dapat-dibeli {
   margin-top: 20px;
   margin-bottom: 20px;
   font-size: 14px;
}

.olshop img {
   width: 40px;

   /* height digunakan untuk mengatur tinggi elemen */
   height: auto;
   margin-right: 10px;
}

/* Best Seller */

.best-seller {
   position: relative;

   /* background-color mengatur warna latar belakang elemen */
   background-color: #EEE6DC;
}

/* 
terkait position, after, dan before memerlukan pemahaman mendalam
terkait layout pada CSS untuk dapat memahami secara penuh 
*/

.best-seller::before,
.best-seller::after {
   position: absolute;
   content: "";
   width: 100%;
   height: 76px;

   /* background-image untuk menambahkan gambar sebagai background */
   background-image: url(../images/garis-atas.png);

   /*background-size agar gambar latar menyesuaikan tinggi / panjang elemen */
   background-size: cover;

   top: -60px;
   left: 0;
}

.best-seller::after {
   height: 60px;
   background-image: url(../images/garis-bawah.png);
   top: unset;
   bottom: -60px;
}

.judul-best-seller {
   margin-bottom: 20px;
}

.subjudul-best-seller {
   font-size: 18px;
   margin-bottom: 40px;
}

.col-produk {
   /* 
      Penulisan padding dan margin seperti padding:20px ini penulisan singkat 
      yang berarti top, right, bottom, left nilainya sama, yaitu 20px 
   */
   padding: 20px;
   width: 25%;
}

.col-produk img {
   /* transition membuat animasi transisi dari perubahan style, 0.3s berarti 0.3 detik */
   transition: all 0.3s ease;

   /* border-radius  Membuat sudut membulat */
   border-radius: 15px;

   /* box-shadow membuat efek bayangan */
   box-shadow: 0 3px 10px -2px #000;
}

/* :hover akan dijalankan saat mouse ada di atas elemen */
.col-produk img:hover {

   /* membuat transformasi, bisa berupa scale(1.05), rotate(180deg), translateY(-50px), dsb */
   transform: scale(0.9);
   border-radius: 50%;
}

.nama-produk {
   margin-top: 15px;
   font-weight: bold;
}

/* About US */

.about-us {
   /* max-width: 80%; mengatur panjang maksimal elemen tidak boleh melebihi 80% layar */
   max-width: 80%;

   /* margin-left dan margin-right auto akan membuat posisi elemen berada di tengah */
   margin-left: auto;
   margin-right: auto;
}

.judul-about-us {
   margin-bottom: 30px;
}

/* 
   penulisan .about-us img {} berarti mengatur elemen img 
   yang ada di dalam elemen dengan kelas about-us 
   harap perhatikan .about-us dan image dipisahkan spasi
   penulisan class diawali titik (.) penulisan elemen tidak
*/
.about-us img {
   /* 
      Penulisan width: 800px dan max-width: 100% mengatur agar
      elemen memiliki panjang 800px namun tidak boleh melebihi 100% ukuran layar
   */
   width: 800px;
   max-width: 100%;
}

.tentang-about-us {
   margin-bottom: 40px;
}

.penjelasan-about-us {
   margin-top: 40px;
}

/* OUR TEAM */

.our-team {
   background-color: #EEE6DC;
   box-shadow: inset 0px 0px 23px -6px #707070;
}

.judul-team {
   margin-bottom: 20px;
}

.subjudul-team {
   margin-bottom: 30px;
   font-size: 18px;
   width: 800px;
   max-width: 90%;
   margin-left: auto;
   margin-right: auto;
}

.col-team {
   width: 25%;
   padding: 20px;
}

.col-team img {
   box-shadow: 0 3px 10px -2px #000;
   border-radius: 50px 0px 50px 0px;
}


/* REVIEW */

.review {
   background-image: url(../images/bg-review.svg);
   /* 
      background-size: contain;
      membuat gambar latar belakang tidak terpotong
   */
   background-size: contain;

   /* 
      background-repeat: no-repeat;
      membuat gambar latar belakang tidak diulang (duplikat)
   */
   background-repeat: no-repeat;
   padding-left: 20px;
   padding-right: 20px;
}

.judul-review {
   margin-bottom: 20px;
}

.subjudul-review {
   margin-bottom: 40px;
   font-size: 18px;
}

.review .baris {
   justify-content: space-around;
   /* align-items: stretch; membuat tinggi elemen di dalam .review .baris seragam */
   align-items: stretch;
}

.col-review {
   width: 30%;
   padding: 35px 50px;
   box-shadow: 0px 0px 12px -10px #000;
   background-color: #fff;
}

.profile {
   display: flex;
   margin-bottom: 30px;
   align-items: center;
}

/* mengatur elemen img yang ada di dalam class(.) profile */
.profile img {
   width: 100px;
   margin-right: 20px;
}

.profile .nama-profile {
   text-align: left;
}

/* CONTACT US */
.contact-us {
   margin-bottom: 20px;
}

.col-kontak {
   width: 30%;
   margin-top: 50px;
   /* color mengatur warna tulisan */
   color: green;
}

/* FOOTER */

footer {
   background-color: rgb(83, 23, 23);
   padding-top: 15px;
   padding-bottom: 15px;
   color: #fff;
   padding-right: 40px;
   padding-left: 40px;
}

footer .navigasi {
   margin-left: 20px;
   margin-right: auto;
}

/* UNTUK RESPONSIF DI BAWAH */
@media (max-width:600px) {
   
   .navigasi {
      display: none;
   }

   .shop {
      margin-right: 20px;
      margin-left: auto;
   }

   .col-kiri,
   .col-kanan {
      width: 100%;
      padding: 20px;
      text-align: center;
   }
}
.col-team,
   .col-produk {
      width: 25%;
   }

   .col-review {
      width: 100%;
      margin-bottom: 30px;
      text-align: left;
   }