/* =========================
FILE: style.css
========================= */

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

:root{
  --pink:#f95b8f;
  --lightPink:#e6b8c4;
  --white:#ffffff;
  --black:#111111;
  --gray:#ececec;
}

body{
  font-family:'Poppins', sans-serif;
  background:var(--lightPink);
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:'Poppins', sans-serif;
}

/* =========================
NAVBAR
========================= */

.navbar{
  position:sticky;
  top:0;
  z-index:999;

  width:100%;
  height:125px;

  background:var(--white);

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

  padding:0 70px;
}

.nav-left{
  display:flex;
  align-items:center;
  gap:20px;
}

.logo{
  width:95px;
}

.logo-text h1{
  color:var(--pink);
  font-size:3rem;
  font-family:'Poppins', sans-serif;
  font-weight:600;
}

.logo-text p{
  color:#ff8db2;
  font-family:'Poppins', sans-serif;
}

.nav-menu{
  display:flex;
  align-items:center;
  gap:30px;
}

.nav-link{
  text-decoration:none;
  color:var(--pink);
  font-size:1.8rem;
  font-weight:600;
  font-family:'Poppins', sans-serif;

  padding:10px 24px;
  border-radius:999px;

  transition:.3s;
}

.nav-link.active,
.nav-link:hover{
  background:var(--pink);
  color:white;
}

.separator{
  width:1px;
  height:45px;
  background:#ffb4c9;
}

.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
}

.hamburger span{
  width:28px;
  height:3px;
  background:var(--pink);
  border-radius:20px;
}

/* =========================
HOME
========================= */

.home{
  min-height:100vh;
  background:var(--lightPink);
  position:relative;
  overflow:hidden;
}

/* WAVE */
.home-wave{
  position:absolute;
  top:100px;
  left:0;

  width:100%;
  height:300px;

  background:var(--lightPink);

  border-radius:
    0 0 50% 50% /
    0 0 25% 25%;

  z-index:1;
}
.wave-img{
  width: 1566px;
  height: 711.5px;
  top: 121px;
  left: -60px;
  angle: 0 deg;
  opacity: 1;
}
/* BLOB */
.blob{
  position:absolute;

  width:120%;
  height:420px;


  left:-10%;
  top:220px;

  border-radius:
    0 0 45% 55% /
    0 0 20% 25%;

  filter:blur(8px);

  z-index:1;

  animation:blobMove 8s ease-in-out infinite;
}

@keyframes blobMove{
  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-12px);
  }

  100%{
    transform:translateY(0px);
  }
}

.home-content{
  position:relative;
  z-index:2;

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

  padding:40px 10%;
}

.hero-left{
  width:42%;
  padding-top:128px;
  display:flex;
  justify-content:center;
  align-items:center;
}
.hero-left span{
  padding-left:0;
}
.hero-left h1{
  font-size:7rem;
  line-height:.95;
  text-align:center;

  color:white;

  font-family:'Bagel Fat One', cursive;
  font-weight:400;

  text-shadow:
    0 8px 0 #e53e73,
    0 14px 20px rgba(0,0,0,.18);
}

.hero-right{
  width:48%;
  display:flex;
  justify-content:flex-end;
}

.hero-right img{
  width:min(560px, 100%);
  transform:translate(42px, -22px);
  animation:float 4s ease-in-out infinite;
}

@keyframes float{
  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-15px);
  }

  100%{
    transform:translateY(0px);
  }
}

/* BENEFIT */
/* =========================
BENEFIT CARD FIX
========================= */

.benefit-card{
  position:relative;
  z-index:2;

  width:83%;

  margin:auto;


  background:#ececec;

  border-radius:35px;

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

  padding:45px 35px;
}

/* ITEM */
.benefit-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;

  min-width:220px;
}

/* ICON */
.benefit-item i{
  color:var(--pink);

  font-size:4.2rem;

  margin-bottom:18px;

  display:block;
}

/* TEXT */
.benefit-item h3{
  font-family:'Fredoka',sans-serif;

  font-size:2rem;

  line-height:1.1;

  color:#111;

  font-weight:500; /* FIX: jangan terlalu tebal */
}

/* DIVIDER */
.benefit-divider{
  width:4px;
  height:140px;

  border-radius:20px;

  background:var(--pink);

  opacity:.9;
}
/* =========================
MENU
========================= */
/* =========================
MENU SECTION
========================= */

.main-circle{
  z-index:10;
}

.side-circle.left,
.side-circle.right{
  width:280px;
  height:280px;
}

.side-circle{
  z-index:5;
}

.menu-section{
  position:relative;
  overflow:hidden;

  padding:70px 0 140px;

  background:var(--lightPink);
}

/* TITLE */

.menu-title h2{
  text-align:center;

  font-size:4rem;
  font-weight:700;

  margin-bottom:40px;

  position:relative;
  z-index:50;
  margin-bottom: 80px;
}

/* PINK BACKGROUND */

.menu-bg{
  position:absolute;

  left:0;
  top:330px;

  width:100%;
  height:360px;

  background:var(--pink);
}

/* YUMMY TEXT */

.yummy-text{
  position:absolute;

  left:90px;
  top:455px;

  z-index:15;

  font-size:4.8rem;
  line-height:1.05;

  color:white;

  font-family:'Bagel Fat One', cursive;
  font-weight:400;
}

/* =========================
SLIDER AREA
========================= */

.slider-wrapper{
  position:relative;

  width:100%;
  height:760px;

  z-index:10;
}

.slider{
  position:relative;

  width:100%;
  height:100%;
}

/* =========================
SLIDE
========================= */

.slide{
  position:absolute;

  inset:0;

  opacity:0;

  transition:
  transform 1s cubic-bezier(.22,1,.36,1),
  opacity .7s ease;
}

/* ACTIVE SLIDE */

.slide.active{
  opacity:1;
  z-index:5;
}

/* =========================
CENTER CIRCLE
========================= */

.main-circle{
  position:absolute;

  left:50%;
  top:90px;

  transform:translateX(-50%);

  width:460px;
  height:460px;

  border-radius:50%;

  background:#f0d8e0;

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

  z-index:10;
}

.main-circle span{
  font-size:3rem;
  font-weight:700;
}

/* =========================
LEFT CIRCLE
========================= */

.side-circle.left{
  position:absolute;

  left:80px;
  bottom:40px;

  width:320px;
  height:320px;

  border-radius:50%;

  background:#f0d8e0;

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

  z-index:5;
}

/* RIGHT CIRCLE */

.side-circle.right{
  position:absolute;

  right:80px;
  bottom:40px;

  width:320px;
  height:320px;

  border-radius:50%;

  background:#f0d8e0;

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

  z-index:5;
}

.side-circle span{
  text-align:center;

  font-size:2rem;
  font-weight:700;
}

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

.menu-info{
  position:absolute;
  right:clamp(24px, 4vw, 72px);
  top:210px;

  width:min(26vw, 330px);
  max-width:330px;

  z-index:30;
  padding:14px 16px 16px;
  border-radius:18px;
  background:rgba(255, 255, 255, 0.12);
  backdrop-filter:blur(2px);
}

.menu-info h1{
  color:var(--white);

  font-size:clamp(2.2rem, 2.4vw, 3rem);
  font-weight:700;

  margin-bottom:10px;

  line-height:1;
}

.menu-info p{
  text-shadow:0 2px 8px rgba(0,0,0,.18);

  color:white;

  font-size:clamp(.95rem, .95vw, 1.05rem);
  line-height:1.55;

  font-family:'Baloo 2', cursive;
  font-weight:600;

  max-width:100%;
  overflow-wrap:anywhere;
  text-wrap:balance;
}

/* =========================
PRICE
========================= */

.price{
  position:absolute;

  left:50%;
  bottom:30px;

  transform:translateX(-50%);

  width:320px;
  height:95px;

  border-radius:999px;

  background:var(--pink);

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

  color:white;

  font-size:4rem;
  font-weight:700;

  z-index:20;
}

/* =========================
ARROW
========================= */

.menu-arrow{
  position:absolute;

  top:50%;

  transform:translateY(-50%);

  width:75px;
  height:75px;

  border:none;
  border-radius:50%;

  background:rgba(255,255,255,.4);

  color:var(--pink);

  font-size:2rem;

  cursor:pointer;

  z-index:30;

  transition:.3s;
}

.menu-arrow:hover{
  transform:
  translateY(-50%)
  scale(1.1);
}

.menu-arrow.left{
  left:50px;
}

.menu-arrow.right{
  right:50px;
}
/* =========================
ABOUT
========================= */

.about-section{
  padding:80px 0;
  background:var(--lightPink);
}

.about-card{
  width:83%;

  margin:auto;

  background:var(--gray);

  border-radius:40px;

  border:2px solid #ff9fbc;

  padding:50px;

  display:flex;
  align-items:center;
  gap:60px;
}

.about-logo-circle{
  width:380px;
  height:380px;

  border-radius:50%;
  overflow:hidden;

  background:#fff;
  border:8px solid #f7d0da;
  box-shadow:0 10px 0 rgba(255,95,134,.08);

  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px;
}

.about-logo-circle img{
  width:72%;
  height:72%;
  object-fit:contain;
  object-position:center;
  display:block;
  border-radius:0;
}

.about-right h2{
  color:var(--pink);
  font-size:4rem;
  margin-bottom:20px;
  font-family:'Poppins', sans-serif;
}

.about-right p{
  font-size:2rem;
  line-height:1.6;
  font-weight:600;
  color:#333;
  font-family:'Poppins', sans-serif;

  margin-bottom:25px;
}

.features{
  display:flex;
  align-items:flex-start;
  gap:25px;
}

.feature{
  text-align:center;
  max-width:180px;
  font-family:'Poppins', sans-serif;
}

.feature i{
  width:70px;
  height:70px;

  border-radius:50%;

  background:#f8dde5;

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

  color:var(--pink);

  font-size:2rem;

  margin:auto;
  margin-bottom:15px;
}

.feature-divider{
  width:2px;
  height:80px;
  background:#ff9fbc;
}

/* =========================
CONTACT
========================= */

.contact-section{
  background:var(--lightPink);
  padding-top:20px;
}

.contact-card{
  width:72%;

  margin:auto;

  background:var(--gray);

  border-radius:28px;

  padding:50px;

  text-align:center;
}

.contact-card h2{
  color:var(--pink);
  font-size:3rem;
  font-family:'Baloo 2', cursive;
}

.contact-card h3{
  margin-top:10px;
  font-size:2rem;
  font-family:'Baloo 2', cursive;
}

.line{
  width:50%;
  height:3px;

  background:#111;

  margin:20px auto 35px;
}

.wa-btn{
  width:520px;
  height:80px;

  margin:auto;

  border-radius:999px;

  background:#2ecc5f;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;

  text-decoration:none;
  color:white;

  font-size:2rem;
  font-weight:700;
  font-family:'Baloo 2', cursive;

  transition:.3s;
}

.wa-btn:hover{
  transform:scale(1.04);
}

.wa-btn i{
  font-size:2.5rem;
}

/* =========================
FOOTER
========================= */

.footer{
  margin-top:90px;

  background:var(--pink);

  position:relative;

  overflow:hidden;

  color:white;

  isolation:isolate;
}

/* WAVE */
.footer-wave{
  position:absolute;

  top:-140px;
  left:-5%;

  width:110%;
  height:240px;

  background:var(--lightPink);

  border-radius:
    0 0 50% 50% /
    0 0 40% 40%;

  z-index:1;
}

.footer-wave::before{
  content:"";

  position:absolute;

  width:120%;
  height:180px;

  background:#efc4d0;

  left:-10%;
  top:45px;

  border-radius:
    0 0 50% 50% /
    0 0 35% 35%;
}

.footer-content{
  position:relative;
  z-index:2;

  padding:140px 10% 70px;

  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}

.footer-left h1{
  font-size:6rem;
  font-family:'Baloo 2', cursive;
}

.footer-left p{
  font-size:1.8rem;
  line-height:1.7;
  font-family:'Baloo 2', cursive;
}

.footer-center{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.footer-center a{
  color:white;
  text-decoration:none;
  font-size:2rem;
  font-family:'Baloo 2', cursive;
}

.footer-divider{
  width:2px;
  height:250px;
  background:white;
}

.footer-right{
  display:flex;
  flex-direction:column;
  gap:40px;
}

.footer-social{
  display:flex;
  align-items:center;
  gap:18px;

  font-size:2rem;
  font-family:'Baloo 2', cursive;
}

.copyright{
  text-align:center;
  padding-bottom:35px;
  font-size:2rem;
  font-family:'Baloo 2', cursive;
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:1100px){

  html{
    font-size:65%;
  }

  .home-content{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:18px;
    padding:28px 6% 26px;
  }

  .hero-left{
    width:100%;
    padding-top:10px;
    justify-content:center;
    align-items:center;
    margin-left:0;
  }

  .hero-left h1{
    margin:0 auto;
    max-width:100%;
    font-size:clamp(3rem, 7vw, 4.8rem);
    line-height:.85;
  }

  .hero-right{
    width:100%;
    justify-content:center;
  }

  .hero-right img{
    width:min(360px, 72%);
    transform:none;
  }

  .benefit-card{
    flex-direction:column;
    gap:30px;
  }

  .benefit-divider{
    width:70%;
    height:4px;
  }

  .slide{
    grid-template-columns:1fr;
    text-align:center;
    gap:40px;
  }

  .menu-info{
    padding:0;
  }

  .side-circle{
    display:none;
  }

  .main-circle{
    position:absolute;

    left:50%;
    top:120px;

    transform:translateX(-50%);

    width:400px;
    height:400px;

    border-radius:50%;

    background:#f0d8e0;

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

    z-index:10;
  }

  .main-circle span{
    font-size:2rem;
  }

  .yummy-text{
    display:none;
    left:40px;
    top:520px;

    font-size:5.5rem;
  }

  .about-card{
    flex-direction:column;
    text-align:center;
  }

  .features{
    flex-direction:column;
    align-items:center;
  }

  .feature-divider{
    width:70%;
    height:2px;
  }

  .footer-content{
    flex-direction:column;
    gap:50px;
  }

  .footer-divider{
    width:100%;
    height:2px;
  }

  .nav-menu{
    position:fixed;

    top:125px;
    right:-100%;

    width:300px;
    height:100vh;

    background:#ececec;

    flex-direction:column;

    padding-top:50px;

    transition:.4s;
  }

  .nav-menu.active{
    right:0;
  }

  .separator{
    display:none;
  }

  .hamburger{
    display:flex;
  }

  .wa-btn{
    width:100%;
  }

}
/* =========================
RESPONSIVE
========================= */
/* =========================
FIX IMAGE MENU - PNG TRANSPARAN
========================= */

/* Main circle: PNG ditampilkan penuh tanpa terpotong */
.main-circle img{
  width:88%;
  height:88%;
  object-fit:contain;
  object-position:center bottom;
  border-radius:0;
  display:block;
  /* drop-shadow untuk PNG transparan agar menyatu dengan desain */
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.18));
}

/* Side circles: PNG lebih kecil agar tidak mepet tepi */
.side-circle img{
  width:82%;
  height:82%;
  object-fit:contain;
  object-position:center bottom;
  border-radius:0;
  display:block;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.15));
}

/* =========================
RESPONSIVE GLOBAL
========================= */

img{
  max-width:100%;
  height:auto;
}

body{
  overflow-x:hidden;
}

/* =========================
NAVBAR
========================= */

@media(max-width:768px){

  .navbar{
    height:90px;
    padding:0 18px;
  }

  .nav-left{
    gap:12px;
  }

  .logo{
    width:58px;
  }

  .logo-text h1{
    font-size:2.3rem;
    line-height:1;
  }

  .logo-text p{
    font-size:1rem;
  }

  .hamburger span{
    width:26px;
    height:3px;
  }

  .nav-menu{
    top:90px;
    width:240px;
    padding-top:35px;
    gap:18px;
  }

  .nav-link{
    font-size:1.5rem;
    width:85%;
    text-align:center;
  }

}

/* =========================
HOME MOBILE
========================= */

@media(max-width:768px){

  .home{
    min-height:auto;
    padding-bottom:40px;
  }

  .home-wave{
    top:70px;
    height:180px;
  }

  .wave-img{
    width:100%;
    height:auto;
    left:0;
  }

  .blob{
    top:160px;
    height:260px;
  }

  .home-content{
    padding:40px 20px 10px;
    gap:10px;
  }

  .hero-left h1{
    font-size:3.5rem;
    margin-top:30px;
  }

  .hero-right img{
    width:260px;
  }

  .benefit-card{
    width:92%;
    border-radius:25px;
    padding:25px 15px;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
  }

  .benefit-item{
    min-width:auto;
  }

  .benefit-divider{
    display:none;
  }

  .benefit-item i{
    font-size:2.6rem;
    margin-bottom:10px;
  }

  .benefit-item h3{
    font-size:1.3rem;
  }

}

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

@media(max-width:768px){

  .menu-section{
    padding:40px 0 90px;
  }

  .menu-title h2{
    font-size:3rem;
    margin-bottom:25px;
  }

  .menu-bg{
    top:250px;
    height:270px;
  }

  .slider-wrapper{
    height:700px;
  }

  .slide{
    width:100%;
  }

  .main-circle{
    width:240px;
    height:240px;

    top:70px;
    left:50%;

    transform:translateX(-50%);

    box-shadow:
    0 10px 25px rgba(0,0,0,.15);
  }

  .side-circle.left{
    width:95px;
    height:95px;

    left:20px;
    bottom:220px;

    opacity:.9;
  }

  .side-circle.right{
    width:95px;
    height:95px;

    right:20px;
    bottom:220px;

    opacity:.9;
  }

  .menu-info{
    width:88%;

    left:50%;
    top:360px;

    transform:translateX(-50%);

    text-align:center;
  }

  .menu-info h1{
    font-size:2.4rem;
    margin-bottom:14px;
  }

  .menu-info p{
    font-size:1.05rem;
    line-height:1.7;

    padding:0 5px;
  }

  .price{
    width:180px;
    height:58px;

    font-size:2rem;

    bottom: 140px;
  }

  .menu-arrow{
    width:42px;
    height:42px;

    font-size:1rem;

    top:46%;
  }

  .menu-arrow.left{
    left:10px;
  }

  .menu-arrow.right{
    right:10px;
  }

  .yummy-text{
    display:none;
  }

}

/* =========================
HP KECIL
========================= */

@media(max-width:480px){

  html{
    font-size:50%;
  }

  .hero-left h1{
    font-size:3rem;
  }

  .hero-right img{
    width:220px;
  }

  .benefit-card{
    grid-template-columns:1fr;
  }

  .slider-wrapper{
    height:650px;
  }

  .main-circle{
    width:210px;
    height:210px;

    top:75px;
  }

  .side-circle.left,
  .side-circle.right{
    width:80px;
    height:80px;

    bottom:240px;
  }

  .menu-info{
    top:330px;
    width:90%;
  }

  .menu-info h1{
    font-size:2.2rem;
  }

  .menu-info p{
    font-size:.95rem;
    line-height:1.6;
  }

  .price{
    width:160px;
    height:52px;

    font-size:1.8rem;
  }

  .about-card{
    width:92%;
    padding:30px 20px;
  }

  .about-logo-circle{
    width:220px;
    height:220px;
  }

  .about-logo-circle img{
    width:140px;
  }

  .about-right h2{
    font-size:2.5rem;
  }

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

  .contact-card{
    width:92%;
    padding:30px 18px;
  }

  .contact-card h2{
    font-size:2.4rem;
  }

  .contact-card h3{
    font-size:1.5rem;
  }

  .wa-btn{
    height:60px;
    font-size:1.4rem;
  }

  .footer-content{
    padding:120px 8% 50px;
    gap:30px;
  }

  .footer-left h1{
    font-size:3.5rem;
  }

  .footer-left p,
  .footer-center a,
  .footer-social,
  .copyright{
    font-size:1.3rem;
  }

}

/* =========================
TABLET
========================= */

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

  .slider-wrapper{
    height:850px;
  }

  .main-circle{
    width:340px;
    height:340px;

    top:90px;
  }

  .side-circle.left,
  .side-circle.right{
    width:170px;
    height:170px;
  }

  .menu-info{
    width:80%;

    top:470px;
    left:50%;

    transform:translateX(-50%);

    text-align:center;
  }

  .menu-info p{
    max-width:100%;
  }

}

/* =========================
LARGE DESKTOP
========================= */

@media(min-width:1600px){

  html{
    font-size:100%;
  }

  .home-content,
  .footer-content,
  .about-card{
    max-width:1600px;
    margin:auto;
  }

}