/* ============================================================
   Greeny's — theme2: samakan bahasa desain landing (pages/home.html)
   ke seluruh halaman. Murni lapisan CSS di atas tailwind.css +
   greeny.css + header2.css; tidak mengubah markup/fungsi.
   Kunci desain landing: radius 20px, bayangan lembut, tombol pill
   dengan lift-on-hover, border sage tipis, tipografi display 800.
   ============================================================ */

/* penjaga: konten dekoratif tak boleh melebarkan body (bikin header geser di HP) */
html, body { max-width: 100vw; overflow-x: clip; }

:root {
  --g2-ease: cubic-bezier(.22, .8, .26, .99);
  --g2-border: rgba(191, 207, 187, .45);
  --g2-shadow: 0 20px 44px rgba(42, 53, 42, .12);
}
html.dark {
  --g2-border: rgba(58, 74, 60, .7);
  --g2-shadow: 0 20px 44px rgba(0, 0, 0, .4);
}

/* ---------- tipografi display ---------- */
main h1, main h2, main h3,
section h1, section h2 {
  font-weight: 800 !important;
  letter-spacing: -.01em;
}

/* ---------- kartu: radius landing + hover lift ---------- */
main .rounded-xl, main .rounded-2xl,
aside .rounded-xl, aside .rounded-2xl {
  border-radius: 20px !important;
}
main .bg-surface-container-lowest,
main .glass-card {
  border: 1px solid var(--g2-border);
  transition: transform .45s var(--g2-ease), box-shadow .45s;
}
/* lift hanya untuk kartu yang memang interaktif */
main a.bg-surface-container-lowest:hover,
main .product-card-hover:hover,
main a.glass-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--g2-shadow);
}
main .product-card-hover { transition: transform .45s var(--g2-ease), box-shadow .45s; }
main .product-card-hover img { transition: transform .8s var(--g2-ease); }
main .product-card-hover:hover img { transform: scale(1.06); }

/* ---------- tombol utama: pill + bayangan + lift ---------- */
a.bg-primary.rounded-full, button.bg-primary.rounded-full,
a.rounded-full.bg-primary, button.rounded-full.bg-primary {
  box-shadow: 0 8px 20px rgba(79, 107, 84, .28);
  transition: transform .3s var(--g2-ease), box-shadow .3s, background .3s, opacity .3s;
}
a.bg-primary.rounded-full:hover, button.bg-primary.rounded-full:hover,
a.rounded-full.bg-primary:hover, button.rounded-full.bg-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(79, 107, 84, .36);
}
html.dark a.bg-primary.rounded-full, html.dark button.bg-primary.rounded-full,
html.dark a.rounded-full.bg-primary, html.dark button.rounded-full.bg-primary {
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
}
/* soft-press: tombol "ketekan" saat diklik */
a.bg-primary.rounded-full:active, button.bg-primary.rounded-full:active,
a.rounded-full.bg-primary:active, button.rounded-full.bg-primary:active {
  transform: translateY(1px) scale(.98) !important;
  box-shadow: 0 4px 10px rgba(79, 107, 84, .25), inset 0 2px 5px rgba(0, 0, 0, .18) !important;
}
main a.border.rounded-full:active, main button.border.rounded-full:active {
  transform: translateY(1px) scale(.98) !important;
}
/* tombol sekunder berbingkai */
main a.border.rounded-full, main button.border.rounded-full {
  transition: transform .3s var(--g2-ease), border-color .3s, color .3s;
}
main a.border.rounded-full:hover, main button.border.rounded-full:hover {
  transform: translateY(-2px);
  border-color: #4F6B54;
}
html.dark main a.border.rounded-full:hover, html.dark main button.border.rounded-full:hover {
  border-color: #8EA58C;
}

/* ---------- input & form ---------- */
main input, main textarea, main select {
  border-radius: 14px;
  transition: border-color .3s, box-shadow .3s;
}
main input.rounded-full { border-radius: 999px !important; }
main input:focus, main textarea:focus, main select:focus {
  border-color: #4F6B54 !important;
  box-shadow: 0 0 0 3px rgba(79, 107, 84, .15);
  outline: none;
}
html.dark main input:focus, html.dark main textarea:focus, html.dark main select:focus {
  border-color: #8EA58C !important;
  box-shadow: 0 0 0 3px rgba(142, 165, 140, .18);
}

/* ---------- chip/tab kategori ---------- */
.cat-tab, main .rounded-full.border {
  transition: all .3s var(--g2-ease);
}
.cat-tab.active { box-shadow: 0 6px 16px rgba(79, 107, 84, .25); }

/* ---------- footer: samakan dengan landing ---------- */
footer {
  background: #E2EADC !important;
  border-top: 1px solid rgba(191, 207, 187, .6);
}
html.dark footer {
  background: #101712 !important;
  border-top-color: rgba(58, 74, 60, .6);
}

/* ---------- badge/label kecil ---------- */
main .bg-error, main .bg-primary-container.rounded-full {
  letter-spacing: .04em;
}

/* ---------- gambar dalam kartu ikut radius ---------- */
main .rounded-2xl > img:first-child,
main .rounded-xl > img:first-child {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

/* ---------- hero halaman katalog: gradasi lembut ala kyoto ---------- */
.page-hero2 {
  background-image:
    radial-gradient(90% 130% at 88% 0%, rgba(142, 165, 140, .30), transparent 55%),
    linear-gradient(150deg, rgba(37, 54, 42, .90) 0%, rgba(26, 39, 31, .88) 55%, rgba(18, 28, 21, .92) 100%),
    url("https://images.unsplash.com/photo-1448375240586-882707db888b?q=80&w=1600&auto=format&fit=crop") !important;
  background-size: auto, auto, cover !important;
  background-position: center, center, center !important;
  background-repeat: no-repeat !important;
}
/* tepi bawah "tinta jatuh": rect warna latar halaman didistorsi turbulence
   (ala referensi ink-splash) — hero meleber organik ke konten */
.page-hero2 { padding-bottom: 46px; }
.page-hero2::before {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: -2px;
  height: 84px; z-index: 3; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='ink' x='-20%25' y='-120%25' width='140%25' height='340%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011 0.09' numOctaves='4' seed='11'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='70'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='-80' y='58' width='1600' height='120' fill='%23F1F4ED' filter='url(%23ink)'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}
html.dark .page-hero2::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='ink' x='-20%25' y='-120%25' width='140%25' height='340%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011 0.09' numOctaves='4' seed='11'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='70'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='-80' y='58' width='1600' height='120' fill='%2318211A' filter='url(%23ink)'/%3E%3C/svg%3E");
}
.page-hero2--promo {
  background-image:
    radial-gradient(90% 130% at 88% 0%, rgba(224, 122, 95, .28), transparent 55%),
    linear-gradient(150deg, rgba(52, 62, 42, .90) 0%, rgba(33, 46, 35, .88) 55%, rgba(18, 28, 21, .92) 100%),
    url("https://images.unsplash.com/photo-1448375240586-882707db888b?q=80&w=1600&auto=format&fit=crop") !important;
}
html.dark .page-hero2 {
  background-image:
    radial-gradient(90% 130% at 88% 0%, rgba(92, 116, 96, .30), transparent 55%),
    linear-gradient(150deg, rgba(20, 30, 23, .92) 0%, rgba(14, 22, 17, .92) 100%),
    url("https://images.unsplash.com/photo-1448375240586-882707db888b?q=80&w=1600&auto=format&fit=crop") !important;
}

/* ---------- page-hero3: hero dalam container (community/help) jadi band
   full-bleed gelap berfoto dengan teks terang ---------- */
.page-hero3 {
  position: relative; overflow: hidden;
  width: 100vw; margin-left: calc(50% - 50vw);
  margin-top: -48px; /* rapatkan ke header (main py-12) */
  padding: 84px 24px 110px;
  background-image:
    radial-gradient(90% 130% at 88% 0%, rgba(142, 165, 140, .30), transparent 55%),
    linear-gradient(150deg, rgba(37, 54, 42, .90) 0%, rgba(26, 39, 31, .88) 55%, rgba(18, 28, 21, .92) 100%),
    url("https://images.unsplash.com/photo-1448375240586-882707db888b?q=80&w=1600&auto=format&fit=crop");
  background-size: auto, auto, cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page-hero3::before {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: -2px;
  height: 70px; z-index: 3; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='ink' x='-20%25' y='-120%25' width='140%25' height='340%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011 0.09' numOctaves='4' seed='11'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='70'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='-80' y='58' width='1600' height='120' fill='%23F1F4ED' filter='url(%23ink)'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}
html.dark .page-hero3::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='ink' x='-20%25' y='-120%25' width='140%25' height='340%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011 0.09' numOctaves='4' seed='11'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='70'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='-80' y='58' width='1600' height='120' fill='%2318211A' filter='url(%23ink)'/%3E%3C/svg%3E");
}
.page-hero3 h1, .page-hero3 .text-on-surface { color: #F1F6EF !important; }
/* ukuran judul & tombol disamakan dengan hero gelap lain (sustainability/katalog) */
.page-hero3 h1 { font-size: 1.875rem !important; line-height: 1.25 !important; }
@media (min-width: 768px) { .page-hero3 h1 { font-size: 2.25rem !important; } }
.page-hero3 a.bg-primary {
  background: #ffffff !important; color: #344C3D !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25) !important;
}
.page-hero3 a.border-primary {
  background: rgba(255, 255, 255, .12) !important;
  border-color: rgba(255, 255, 255, .35) !important;
  color: #ffffff !important;
}
.page-hero3 p, .page-hero3 .text-on-surface-variant { color: #C4D2BE !important; }
.page-hero3 .text-primary { color: #CDE3C6 !important; }
.page-hero3 .border-primary { border-color: rgba(205, 227, 198, .5) !important; }
.page-hero3 .bg-primary-container\/30 { background-color: rgba(205, 227, 198, .18) !important; }
.page-hero3 .text-on-primary-container { color: #DCEBD5 !important; }
.page-hero3 > * { position: relative; z-index: 1; }

/* ---------- band-dark2: section selang-seling gelap ala homepage ---------- */
.band-dark2 {
  position: relative; overflow: hidden;
  color: #EAF2E6;
  background-image:
    linear-gradient(160deg, rgba(14, 22, 16, .9) 0%, rgba(22, 34, 25, .88) 100%),
    url("https://images.unsplash.com/photo-1448375240586-882707db888b?q=80&w=1600&auto=format&fit=crop") !important;
  background-size: auto, cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.band-dark2 h2, .band-dark2 h3, .band-dark2 h4,
.band-dark2 .text-on-surface { color: #F1F6EF !important; }
.band-dark2 p, .band-dark2 .text-on-surface-variant { color: #C4D2BE !important; }
.band-dark2 .text-primary { color: #CDE3C6 !important; }
.band-dark2 .bg-surface-container-lowest, .band-dark2 .bg-surface-container-low {
  background: rgba(22, 34, 25, .55) !important;
  border-color: rgba(205, 227, 198, .18) !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.band-dark2 input, .band-dark2 textarea, .band-dark2 select {
  background: rgba(16, 26, 19, .55) !important;
  color: #EAF2E6 !important;
  border-color: rgba(205, 227, 198, .25) !important;
}
.band-dark2 input::placeholder, .band-dark2 textarea::placeholder { color: rgba(196, 210, 190, .6); }
.band-dark2 > * { position: relative; z-index: 1; }

/* ---------- daun berjatuhan di band hero gelap ---------- */
.gleaves { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.gleaves span {
  position: absolute; top: -6vh;
  animation: gLeafFall linear infinite;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .3));
}
@keyframes gLeafFall {
  0%   { transform: translateY(-8vh) translateX(0) rotate(0deg); }
  25%  { transform: translateY(14vh) translateX(3vw) rotate(80deg); }
  50%  { transform: translateY(30vh) translateX(-2vw) rotate(170deg); }
  75%  { transform: translateY(46vh) translateX(2vw) rotate(260deg); }
  100% { transform: translateY(64vh) translateX(-1vw) rotate(350deg); }
}

/* ---------- scrollbar halus (webkit) ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(115, 138, 110, .4); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(115, 138, 110, .6); }
::-webkit-scrollbar-track { background: transparent; }