/*****************
** font and reset
*****************/

@font-face {
  font-family: 'Urbanist';
  src: url("./font/Urbanist-Regular.woff");
  font-weight: 'Regular'
}

@font-face {
  font-family: 'Rubik';
  src: url("./font/Rubik-Regular.woff");
  font-weight: 'Regular'
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Urbanist', 'sans-serif', monospace, 'Courier New';
}

/** scroll bar custom **/
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 8px;
}
::-webkit-scrollbar-thumb {
  background: rgb(70, 173, 204); 
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: #51e4b8; 
}

#awalan, #produk, #kisah, #testimoni, #kontak {
  scroll-margin-top: 100px;
}

/*****************
** header
*****************/

header {
  position: fixed;
  top: 0;
  width: 100vw;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  z-index: 70;
  box-shadow: 0 0 5px 4px rgba(196,86,130,0.5);
}

/** header upper **/

.header-upper {
  display: flex;
  flex-wrap: nowrap;
  background-color: rgb(224, 241, 241);
  gap: 8px;
  padding: 0 12px;
}

/** header logo **/

.header-logo {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 3px;
}

.header-logo img {
  width: calc(.5vw + 59px);
  height: calc(.5vw + 70px);
}

.header-logo-text {
  font-size: calc(.7vw + 22px);
  color: rgb(196,86,130);
  font-weight: bold;
}

@media (max-width:960px){
  .header-logo-text {
    display: none;
  }
}

/** header search **/

.header-search {
  flex: 1 1 auto;
  align-self: center;
  display: flex;
  gap: 1px;
  align-items: center;
}

.header-search-input {
  padding: .6rem;
  border-radius: 7px;
  text-align: center;
  font-size: calc(.5vw + 15px);
  border: 3px solid rgb(196,86,130);
  background:rgb(224, 241, 241);
  flex: 1 1 295px;
  height: 40px;
}

.header-search button {
  color: rgb(224, 241, 241);
  background-color: rgb(196,86,130);
  border-radius: 7px;
  cursor: pointer;
  font-size: calc(.5vw + 18px);
  border: 3px solid rgb(196,86,130);
  height: 40px;
  padding: 3px 9px;
}

.header-search button:hover, .header-search button:focus {
  color: rgb(196,86,130);
  background-color: rgb(224, 241, 241);
}

/** header side **/

.header-side {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  padding: 4px;
  gap: 4px;
}

@media screen and (max-width: 768px) {
  .header-side {
    position: fixed;
    width: 100vw;
    padding: 0;
    bottom: 0;
    gap: 2px;
    background: rgb(196,86,130);
  }
  .iconbtn {
    flex: 1 1 180px;
  }
}

.iconbtn {
  border: none;
  cursor: pointer;
  font-size: calc(.7vw + 30px);
  flex: 1 1 35px;
  position: relative;
}

.iconbtn:focus {
  color: rgb(196,86,130);
}

.iconbtn img {
  width: calc(.8vw + 30px);
  border-radius: 50%;
}

.iconbtn .value {
  text-align: center;
  padding: 2px;
  color: rgb(224, 241, 241);
  background-color: rgb(250,86,12);
  position: absolute;
  top: 0px;
  left: 50%;
  z-index: 1;
  border-radius: 50%;
  width: calc(.7vw + 14px);
  height: calc(.7vw + 14px);
  font-size: calc(.7vw + 8px);
  font-weight: bold;
}

.iconbtn-drpdown {
  position: absolute;
  min-width: 120px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 71;
  right: 0;
  top: 59px;
  display: none;
}

@media screen and (max-width: 768px) {
  .iconbtn .value {
    left: 53%
  }
  .iconbtn-drpdown {
    top: -70px;
  }
}

.btn-profile:hover + .iconbtn-drpdown,
.btn-profile:focus + .iconbtn-drpdown, 
.iconbtn-drpdown:hover {
  display: flex;
  flex-direction: column;
}

.iconbtn-drpdown button {
  color: rgb(196,86,130);
  background: rgb(224, 241, 241);
  border: none;
  text-align: left;
  padding: .5rem;
  cursor: pointer;
  font-size: 21px;
}

.iconbtn-drpdown button:hover, .iconbtn-drpdown button:focus {
  background: rgb(196,86,130);
  color:rgb(224, 241, 241);
}

/** header lower **/

.header-lower {
  width: 100vw;
  background: rgb(196,86,130);
}

#header-lowslide {
  display: none;
}

.header-lower-slider {
  display: flex;
  gap: 10px;
}

.header-lower-slider a {
  text-decoration: none;
  color: rgb(224, 241, 241);
  font-size: calc(.8vw + 16px);
  flex: 1 1 120px;
  text-align: center;
  padding: 2px;
}

.header-lower-slider a:hover {
  color: rgb(196,86,130);
  background: rgb(224, 241, 241);
}

@media screen and (max-width: 768px) {
  .header-lower-btn:before {
    content: "\0702";
  }

  .header-lower-btn {
    width: 50px;
    height: 50px;
    background: rgb(196,86,130);
    color:rgb(224, 241, 241);
    position: fixed;
    z-index: 71;
    top: calc(50vh - 25px);
    left: 0;
    font-size: 32px;
    display: flex;
    justify-content: center;
    align-items:center;
    border-radius: 0 14px 14px 0;
  }

  #header-lowslide:checked + .header-lower-btn:before {
    content: "\0703";
    transition: .8s;
  }

  #header-lowslide:checked + .header-lower-btn {
    top: calc(50vh - 150px);
    left: calc(30vw - 4px);
    height: 300px;
    transition: .5s;
  }

  .header-lower-slider {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: fixed;
    z-index: 72;
    top: calc(50vh - 150px);
    left: -100%;
    width: 30vw;
    height: 300px;
    background-color: rgb(196,86,130);
    color:rgb(224, 241, 241);
    padding-left: 10px;
  }

  .header-lower-slider a {
    flex: 0;
  }

  .header-lower-slider a:focus {
    color: rgb(196,86,130);
    background: rgb(224, 241, 241);
  }

  #header-lowslide:checked ~ .header-lower-slider {
    left: 0;
    transition: .2s;
  }
}

/*****************
** content wrapper
*****************/

.content-wrapper {
  max-width: 1280px;
  margin: 0 auto;
}


/*****************
** carousel
*****************/

.carousel-wrap {
  margin: 125px 4vw 20px;
  display: flex;
  flex-direction: column;
}

.carousel-item-wrap {
  border-radius: 10px;
  height: 320px;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 5px 5px rgba(0,0,0,0.2),
  0 0 5px 8px rgba(32, 51, 87, 0.267);
}

/** carousel item **/

.carousel-item {
  display: flex;
  position: absolute;
  overflow: hidden;
  z-index: 1;
  width: 100%;
  height: 100%;
  gap: 20px;
  opacity: 0;
  transition: opacity .3s ease-out .25s;
}

.carousel-item-text {
  display: flex;
  color: rgb(224, 241, 241);
  padding-left: 50px;
  align-items: center;
  font-size: calc(1vw + 22px);
  font-weight: bold;
  flex: 3;
  text-shadow: 0 0 1px rgba(32, 51, 87, 0.267);
}

.carousel-textp {
  position: relative;
  z-index: 3;
  transition: .7s;
  transform: translateY(300px);
}

.carousel-item-image {
  flex: 2;
  position: relative;
  z-index: 2;
  height: 310px;
}

.carousel-image-circle {
  position: absolute;
  top: -25vw;
  right: -25vw;
  width: 0;
  height: 0;
  border-radius: 50%;
  z-index: 2;
  transition: .3s;
}

.carousel-image-pict {
  position: absolute;
  top: 10px;
  right: 4vw;
  z-index: 3;
  transition: .5s;
  transform: translateY(-330px);
}

.carousel-item:nth-child(1) {
  background: rgb(183, 128, 194);
}

.carousel-item:nth-child(1) .carousel-image-circle {
  background:rgb(187, 158, 149);
}

.carousel-item:nth-child(1) .carousel-image-pict {
  right: 8vw;
}

.carousel-item:nth-child(2) {
  background: rgb(104, 182, 196);
}

.carousel-item:nth-child(2) .carousel-image-circle {
  background:rgb(221, 170, 102);
}

.carousel-item:nth-child(2) .carousel-image-pict {
  right: 7vw;
}

.carousel-item:nth-child(3) {
  background: rgb(230, 150, 84);
}

.carousel-item:nth-child(3) .carousel-image-circle {
  background:rgb(96, 130, 153);
}

.carousel-item:nth-child(4) {
  background: rgb(206, 147, 147);
}

.carousel-item:nth-child(4) .carousel-image-circle {
  background:rgb(230, 233, 87);
}

@media screen and (max-width: 768px) {
  .carousel-wrap {
    margin-top: 92px;
  }
  .carousel-item-text, .carousel-item-image {
    flex: 1;
  }
  .carousel-item-text {
    font-size: 6vw;
  }
  .carousel-image-circle {
    top: -50vw;
    right: -50vw;
  }
}

.carousel-item.active {
  opacity: 1;
}

.carousel-item.active .carousel-image-circle {
  width: 50vw;
  height: 50vw;
}

.carousel-item.active .carousel-textp {
  transform: translateY(0);
}

.carousel-item.active .carousel-image-pict {
  transform: translateY(0);
}

@media screen and (max-width: 768px) {
  .carousel-item.active .carousel-image-circle {
    width: 100vw;
    height: 100vw;
  }
}


/** carousel control **/

.carousel-controls {
  position: relative;
  z-index: 4;
  top: -44px;
}

.carousel-controls ul {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  justify-content: center;
}

.carousel-control {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(196, 86, 130, 0.4);
}

.carousel-control.active {
  background:rgb(196, 86, 130);
}

/*****************
** Produk
*****************/

.produk-wrap {
  margin: 20px 30px;
}

.produk-wrap h2 {
  color: rgb(196, 86, 130);
  font-size: calc(1vw + 21px);
  font-weight: bold;
  margin: 5px auto;
}

.produk-item-wrap {
  margin: 0 10px;
  display: grid;
  grid-template-columns: repeat(3, calc(100% / 3));
}

@media screen and (max-width: 768px) {
  .produk-item-wrap {
    grid-template-columns: repeat(2, 50%);
  }
}

@media screen and (max-width: 450px) {
  .produk-item-wrap {
    grid-template-columns: 100%;
    margin: 0 30px;
  }
}

.produk-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.produk-stack {
  position: relative;
  margin: 30px auto;
}

.produk-item-image {
  width: 25vw;
  max-width: 270px;
  overflow: hidden;
  border: 2px solid rgb(196, 86, 130);
  background: rgb(221, 210, 223);
  border-radius: 5px;
  box-shadow: 0 5px 5px 2px rgba(0,0,0,.4);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 1ms;
}

.produk-item-image img {
  width: 22vw;
  max-width: 270px;
}

@media screen and (max-width: 768px) {
  .produk-item-image {
    width: 40vw;
  }
  .produk-item-image img {
    width: 33vw;
  }
}

@media screen and (max-width: 450px) {
  .produk-item-image {
    width: 70vw;
  }
  .produk-item-image img {
    width: 64vw;
  }
}

.produk-stack .produk-item-image:nth-last-child(3) {
  position: relative;
  --y: calc(-50% - 15px);
  transform: translate(-50%, var(--y)) scale(0.95);
}

.produk-stack .produk-item-image:nth-last-child(2) {
  --y: calc(-50%);
  transform: translate(-50%, var(--y)) scale(1);
}
.produk-stack .produk-item-image:nth-last-child(1) {
  --y: calc(-50% + 15px);
  transform: translate(-50%, var(--y)) scale(1.05);
}

@keyframes swap {
  50% {
    transform: translate(-50%, calc(var(--y) - 150px)) scale(0.85) rotate(-5deg);
    animation-timing-function: ease-in;
  }
  100% {
    transform: translate(-50%, calc(var(--y) - 15px)) scale(0.85);
    z-index: -1;
  }
}

.produk-item-judul {
  font-size: calc(.6vw + 17px);
  color: rgb(196, 86, 130);
  align-self: center;
}

.produk-item-rating, .produk-item-harga {
  padding-left: 30px;
}

.produk-item-rating {
  color: rgb(196, 86, 130);
  font-size: calc(.6vw + 12px);
}

.produk-item-harga {
  font-weight: bold;
  font-size: calc(.6vw + 11px);
}

/*****************
** Kisah
*****************/

.kisah-wrap {
  margin: 20px auto 20px;
}

.kisah-wrap h2 {
  font-size: calc(1vw + 25px);
  font-weight: bold;
  color: rgb(221, 170, 102);
  margin: 0 10px 7px;
}

.kisah-wrap hr {
  border: 3px solid rgb(221, 170, 102);
  background: rgb(221, 170, 102);
  margin-bottom: 7px;
  margin-left: 5px;
  width: calc(.4vw + 320px);
}

.kisah-item-wrap {
  display: flex;
  align-items: center;
  margin: 0 4vw;
  border-radius: 9px;
  border: 2px solid rgb(196, 86, 130);
  background: rgb(214, 197, 204);
  position: relative;
  overflow: hidden;
}

.kisah-animasi, .kisah-cerita {
  position: relative;
  z-index: 4;
}

.kisah-animasi {
  flex: 1;
  display: flex;
  justify-content: center;
}

.kisah-animasi img {
  animation: bergantung 3s linear infinite alternate-reverse;
  transform-origin: top;
  width: 24vw;
  max-width: 240px;
}

.kisah-cerita {
  font-size: calc(.5vw + 18px);
  flex: 1.5;
  padding: 3vw;
}

@keyframes bergantung {
  0%{
    transform: rotate(-20deg);
  }
  100%{
    transform: rotate(5deg);
  }
}

.kisah-garis {
  display: flex;
  flex-direction: column;
  gap: 60px;
  position: absolute;
  top: 70px;
  left: -25vw;
  z-index: 2;
}

.kisah-garis hr {
  border: 10px dotted rgb(177, 173, 174);
  background: rgb(214, 197, 204);
  width: 200vw;
  transform: rotate(30deg);
}

@media screen and (max-width: 600px) {
  .kisah-item-wrap {
    flex-direction: column;
    margin: 0 20px;
  }
  .kisah-animasi img {
    width: 60vw;
    max-width: 240px;
  }
  .kisah-cerita {
    font-size: calc(1vw + 18px);
  }
}

/*****************
** Testimoni
*****************/

.testimoni-wrap {
  margin: 20px auto 30px;
}

.testimoni-wrap h2 {
  font-size: calc(1vw + 25px);
  font-weight: bold;
  color: rgb(78, 152, 221);
  margin: 0 10px 2px;
}

.testimoni-wrap hr {
  border: 3px solid rgb(78, 152, 221);
  background: rgb(78, 152, 221);
  margin-bottom: 7px;
  margin-left: 5px;
  width: calc(.5vw + 200px);
}

.testimoni-item-wrap {
  display: flex;
  flex-wrap: nowrap;
  border: 2px solid rgb(221, 170, 102);
  border-radius: 12px;
  overflow-x: scroll;
  gap: 18px;
  margin: 0 30px;
  padding: 8px;
}

@media screen and (max-width:600px) {
  .testimoni-item-wrap {
    width: 88vw;
  }
}

.testimoni-item {
  height: 250px;
  border: 4px solid rgb(38, 57, 141);
  border-radius: 20px;
  color: rgb(38, 57, 141);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 4px;
  flex: 0 0 250px;
}

.testimoni-item::before {
  content: '\06fe';
  position: absolute;
  width: 40px;
  height: 40px;
  top: -4px;
  left: -4px;
  background: #fff;
  font-size: 40px;
}

.testimoni-item::after {
  content: '\06ff';
  position: absolute;
  width: 40px;
  height: 40px;
  bottom: -4px;
  right: -4px;
  background: #fff;
  font-size: 40px;
}

.testimoni-upper {
  display: flex;
  align-items: center;
  flex: 1;
}

.testimoni-upper img {
  width: 80px;
  border-radius: 50%;
}

.testimoni-profile {
  display: flex;
  flex-direction: column;
}

.testimoni-nama {
  font-size: 24px;
  font-weight: bold;
}

.testimoni-kerja {
  font-family: 'Rubik', 'sans-serif';
  font-size: 17px;
}

.testimoni-lower {
  text-align: center;
  font-size: 19px;
  flex: 1.8;
}

/*****************
** Kontak
*****************/

.kontak-wrap {
  margin: 0 auto 70px;
}

.kontak-wrap h2 {
  font-size: calc(1vw + 25px);
  font-weight: bold;
  color: rgb(211, 130, 64);
  margin: 0 10px 2px;
}

.kontak-wrap hr {
  border: 3px solid rgb(211, 130, 64);
  background: rgb(211, 130, 64);
  margin-bottom: 7px;
  margin-left: 5px;
  width: calc(.5vw + 270px);
}

.kontak-isi-wrap {
  display: flex;
  border: 3px solid rgb(196, 86, 130);
  border-radius: 12px;
  overflow: hidden;
  margin: 0 30px;
}

/** Bagian Sosial Media **/
.kontak-wrap-kiri {
  background: rgb(100, 38, 63);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 0 9px;
  flex: 1;
}

.kontak-wrap-kiri p {
  font-size: calc(.9vw + 14px);
  color: rgb(214, 197, 204);
  text-align: center;
  font-family: 'Rubik', 'sans-serif';
}

.kontak-sosial-wrap {
  display: flex;
  justify-content: space-around;
  width: 90%;
}

.kontak-sosial-wrap button {
  font-size: calc(.6vw + 22px);
  cursor: pointer;
  color: rgb(100, 38, 63);
  background: rgb(214, 197, 204);
  border-radius: 9px;
  border: none;
  padding: 1px 6px;
}

.kontak-sosial-wrap button:hover, .kontak-sosial-wrap button:focus {
  color: rgb(214, 197, 204);
  background: rgb(100, 38, 63);
}

/** Bagian Chatbot **/
.kontak-wrap-kanan {
  display: flex;
  flex-direction: column;
  height: 78vh;
  flex: 1.4;
}

/** header **/
.kontak-chat-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex: 0 0 80px;
  gap: 7px;
  background: rgb(100, 38, 63);
  padding: 0 10px;
}

.kontak-chat-header img {
  width: 60px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.kontak-chat-profile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  gap: 2px;
}

.kontak-chat-nama {
  font-size: calc(.3vw + 20px);
  font-weight: bold;
}

.kontak-chat-kerja {
  font-size: calc(.3vw + 16px);
}

.kontak-chat-status {
  font-size: calc(.3vw + 14px);
  font-style: italic;
  color: rgb(205, 216, 205);
}

/** chat **/
.kontak-chat-wrap {
  flex: 1;
  overflow-y: scroll;
  height: 50vh;
  max-height: 550px;
}

.kontak-chat-isi {
  display: flex;
  flex-direction: column;
  background: rgb(214, 197, 204);
  position: relative;
  width: 100%;
  padding: 3px 6px;
  gap: 5px;
}

.kontak-chat-kanan, .kontak-chat-kiri {
  flex: 0 0 30px;
}

.kontak-chat-kiri {
  width: 30vw;
  max-width: 450px;
  border-radius: 9px;
  color: #fff;
  background: #000;
  padding: 8px 12px;
  font-size: calc(.5vw + 14px);
  align-self: flex-end;
}

.kontak-chat-kanan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1px;
}

.kontak-chat-kanan-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 3px;
}

.kontak-chat-kanan-wrap img {
  width: calc(1vw + 30px);
  border-radius: 50%;
  border: 2px solid #fff;
}

.kontak-chat-kanan-isi {
  width: 30vw;
  max-width: 440px;
  border-radius: 9px;
  color: #000;
  background: #fff;
  padding: 4px 10px;
  font-size: calc(.5vw + 14px);
}

.kontak-chat-kanan-status {
  font-size: calc(.4vw + 11px);
  font-style: italic;
  color: rgb(115, 119, 115);
}

/** footer **/
.kontak-chat-footer {
  background: rgb(100, 38, 63);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 0;
  height: 100px;
}

.kontak-chat-footer button {
  font-size: calc(1vw + 24px);
  flex: 0 0 2vw;
  cursor: pointer;
  color: #fff;
  background-color: rgb(100, 38, 63);
  border: none;
}

.kontak-chat-footer button:hover, .kontak-chat-footer button:focus {
  color: rgb(172, 143, 155);
}

.kontak-chat-footer textarea {
  flex: 1 1 40vw;
  padding: 0 5px;
  color: #fff;
  background: rgb(100, 38, 63);
  height: 100px;
  resize: none;
  outline: none;
  font-size: calc(.6vw + 20px);
}

@media screen and (max-width:768px) {
  .kontak-isi-wrap {
    flex-direction: column;
  }
  .kontak-wrap-kiri {
    flex: 0 0 160px;
    padding: 4px 10vw;
  }
  .kontak-wrap-kiri p {
    font-size: calc(1vw + 14px);
  }
  .kontak-wrap-kanan {
    flex: 1;
  }
  .kontak-chat-wrap {
    height: 25vh;
  }
  .kontak-chat-kiri {
    width: 60vw;
    font-size: calc(.4vw + 14px);
  }
  .kontak-chat-kanan-isi {
    width: 60vw;
    font-size: calc(.4vw + 14px);
  }
  .kontak-chat-kanan-status {
    font-size: calc(.4vw + 11px); 
  }
  .kontak-chat-footer button {
    font-size: 5vw;
  }
  .kontak-chat-footer textarea {
    font-size: 3vw;
  }
}