@font-face{
  font-family:'Bryndan';
  src:url('fonts/BryndanWrite.ttf');
}

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

html{
  scroll-behavior:smooth;
}

body{
  background:#f8f2e7;
  font-family:'Bryndan';
  overflow-x:hidden;

  display:flex;
  justify-content:center;
}

.app{
  width:100%;
  max-width:430px;
  min-height:100vh;

  background:#f8f2e7;

  position:relative;

  overflow:hidden;
}

img{
  width:100%;
  display:block;
}

/* =====================
LANDING
===================== */

.landing-page{
  width:100%;
  min-height:100vh;

  position:relative;

  padding-bottom:80px;
}

.main-title{
  text-align:center;

  color:#4c2d25;

  font-size:clamp(42px, 8vw, 58px);

  margin-top:90px;
}

.header-img{
  width:100%;

  margin-top:35px;

  object-fit:cover;
}

.landing-buttons{
  width:100%;

  margin-top:140px;

  display:flex;
  flex-direction:column;
  align-items:center;

  gap:22px;
}

.btn{
  width:72%;
  max-width:250px;

  height:58px;

  border-radius:22px;

  display:flex;
  align-items:center;
  justify-content:center;

  text-decoration:none;

  color:white;

  font-size:clamp(18px, 4vw, 24px);

  transition:.2s;
}

.btn:active{
  transform:scale(.96);
}

.masuk-btn{
  background:#e5a0c2;

  box-shadow:
  0 10px 24px rgba(229,160,194,.35);
}

.testi-btn{
  background:#8dc84d;

  box-shadow:
  0 10px 24px rgba(141,200,77,.35);
}

/* =====================
MENU
===================== */

.menu-page{
  width:100%;
  min-height:100vh;

  padding-top:140px;
  padding-bottom:80px;
}

.menu-title{
  text-align:center;

  color:#4c2d25;

  font-size:clamp(36px, 7vw, 48px);

  margin-bottom:100px;
}

.menu-grid{
  width:100%;

  display:grid;

  grid-template-columns:
  repeat(2, 1fr);

  gap:80px 20px;

  padding:0 22px;
}

.menu-item{
  width:100%;

  display:flex;
  justify-content:center;
  align-items:center;
}

.menu-item img{
  width:100%;
  max-width:170px;

  transition:.2s;
}

.menu-item img:active{
  transform:scale(.95);
}

.menu-subtitle{
  text-align:center;

  color:#7b5a50;

  font-size:14px;

  margin-top:-70px;
  margin-bottom:70px;

  line-height:1.5;

  padding:0 30px;
}

/* =====================
LAPTOP
===================== */

@media screen and (min-width:1024px){

  body{
    padding:20px 0;
  }

  .app{
    border-radius:30px;

    box-shadow:
    0 10px 40px rgba(0,0,0,.08);
  }

}

/* =====================
LAYANAN PAGE
===================== */

.layanan-page{
  width:100%;
  min-height:100vh;

  padding:
  70px 20px 80px;
}

/* ICON */

.layanan-icon{
  width:100%;
  max-width:170px;

  display:block;

  margin:auto;
}

/* LIST */

.layanan-list{
  margin-top:70px;

  display:flex;
  flex-direction:column;

  gap:28px;
}

/* CARD */

.layanan-card{
  width:100%;

  min-height:88px;

  border-radius:28px;

  padding:
  18px 22px;

  display:flex;
  align-items:center;

  color:white;

  font-size:clamp(16px, 3.8vw, 22px);

  line-height:1.5;

  box-shadow:
  0 8px 18px rgba(0,0,0,.08);
}

/* COLORS */

.pink{
  background:#d992bd;
}

.yellow{
  background:#f2cf87;
}

.purple{
  background:#d8bde4;
}

.green{
  background:#c8c68f;
}

.softpink{
  background:#efc0c4;
} 

/* =====================
INFORMASI PAGE
===================== */

.info-page{
  width:100%;
  min-height:100vh;

  padding:
  60px 22px 80px;
}

/* ICON */

.info-icon{
  width:100%;
  max-width:150px;

  display:block;

  margin:auto;
}

/* CARD */

.info-card{
  width:100%;

  border-radius:24px;

  margin-top:22px;

  padding:
  18px 20px;

  color:white;

  font-size:clamp(14px,3.6vw,19spx);

  line-height:1.7;

  box-shadow:
  0 8px 16px rgba(0,0,0,.07);
}

/* COLORS */

.pink-info{
  background:#ee8e9b;
}

.yellow-info{
  background:#f0c84f;
}

.blue-info{
  background:#7f9ee8;
}

.purple-info{
  background:#d6b8e8;
}

.coral-info{
  background:#ef838f;
}

.olive-info{
  background:#b7bb77;
}

/* BUTTON */

.next-btn{
  width:140px;

  height:52px;

  border-radius:18px;

  background:#e3a3c4;

  color:white;

  text-decoration:none;

  display:flex;
  justify-content:center;
  align-items:center;

  margin:
  35px auto 0;

  font-size:20px;

  box-shadow:
  0 8px 16px rgba(227,163,196,.3);

  transition:.2s;
}

.next-btn:active{
  transform:scale(.95);
} 

/* =====================
FAQ PAGE
===================== */

.faq-page{
  width:100%;
  min-height:100vh;

  padding:
  70px 20px 80px;
}

/* ICON */

.faq-icon{
  width:100%;
  max-width:170px;

  display:block;

  margin:auto;
}

/* FAQ BOX */

.faq-box{
  width:100%;

  background:#e7b0be;

  border-radius:38px;

  padding:
  30px 24px;

  margin-top:-20px;

  box-shadow:
  0 10px 20px rgba(0,0,0,.05);
}

/* FAQ ITEM */

.faq-item{
  margin-bottom:38px;
}

.faq-item:last-child{
  margin-bottom:0;
}

/* QUESTION */

.faq-item h2{
  color:white;

  font-size:
  clamp(16px,4vw,22px);

  line-height:1.5;

  margin-bottom:8px;

  font-weight:normal;
}

/* ANSWER */

.faq-item p{
  color:white;

  font-size:
  clamp(14px,3.6vw,19px);

  line-height:1.7;

  padding-left:14px;
}

/* CHAT BOX */

.chat-box{
  width:100%;

  background:#d7b6e8;

  border-radius:28px;

  margin-top:28px;

  padding:
  22px 18px 28px;

  text-align:center;
}

/* TEXT */

.chat-box h3{
  color:white;

  font-size:
  clamp(15px,3.8vw,20px);

  margin-bottom:14px;

  font-weight:normal;
}

/* BUTTON */

.wa-btn{
  width:100%;

  min-height:52px;

  background:#b7c98c;

  border-radius:18px;

  display:flex;
  align-items:center;
  justify-content:center;

  text-decoration:none;

  color:white;

  font-size:
  clamp(15px,3.8vw,20px);

  box-shadow:
  0 6px 14px rgba(0,0,0,.05);

  transition:.2s;
}

.wa-btn:active{
  transform:scale(.97);
}

/* ======================
ORDER PAGE
====================== */

.order-page{
  width:100%;
  min-height:100vh;

  padding:
  70px 20px 100px;
}

/* ICON */

.order-icon{
  width:100%;
  max-width:190px;

  display:block;

  margin:auto;
}

/* TITLE BOX */

.order-title-box{
  width:100%;

  background:#e9a7b6;

  border-radius:22px;

  padding:
  16px 14px;

  margin-top:14px;

  color:white;

  text-align:center;

  line-height:1.5;

  font-size:20px;

  box-shadow:
  0 6px 12px rgba(0,0,0,.05);
}

/* FORM */

#orderForm{
  margin-top:55px;
}

/* GROUP */

.form-group{
  margin-bottom:70px;
}

/* LABEL */

.form-group label{
  display:block;

  color:#5b382d;

  margin-bottom:10px;

  font-size:18px;
}

/* INPUT */

.form-group input,

.form-group textarea{
  width:100%;

  background:transparent;

  border-radius:22px;

  padding:14px 16px;

  font-size:15px;

  color:#5b382d;

  outline:none;

  font-family:inherit;
}

/* NAMA */

#nama{
  border:
  4px solid #b988d8;

  min-height:58px;
}

/* DETAIL */

#detail{
  border:
  4px solid #8bc34a;

  min-height:140px;

  resize:none;
}

/* DEADLINE */

#deadline{
  border:
  4px solid #ef8893;

  min-height:58px;
}

/* KETERANGAN */

#keterangan{
  border:
  4px solid #efc243;

  min-height:120px;

  resize:none;
}

/* NOTE */

.form-group small{
  display:block;

  color:#5b382d;

  margin-top:8px;

  padding-left:4px;

  line-height:1.4;

  font-size:11px;
}

/* BUTTON */

.submit-btn{
  width:100%;

  min-height:62px;

  border:none;

  background:#e9a7b6;

  border-radius:22px;

  color:white;

  cursor:pointer;

  font-family:inherit;

  font-size:20px;

  box-shadow:
  0 6px 14px rgba(0,0,0,.05);

  transition:.2s;
}

.submit-btn:active{
  transform:scale(.97);
}

/* NOTE */

.wa-note{
  margin-top:14px;

  text-align:center;

  color:#5b382d;

  line-height:1.5;

  font-size:12px;
} 

#deadline{
  border:
  4px solid #ef8893;

  min-height:58px;

  color:#5b382d;

  font-family:'Bryndan';

  padding-right:14px;
}

/* =====================
TESTIMONI PAGE
===================== */

.testi-page{
  width:100%;
  min-height:100vh;

  padding:
  90px 22px 80px;
}

/* TITLE */

.testi-title{
  text-align:center;

  color:#5b382d;

  line-height:1.4;

  font-size:
  clamp(20px,5vw,30px);

  margin-bottom:45px;
}

/* CONTAINER */

.testi-container{
  display:flex;
  flex-direction:column;

  gap:20px;
}

/* CARD */

.testi-card{
  width:100%;

  min-height:125px;

  border-radius:24px;

  padding:
  20px 18px;

  text-decoration:none;

  color:white;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  gap:10px;

  text-align:center;

  transition:.2s;

  box-shadow:
  0 8px 16px rgba(0,0,0,.05);
}

/* ICON */

.testi-card{
  font-size:32px;
}

/* TEXT */

.testi-card span{
  line-height:1.5;

  font-size:
  clamp(15px,3.8vw,20px);
}

/* COLORS */

.pink-card{
  background:#e5a0c2;
}

.green-card{
  background:#95c75d;
}

/* CLICK */

.testi-card:active{
  transform:scale(.97);
}