:root {
  --green: #8ea58d;
  --green-dark: #506553;
  --green-soft: #e9efe6;

  --brown: #765c49;
  --brown-dark: #3f3128;

  --cream: #f8f6f0;
  --white: #ffffff;

  --line: #dedbd2;

  --shadow: 0 18px 50px rgba(63, 49, 40, 0.1);

  --radius: 26px;
}


/* =========================
   RESET
========================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--brown-dark);
  font-family: "DM Sans", sans-serif;
  line-height: 1.65;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}


/* =========================
   HEADER
========================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;

  height: 82px;

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

  padding: 0 5vw;

  background: rgba(248, 246, 240, 0.88);

  backdrop-filter: blur(16px);

  border-bottom: 1px solid rgba(118, 92, 73, 0.09);
}


/* BRAND */

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.brand-mark {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border: 1px solid var(--green-dark);
  border-radius: 50%;

  font-family: "Playfair Display", serif;
  font-size: 21px;

  color: var(--green-dark);
}

.brand strong {
  display: block;

  letter-spacing: 0.12em;
  font-size: 15px;
}

.brand small {
  display: block;

  font-size: 8px;
  letter-spacing: 0.08em;

  color: #8a7a6c;

  margin-top: -2px;
}


/* DESKTOP NAV */

.desktop-nav {
  display: flex;
  gap: 28px;

  font-size: 13px;
  color: #65584e;
}

.desktop-nav a:hover {
  color: var(--green-dark);
}


/* HEADER ACTIONS */

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}


/* LANGUAGE */

.language-switcher {
  padding: 3px;

  border: 1px solid var(--line);
  border-radius: 999px;

  background: #fff;
}

.lang-btn {
  border: 0;
  background: transparent;

  padding: 5px 8px;

  border-radius: 999px;

  font-size: 10px;
  font-weight: 700;

  color: #86796e;

  cursor: pointer;
}

.lang-btn.active {
  background: var(--green-dark);
  color: #fff;
}


/* MOBILE MENU BUTTON */

.menu-toggle {
  display: none;

  border: 0;
  background: none;

  font-size: 22px;

  color: var(--brown-dark);

  cursor: pointer;
}


/* MOBILE NAV */

.mobile-nav {
  display: none;
}


/* =========================
   GENERAL
========================= */

.section {
  padding: 110px 7vw;
}

.eyebrow {
  margin: 0 0 18px;

  color: var(--green-dark);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.22em;
}


/* =========================
   HERO
========================= */

.hero {
  min-height: calc(100vh - 82px);

  display: grid;

  grid-template-columns: 1fr 1.05fr;

  gap: 7vw;

  align-items: center;

  padding-top: 70px;
}


/* HERO TEXT */

.hero h1 {
  margin: 0;

  font-family: "Playfair Display", serif;

  font-size: clamp(48px, 6.2vw, 86px);

  font-weight: 500;

  line-height: 1.08;

  letter-spacing: -0.04em;
}

.hero h1 em {
  color: var(--green-dark);

  font-style: italic;
}

.hero-text {
  max-width: 520px;

  margin: 28px 0;

  color: #75685d;

  font-size: 16px;
}


/* HERO BUTTONS */

.hero-actions {
  display: flex;
  align-items: center;

  gap: 28px;

  margin-top: 34px;
}


/* BUTTON */

.btn {
  display: inline-flex;

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

  border-radius: 999px;

  padding: 14px 23px;

  font-size: 12px;
  font-weight: 700;

  transition: 0.25s ease;
}

.btn-primary {
  background: var(--green-dark);

  color: #fff;
}

.btn-primary:hover {
  transform: translateY(-2px);

  box-shadow:
    0 12px 28px rgba(80, 101, 83, 0.22);
}

.btn-dark {
  background: var(--brown-dark);

  color: #fff;
}

.text-link {
  font-size: 12px;
  font-weight: 700;
}

.text-link:hover {
  color: var(--green-dark);
}


/* =========================
   PLANT SLIDER
========================= */

.plant-slider {
  position: relative;
}

.slider-track {
  position: relative;

  aspect-ratio: 4 / 5;

  overflow: hidden;

  border-radius: 42% 42% 28px 28px;

  box-shadow: var(--shadow);
}

.slide {
  position: absolute;

  inset: 0;

  opacity: 0;

  transform: scale(1.03);

  transition:
    opacity 0.7s ease,
    transform 1.1s ease;
}

.slide.active {
  opacity: 1;

  transform: scale(1);
}

.slide::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      transparent 55%,
      rgba(35, 30, 24, 0.55)
    );
}


/* SLIDE CAPTION */

.slide-caption {
  position: absolute;

  z-index: 2;

  bottom: 25px;
  left: 28px;
  right: 28px;

  display: flex;

  justify-content: space-between;

  color: #fff;

  font-size: 12px;
}

.slide-caption span {
  opacity: 0.7;
}

.slide-caption strong {
  font-weight: 500;
}


/* SLIDER CONTROLS */

.slider-controls,
.achievement-controls {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-top: 18px;
}

.slider-arrow {
  width: 40px;
  height: 40px;

  border-radius: 50%;

  border: 1px solid var(--line);

  background: #fff;

  color: var(--brown-dark);

  cursor: pointer;

  transition: 0.2s;
}

.slider-arrow:hover {
  background: var(--green-soft);
}


/* DOTS */

.dots {
  display: flex;

  gap: 6px;

  flex: 1;

  justify-content: center;
}

.dot {
  width: 6px;
  height: 6px;

  padding: 0;

  border: 0;

  border-radius: 50%;

  background: #c6c0b7;

  cursor: pointer;
}

.dot.active {
  width: 22px;

  border-radius: 10px;

  background: var(--green-dark);
}


/* =========================
   SECTION HEADING
========================= */

.section-heading {
  display: flex;

  align-items: end;

  justify-content: space-between;

  gap: 30px;

  margin-bottom: 45px;
}

.section-heading h2,
.business h2,
.contact h2 {
  margin: 0;

  font-family: "Playfair Display", serif;

  font-size: clamp(38px, 5vw, 64px);

  font-weight: 500;

  line-height: 1.08;

  letter-spacing: -0.035em;
}

.section-heading span,
.business h2 span,
.contact h2 span {
  color: var(--green-dark);

  font-style: italic;
}


/* =========================
   BIO / ABOUT
========================= */

.bio {
  background: #f0eee7;
}

.bio-grid {
  display: grid;

  grid-template-columns: 0.75fr 1.25fr;

  gap: 7vw;

  align-items: center;
}

.bio-card {
  max-width: 420px;
}

.portrait {
  aspect-ratio: 4 / 5;

  overflow: hidden;

  border-radius:
    28px
    28px
    110px
    28px;

  background: var(--green-soft);
}

.bio-copy {
  max-width: 680px;
}

.lead {
  font-family: "Playfair Display", serif;

  font-size: 30px;

  line-height: 1.25;

  color: var(--brown);
}

.bio-copy > p:not(.lead) {
  color: #766b62;
}


/* MINI STATS */

.mini-stats {
  display: grid;

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

  gap: 15px;

  margin-top: 35px;
}

.mini-stats div {
  padding-top: 16px;

  border-top: 1px solid #cfc8bd;
}

.mini-stats strong {
  display: block;

  font-family: "Playfair Display", serif;

  font-size: 25px;

  color: var(--green-dark);
}

.mini-stats span {
  font-size: 11px;

  color: #75685d;
}


/* =========================
   JOURNAL
========================= */

.journal-grid {
  display: grid;

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

  gap: 24px;
}

.story-card {
  background: #fff;

  border-radius: var(--radius);

  padding: 13px 13px 22px;

  box-shadow:
    0 10px 30px rgba(63, 49, 40, 0.05);
}

.story-image {
  height: 260px;

  overflow: hidden;

  border-radius: 19px;
}

.story-tag {
  margin:
    19px
    7px
    4px;

  color: var(--green-dark);

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.18em;
}

.story-card h3 {
  margin:
    0
    7px
    16px;

  font-family: "Playfair Display", serif;

  font-size: 23px;

  line-height: 1.25;

  font-weight: 500;
}

.story-card a {
  margin-left: 7px;

  font-size: 11px;

  font-weight: 700;
}


/* =========================
   BUSINESS
========================= */

.business {
  background: var(--green-soft);
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 7vw;
  align-items: center;
}
}

.business-intro {
  max-width: 850px;
  margin-bottom: 55px;
}

.business-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
}

.service-card {
  min-height: 300px;
}
}

.business-intro > p:not(.eyebrow) {
  max-width: 510px;

  margin:
    25px
    0
    30px;

  color: #667263;
}


/* BUSINESS CARDS */

.business-cards {
  display: grid;

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

  gap: 15px;
}

.service-card {
  min-height: 240px;

  padding: 26px 20px;

  background: rgba(255, 255, 255, 0.58);

  border: 1px solid rgba(80, 101, 83, 0.12);

  border-radius: 24px;
}

.service-card span {
  color: var(--green-dark);

  font-size: 10px;

  font-weight: 700;
}

.service-card h3 {
  margin:
    55px
    0
    8px;

  font-family: "Playfair Display", serif;

  font-size: 23px;

  font-weight: 500;
}

.service-card p {
  color: #657063;

  font-size: 11px;
}


/* =========================
   ACHIEVEMENTS
========================= */

.achievements {
  background: #fff;
}

.achievement-slider {
  overflow: hidden;
}

.achievement-track {
  display: flex;

  transition:
    transform 0.5s ease;
}

.achievement {
  min-width: 100%;

  min-height: 290px;

  padding:
    48px
    7vw;

  display: flex;

  flex-direction: column;

  justify-content: center;

  background: var(--cream);

  border-radius: 30px;
}

.achievement span {
  font-family: "Playfair Display", serif;

  font-size: 20px;

  color: var(--green-dark);
}

.achievement h3 {
  margin:
    10px
    0;

  font-family: "Playfair Display", serif;

  font-size: 40px;

  font-weight: 500;
}

.achievement p {
  max-width: 560px;

  color: #776d64;
}

.achievement-controls {
  justify-content: center;
}

.achievement-count {
  min-width: 75px;

  text-align: center;

  font-size: 11px;
}


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

.contact {
  padding-top: 90px;

  padding-bottom: 110px;
}

.contact-box {
  position: relative;

  overflow: hidden;

  padding:
    75px
    8vw;

  background: var(--brown);

  color: #fff;

  text-align: center;

  border-radius: 38px;
}

.contact-box::before {
  content: "";

  position: absolute;

  width: 320px;
  height: 320px;

  right: -80px;
  top: -150px;

  border:
    1px solid
    rgba(255, 255, 255, 0.13);

  border-radius: 50%;
}

.contact-box .eyebrow {
  color: #c7d3c6;
}

.contact h2 {
  font-size: clamp(42px, 6vw, 75px);
}

.contact h2 span {
  color: #d4dfd1;
}

.contact-box > p:not(.eyebrow) {
  max-width: 560px;

  margin:
    24px
    auto
    30px;

  color: #eadfd7;

  font-size: 14px;
}


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

footer {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding:
    35px
    7vw;

  border-top: 1px solid var(--line);

  color: #81756b;

  font-size: 11px;
}

.footer-brand strong {
  display: block;

  color: var(--brown-dark);

  letter-spacing: 0.12em;
}

.footer-brand span {
  font-size: 8px;
}


/* =========================
   FLOATING BUTTONS
========================= */

.floating-stack {
  position: fixed;

  right: 20px;
  bottom: 20px;

  z-index: 60;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 10px;
}

.floating {
  position: relative;

  width: 54px;
  height: 54px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: #fff;

  box-shadow:
    0 12px 30px rgba(45, 38, 32, 0.2);

  font-size: 24px;
}

.whatsapp {
  background: #5f8064;
}

.instagram {
  background: var(--brown);
}

.cart {
  background: #fff;

  color: var(--brown-dark);

  border: 1px solid var(--line);

  font-size: 19px;
}

.cart i {
  position: absolute;

  right: -2px;
  top: -4px;

  width: 19px;
  height: 19px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--brown-dark);

  color: #fff;

  font-size: 9px;

  font-style: normal;
}


/* =========================
   SCROLL REVEAL
========================= */

.reveal {
  opacity: 0;

  transform: translateY(22px);

  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;

  transform: none;
}


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

@media (max-width: 900px) {

  .desktop-nav {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  .mobile-nav {
    position: fixed;

    z-index: 45;

    top: 82px;
    left: 0;
    right: 0;

    padding:
      20px
      7vw;

    background:
      rgba(248, 246, 240, 0.97);

    border-bottom:
      1px solid
      var(--line);

    flex-direction: column;

    gap: 17px;
  }

  .mobile-nav.open {
    display: flex;
  }


  .hero {
    grid-template-columns: 1fr;

    min-height: auto;

    padding-top: 70px;
  }

  .plant-slider {
    width: 100%;

    max-width: 650px;

    margin: auto;
  }


  .bio-grid,
  .business {
    grid-template-columns: 1fr;
  }

  .bio-card {
    margin: auto;
  }

  .business-cards {
    margin-top: 30px;
  }

  .journal-grid {
    grid-template-columns: 1fr 1fr;
  }

  .section {
    padding:
      80px
      6vw;
  }
}


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

@media (max-width: 620px) {

  .site-header {
    padding:
      0
      5vw;
  }

  .brand small {
    display: none;
  }

  .section {
    padding:
      70px
      5vw;
  }

  .hero {
    padding-top: 50px;
  }

  .hero h1 {
    font-size: 48px;
  }


  .hero-actions {
    flex-direction: column;

    align-items: flex-start;

    gap: 18px;
  }


  .section-heading {
    display: block;

    margin-bottom: 30px;
  }


  .journal-grid,
  .business-cards {
    grid-template-columns: 1fr;
  }


  .story-image {
    height: 230px;
  }


  .mini-stats {
    gap: 10px;
  }


  .lead {
    font-size: 25px;
  }


  .achievement {
    min-height: 260px;

    padding:
      35px
      25px;
  }

  .achievement h3 {
    font-size: 32px;
  }


  .contact-box {
    padding:
      55px
      25px;

    border-radius: 28px;
  }


  footer {
    flex-direction: column;

    align-items: flex-start;

    padding:
      30px
      5vw;
  }


  .floating-stack {
    right: 14px;

    bottom: 14px;
  }


  .floating {
    width: 50px;
    height: 50px;
  }

}
.portrait {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 28px 28px 110px 28px;
  background: var(--green-soft);
}

.portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}


 
    pointer-events: none;
    z-index: 9999;

    transform: translate(-50%, -50%);
    transition:
      width 0.2s ease,
      height 0.2s ease,
      background 0.2s ease,
      border-color 0.2s ease;
  }

  /* Cursor when hovering clickable elements */
  .ky-cursor.hover {
    width: 34px;
    height: 34px;

    background: rgba(118, 92, 73, 0.08);
    border-color: var(--brown);
  }

  /* Little sparkle */
  .ky-sparkle {
    position: fixed;

    pointer-events: none;
    z-index: 9998;

    color: var(--green-dark);

    font-family: "Playfair Display", serif;
    font-size: 13px;

    transform: translate(-50%, -50%);

    animation: kySparkle 0.8s ease-out forwards;
  }

  @keyframes kySparkle {

    0% {
      opacity: 0;
      transform:
        translate(-50%, -50%)
        scale(0.4)
        rotate(0deg);
    }

    30% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform:
        translate(
          calc(-50% + var(--move-x)),
          calc(-50% + var(--move-y))
        )
        scale(1.15)
        rotate(25deg);
    }
  }

  /* Click bloom */
  .ky-click {
    position: fixed;

    width: 12px;
    height: 12px;

    border: 1px solid var(--brown);

    border-radius: 50%;

    pointer-events: none;
    z-index: 9997;

    transform: translate(-50%, -50%);

    animation: kyClick 0.55s ease-out forwards;
  }

 

}
/* =========================================
   KYARAEZ ✦ SPARKLE CURSOR
========================================= */

@media (min-width: 901px) {

  .ky-sparkle-cursor,
  .ky-sparkle-cursor * {
    cursor: none !important;
  }
@media (min-width: 901px) {

  body,
  body * {
    cursor: none !important;
  }

  .ky-cursor {
    position: fixed !important;
    display: block !important;

    width: 24px !important;
    height: 24px !important;

    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;

    color: #8b7355 !important;

    font-size: 24px !important;
    line-height: 1 !important;

    pointer-events: none !important;
    z-index: 999999 !important;

    transform: translate(-50%, -50%) !important;

    text-shadow:
      0 0 6px rgba(139,115,85,.35),
      0 0 14px rgba(139,115,85,.2) !important;
  }

  .ky-cursor.hover {
    width: 30px !important;
    height: 30px !important;

    border: none !important;
    background: transparent !important;

    font-size: 30px !important;
  }

}
  

 
  /* ✦ Trail */

  .ky-sparkle {
    position: fixed;
    z-index: 99998;

    pointer-events: none;

    font-size: 12px;

    color: #9b8364;

    transform:
      translate(-50%, -50%)
      scale(var(--scale));

    animation:
      kySparkleFade 0.9s ease-out forwards;
  }


  /* ✦ Click burst */

  .ky-click-sparkle {
    position: fixed;
    z-index: 99998;

    pointer-events: none;

    font-size: 14px;

    color: #8b7355;

    transform: translate(-50%, -50%);

    animation:
      kyClickSparkle 0.7s ease-out forwards;
  }

}


/* Sparkle trail animation */

@keyframes kySparkleFade {

  0% {
    opacity: 0.9;

    transform:
      translate(-50%, -50%)
      scale(var(--scale));
  }

  100% {
    opacity: 0;

    transform:
      translate(
        calc(-50% + var(--move-x)),
        calc(-50% + var(--move-y))
      )
      scale(0);
  }

}


/* Click burst animation */

@keyframes kyClickSparkle {

  0% {
    opacity: 1;

    transform:
      translate(-50%, -50%)
      scale(0.5);
  }

  100% {
    opacity: 0;

    transform:
      translate(
        calc(-50% + var(--x)),
        calc(-50% + var(--y))
      )
      scale(1.3);
  }

}
@media (min-width: 901px) {

  /* ✦ Cursor utama */
  .ky-cursor {
    position: fixed;
    z-index: 99999;
    pointer-events: none;

    width: auto !important;
    height: auto !important;

    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;

    font-size: 32px;
    line-height: 1;

    color: #8b7355;

    transform: translate(-50%, -50%);

    text-shadow:
      0 0 5px rgba(139, 115, 85, 0.3),
      0 0 12px rgba(139, 115, 85, 0.15);

    transition:
      transform 0.18s ease,
      font-size 0.18s ease;
  }

  /* ✦ Saat hover */
  .ky-cursor.hover {
    width: auto !important;
    height: auto !important;

    border: none !important;
    background: transparent !important;

    font-size: 42px;

    transform:
      translate(-50%, -50%)
      rotate(18deg);
  }

}
/* FORCE REMOVE DEFAULT CURSOR */
@media (min-width: 901px) {

  html,
  body,
  body *,
  a,
  button,
  input,
  textarea,
  select,
  [role="button"] {
    cursor: none !important;
  }

  .ky-cursor {
    display: block !important;
    position: fixed !important;

    width: auto !important;
    height: auto !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;

    pointer-events: none !important;
    z-index: 2147483647 !important;

    font-size: 24px !important;
    line-height: 1 !important;

    color: #8b7355 !important;

    transform: translate(-50%, -50%) !important;
  }

}