@charset "utf-8";
/* CSS Document */
 /* Fonts */
    @font-face {
      font-family: "Sekate";
      src: url("font/Sekate.ttf") format("truetype");
    }
    @font-face {
      font-family: "Mont";
      src: url("font/Mont.ttf") format("truetype");
    }
    @font-face {
      font-family: "Helvetica World";
      src: url("font/HelveticaWorld-Regular.ttf") format("truetype");
    }

	* {
	  -webkit-text-size-adjust: none;
	  text-size-adjust: none;
	}

    /* Reset */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; }
    body {
      margin: 0;
      background: #000;
      font-family: system-ui, apple-system, sans-serif;
      overflow-x: hidden;
    }
    img { max-width: 100%; height: auto; display: block; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; cursor: pointer; }

    /* Phone Container -*/
    .phone-stage {
      min-height: 100vh;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      padding: 0;
      background: #000; 
    }

    .phone {
      width: 435px;  
      background: #fff;
      transform-origin: top center;
      position: relative;
	  margin: 0 auto; 
    }

    /* Section Base */
    .section {
      position: relative;
      width: 100%;
      overflow: hidden;
      background: #428438; 
	  margin: 0; 
      padding: 0; 
    }

    /* Background Layers */
    .layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
	  
    }
    .layer img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center; vertical-align: bottom;
    }

    .section > *:not(.layer) {
      position: relative;
      z-index: 1;
    }
	
	.section-top-seller {
	  height: 500px;
	  font-family: "Sekate";
	  color: #fffbe7;
	  margin: 0;
	  padding: 0;
	  overflow: hidden; 
	  margin-top: 0px; 
	}

	/* HOME SECTION */
	.section-home {
	  height: 415px; 
	  margin-bottom: -2px;
	  background: #428438; 
	  line-height: 0;
	}

    .brand {
      position: absolute;
      top: 36px;
      left: 50%;
      transform: translateX(-50%);
      width: 78%;
      max-width: 360px;
      animation: floatingBrand 5s ease-in-out infinite;
}

	.brand img {
	  width: 100%;
	  height: auto;
	  display: block;
	}

	/* Floating Animation */
	@keyframes floatingBrand {
	  0%, 100% {
		transform: translateX(-50%) translateY(0px);
	  }
	  50% {
		transform: translateX(-50%) translateY(-5px);
	  }
	}
  
 /* FLOATING NAV */
    .floating-nav {
      position: fixed;
      left: 16px;
      bottom: 18px;
      z-index: 9999;
	  transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
       touch-action: none;    
    }
    .floating-nav__toggle {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      border: 0;
      background: #f2cf66;
      box-shadow: 0 10px 26px rgba(0,0,0,0);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .floating-nav__toggle img { width: 55px; }
    .floating-nav__panel {
      position: absolute;
      left: 0;
      bottom: 68px;
      padding: 2px;
      background: transparent;
      transform: translateX(-12px);
      opacity: 0;
      pointer-events: none;
      transition: all 220ms ease;
    }
    .floating-nav__panel.is-open {
      transform: translateX(0);
      opacity: 1;
      pointer-events: auto;
    }
    .floating-nav__list {
      list-style: none;
    }
    .floating-nav__list li { margin-bottom: 0px; }
    .floating-nav__item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 55px;
      height: 55px;
      gap: 10px;
      padding: 0;
      border-radius: 50%;
    }
    .floating-nav__item img {
      width: 50px;
      height: 50px;
      border-radius: 0;
      background: transparent;
      padding: 0;
    } 

	/* DRAGGABLE ENHANCEMENT */
	.floating-nav.is-draggable {
	  cursor: grab;
	  user-select: none;
	  -webkit-user-select: none;
	}

	.floating-nav.is-dragging {
	  cursor: grabbing;
	  transition: none !important; 
	  opacity: 0.9;
	}

    /*&Prevent text selection while dragging */
	.floating-nav.is-dragging * {
	  user-select: none;
	  -webkit-user-select: none;
	  pointer-events: none;
	}

	/* Prevent nav going off-screen */
	.floating-nav {
	  max-width: calc(100vw - 32px);
	  max-height: calc(100vh - 32px);
	}


	   /* TOP SELLER SECTION */
	.section-top-seller {
	  height: 500px;
	  font-family: "Sekate";
	  color: #fffbe7;
	}
	.nav-top {
	  position: absolute;
	  top: 3px;
	  left: 50%;
	  transform: translateX(-50%);
	  width: 88%;
	  max-width: 380px;
	}
	.nav-top__grid {
	  list-style: none;
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: center;
	  gap: 10px 0px;
	  padding: 0;
	  margin: 0;
	}
	.nav-top__grid li {
	  width: calc(33.333% - 4px);
	  display: flex;
	  justify-content: center;
	}
	.nav-top__grid li:nth-child(4),
	.nav-top__grid li:nth-child(5) {
	  width: calc(30% - 4px);
	  justify-content: center;
	  padding: 0;
	}
	.nav-top a {
	  width: 110px;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  gap: 0px;
	  color: #f4e9dd;
	  font-family: "Mont";
	  font-weight: 900;
	  letter-spacing: 1px;
	  text-align: center;
	  text-decoration: none;
	}
	.nav-top a img {
	  width: 62px;
	  height: 62px;
	  object-fit: contain;
	}
	.nav-top a span {
	  font-size: 11px;
	  line-height: 1.2;
	}
	.topseller-title {
	  position: absolute;
	  left: 18px;
	  bottom: 5px;
	  transform: translateY(25px);
	  font-size: 46px;
	  letter-spacing: 2px;
		
	  /* Animation setup */
	  opacity: 0;
	  transform: translateX(-100px) translateY(25px); 
	  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.topseller-title.animate {
	  opacity: 1;
	  transform: translateX(0) translateY(25px); 

	}

    /* KATEGORI SLIDER */
    .kategori-block {
      padding: 0;
    }

    .slider {
      padding: 0;
    }

    .slider__viewport {
      position: relative;
      height: 560px;
      border-radius: 0;
      overflow: hidden;
      background-size: cover;
      background-position: center;
	  transition: background-image 0.1s ease-in-out;
    }

    .slider__title {
      position: absolute;
      top: 35px;
      left: 0;
      right: 0;
      text-align: center;
	  font-family: "Sekate";
      font-size: 50px;
	  letter-spacing: 2px;
      font-weight: 800;
      color: #fffbe7;
      text-shadow: 0 4px 14px rgba(0,0,0,0.65);
      z-index: 30;
	  white-space: nowrap;  
      padding: 0 20px;   
		
      animation: floating 4s ease-in-out infinite;
    }

	@keyframes floating {
	  0%, 100% {
		transform: translateY(0);
	  }
	  50% {
		transform: translateY(-5px);
	  }

		}

    .slider__btn {
      position: absolute;
      top: 240px;
      transform: translateY(-50%);
      width: 62px;
      height: 62px;
      border-radius: 50%;
      border: 0;
      background: rgba(0,0,0,0.78);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 40;
	  cursor: pointer;
	  animation: continuousZoom 1.5s ease-in-out infinite;
    }

    .slider__btn--prev { left: 30px; }
    .slider__btn--next { right: 30px; }
    .slider__btn img { width: 70px;  
	  pointer-events: none; 
	}
	
	@keyframes continuousZoom {
		0% {
		transform: translateY(-50%) scale(1);
	  }
	  50% {
		transform: translateY(-50%) scale(1.1);
	  }
	  100% {
		transform: translateY(-50%) scale(1);
	  }
	}

    .slide {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 64px 14px 18px;
      opacity: 0;
      transform: translateX(14px);
      transition: all 240ms ease;
      z-index: 10;
      pointer-events: none;
    }
    .slide.is-active {
      opacity: 1;
      transform: translateX(0);
      pointer-events: auto;
    }

    .slide__media {
      height: 320px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .slide__media img {
      height: 305px;
      width: auto;
      object-fit: contain;
      filter: drop-shadow(0 14px 22px rgba(0,0,0,0.35));
    }

    .slide__content {
      margin-top: 8px;
      text-align: center;
      padding: 6px 12px 16px;
    }

    .slide h3 {
      font-size: 25px;
      font-weight: 900;
	  font-family: "Helvetica World";
      color: #f3cb4e;
      text-shadow: 0 4px 14px rgba(0,0,0,0.15);
      margin-bottom: 10px;
	  transform: translateY(-40px);
    }


   .price-link {
	  display: inline-block;
	  background: #fff;  
	  border-radius: 14px;
	  padding: 5px 18px;
	  font-weight: 900;
	  font-size: 25px;
	  
	  font-family: "Helvetica World";
	  box-shadow: 0 10px 18px rgba(0,0,0,0.15);
	  margin-bottom: 10px;
	  position: relative;
	  z-index: 999;
	  pointer-events: auto;
	  transform: translateY(-40px);
	}

	.gradient-text {
	  background-image: linear-gradient(to bottom, #ff3131, #8f2020);
	  -webkit-background-clip: text;
	  background-clip: text;
	  -webkit-text-fill-color: transparent;
	}

	.slide {
	  display: none;
	  pointer-events: none;
	}

	.slide.is-active {
	  display: block;
	  pointer-events: auto;
	}

	.slide {
	  opacity: 0;
	  pointer-events: none;
	  visibility: hidden;
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  transition: opacity 0.3s ease;
	}

	.slide.is-active {
	  opacity: 1;
	  pointer-events: auto;
	  visibility: visible;
	  position: relative;
	}
    .desc {
      font-size: 15px;
      letter-spacing: 1px;
      color: #fff;
      text-shadow: 0 4px 14px rgba(0,0,0,0.15);
      font-family: "Mont";
      font-weight: 600;
      padding: 0 10px;
	  transform: translateY(-40px);
    }

    /* LOCATION */
    .section-location {
      height: 320px;
    }

    .location-text {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 8px;
	  top: 240px;
      padding: 0 16px 10px;
      text-align: center;
      z-index: 2;
    }
    .location-lead {
      display: block;
      margin-bottom: 8px;
      font-family: "Sekate";
      font-size: 24px;
      color: #fff;
      text-shadow: 0 4px 14px rgba(0,0,0,0.55);
    }
    .location-text a {
      font-family: "Helvetica World";
      font-weight: 900;
      font-size: 15px;
      color: #fff5e1;
      text-decoration: underline;
    }

    /* LINKTREE */
    .section-linktree {
      height: 235px;
    }

    .linktree-title {
      padding: 34px 50px 10px;
      font-size: 22px;
      line-height: 1.2;
      color: #111;
      text-align: center;
    }
    .t-helvetica { font-family: "Helvetica World";
	  font-weight: 700; 
	  color: #1a491d;
	  font-size: 20px; 
    }
    .t-sekate { font-family: "Sekate"; 
	  font-weight: 900; 
	  color: #a00803; 
	  font-size: 35px;}

    .linktree-box {
      width: 82%;
      margin: 2px auto 0;
      border: 5px solid #f2cf66;
      border-radius: 99px;
      padding: 5px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      background: rgba(255,255,255,0.95);
	  cursor: pointer;
	  animation: continuousZoom 1.5s ease-in-out infinite;
	}

	@keyframes continuousZoom {
	  0%, 100% {
		transform: scale(1);
	  }
	  50% {
		transform: scale(1.08);
	  }
	}

    .linktree-url {
      font-family: "Helvetica World";
      font-weight: 900;
      font-size: 25px;
	  margin-right: 55px;
	  margin-bottom: 10px;
    }
    .linktree-icon {
      width: 34px;
      height: 34px;
	  margin-left: 20px;
    }

    /* REVIEW */
    .section-review {
      height: 420px;
      color: #fff;
    }

    .review-title {
      padding: 30px 18px 10px;
      font-family: "Sekate";
      font-size: 55px;
      text-shadow: 0 4px 14px rgba(0,0,0,0.55);
    }

    .review-slider {
      padding: 10px 16px 18px;
      overflow: hidden;
    }

    .review-track {
	  display: flex;
	  gap: 35px;
	}

    .review-card {
      width: 350px;
	  height : 225px;
      flex: 0 0 auto;
      border-radius: 18px;
	  border : 4px solid #000000 ;
	  margin-top: 25px;
      padding: 14px;
      background: rgba(247,215,118,0.7);
      color: #111;
      box-shadow: 0 10px 20px rgba(0,0,0,0.18);
	  position: relative;
    }

    .review-card p {
      margin: 10px 0;
      font-family: "Mont";
      font-weight: 600;
      font-size: 13px;
      line-height: 1.25;
    }
    .stars {
      font-size: 20px;
      letter-spacing: 2px;
	  color: orange;
	  -webkit-text-stroke: 1px black;
	  text-stroke: 1px black;
    }

    .reviewer {
      font-family: "Mont";
      font-weight: 900;
      font-size: 12px;
      opacity: 0.9;
    }

	 .more-review-btn {
	  position: absolute;
	  bottom: 6.5px;
	  right: 7px;
	  display: inline-block;
	  cursor: pointer;
	  transition: all 0.3s ease;
	  text-decoration: none;
	  z-index: 10;
	}
	.more-review-btn img {
	  width: 120px;
	  height: auto;
	  display: block;
	  pointer-events: none;
	}
	.more-review-btn:hover {
	  transform: scale(1.08);
	  filter: brightness(1.1);
	}
	.more-review-btn:active {
	  transform: scale(0.95);
	}

    /* SERVIS */
    .section-servis {
      height: 370px;
    }

    .servis-title {
      position: absolute;
      top: 35px;
      left: 0;
      right: 75px;
      padding: 0 16px;
	  color: #347928 ;
	  font-family: Helvetica World;
      font-size: 22px;
      font-weight: 900;
      z-index: 2;
    }

    .servis-marquee {
      padding: 120px 16px 16px;
      overflow: hidden;
    }

    .servis-track {
      display: flex;
      gap: 20px;
    }

    .servis-item {
      width: 200px;
      flex: 0 0 auto;
    }
    .servis-item img {
      width: 100%;
      height: 180px;
      object-fit: contain;
    }

    /* SLOGAN */
    .section-slogan {
      height: 215px;
    }

    .layer-slogan_text {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .layer-slogan_text img {
      width: 92%;
      margin-left: 30px;
      object-fit: contain;  
	  opacity: 0;
	  transform: scale(0.3);
	  transition: all 0.8s ease-out;
	}

	.layer-slogan_text img.zoom-in {
	  opacity: 1;
	  transform: scale(1);
	}

    /* ABOUT */
    .section-about {
      height: 443px;
	  
    }

    .layer-about-title {
	  position: absolute;
	  top: 20px;
	  left: 10px;
	  z-index: 2;
	  opacity: 0;
	  transform: translateX(-100%);
	  transition: transform 1s ease-out, opacity 1s ease-out;
	}

	.layer-about-title.animate {
	  transform: translateX(0);
	  opacity: 1;
	}

	.layer-about-title img {
	  width: 260px;
	  height: auto;
	}

    .about-card {
      position: absolute;
      left: 85px;
      right: 16px;
      top: 231px;
      z-index: 3;
    }
    .about-text {
      margin-right: 125px;
      line-height: 1.2;
	  font-family: "Mont";
	  font-weight: 500;
	  font-size: 10.5px;
      color: #111;
    }
    .about-more {
      position: absolute;
      left: 278px;
      top: 165px;
      transform: translateX(-95%);
      background: transparent;
      border: 0;
      font-family: "Mont";
      font-weight: 500;
      font-size: 18px;
      color: #0a6b3d;
	  cursor: pointer;
	  -webkit-transform: translateX(-93%);
    }

    .about-slide {
      overflow: hidden;
      height: 0;
      opacity: 0;
      transition: height 420ms ease, opacity 280ms ease;
	  display: none;
	  background-color: #428438;
	  
    }
    .about-slide.is-open {
      opacity: 1;
	  display: block;
    }

    .about-slide__inner {
      position: relative;
    }
    .about-slide__img {
      width: 100%;
      height: auto;
	  display: block;
    }

    .about-slide__text {
      position: absolute;
      width: 200px;
      font-size: 10.5px;
	  font-family: "Mont";
      line-height: 1.2;
      color: #111;
	  font-weight: 500;
	  -webkit-font-smoothing: antialiased;
	  backface-visibility: hidden;
	  -webkit-backface-visibility: hidden;
    }
    .about-slide__text--top {
      top: 97px;
      right: 42px;
    }
    .about-slide__text--bottom {
      top: 243px;
      right: 165px;
    }


    /* FOOTER */
    .section-contact {
      height: 238px;
      color: #000000;
	  -webkit-text-size-adjust: 100%;
      overflow: hidden;
    }

    .footer-title {
      padding: 20px 45px 2px;
      font-family: "Mont";
      font-weight: 500;
      font-size: 9px;
      text-align: center;
    }

    .socials {
      display: flex;
      justify-content: center;
      gap: 0px;
      padding: 2px 30px;
    }
    .socials a {
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .socials img {
      width: 22px;
      height: 22px;
    }

    .footer-handle {
      margin: 0 0 0;
	  
      text-align: center;
      font-family: "Mont";
	  font-size: 9px;
      font-weight: 500;
    }

	/* Contact Information Section */
	.footer-info {
	  display: flex;
	  justify-content: space-between;
	  padding: 15px 15px 0;
	  gap: 20px;
	  margin: 0 5px;
	  padding-top: 40px; 
	  -webkit-text-size-adjust: 100%;
	  position: relative;
	  width: calc(100% - 10px);
	}

	.footer-contact {
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	  gap: 10px;
	  margin-top: 90px;
	  transform: translateY(-100px);
	  -webkit-text-size-adjust: 100%;
 	  min-width: 0;
	}

	.contact-item {
	  display: flex;
	  align-items: flex-start;
	  gap: 1px;
	  font-family: "Helvetica World";
	  margin-right: 50px;
	  font-size: 9px;
	  font-weight: 500;
	  line-height: 1.3;
	  margin-bottom: -25px;
  	  -webkit-text-size-adjust: 100%;

	}

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

	.contact-icon {
	  width: 45px;
	  height: 45px;
	  min-width: 45px;
	  min-height: 45px;
	  flex-shrink: 0;
	  display: block;
	  object-fit: contain;
	  transform: translateY(-15px);
	}

	.footer-hours {
	  flex: 0 0 auto;
	  text-align: left;
	  font-family: "Helvetica World";
	  transform: translateY(-10px);
	}

	.footer-hours h3 {
	  font-size: 11px;
	  font-weight: 500;
	  margin: 0 0 10px;

	}

	.footer-hours p {
	  font-size: 9px;
	  font-weight: 500;
	  margin: 3px 0;
	  line-height: 1.3;
	}