/* =========================================================
   KOMUNITAS BAMBU INDONESIA – Shared Stylesheet
   ========================================================= */

/* Alpine: sembunyikan elemen x-cloak sampai Alpine selesai init
   (mencegah dropdown/modal berkedip muncul sesaat saat halaman dimuat). */
[x-cloak] { display: none !important; }

:root {
  --bamboo-50:#f4f8ed; --bamboo-100:#e6efd2; --bamboo-200:#cee0a8;
  --bamboo-300:#adc97a; --bamboo-400:#8bb155; --bamboo-500:#6d9540;
  --bamboo-600:#547730; --bamboo-700:#425c28; --bamboo-800:#364a23;
  --bamboo-900:#2d3e1f;
  --cream-50:#fdfbf5; --cream-100:#f9f3e3; --cream-200:#f1e7c8;
  --earth-300:#c9a87c; --earth-400:#a8845a; --earth-500:#8b6841; --earth-700:#5a4128;
  --ink:#1a1f14; --paper:#fdfbf5;
  --accent-flash:#e85d4a; --accent-gold:#c9a046;
  --font-display:'Fraunces','Playfair Display',Georgia,serif;
  --font-sans:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}
.dark {
  --paper:#14180f; --ink:#f4f8ed;
  --cream-50:#1a1f14; --cream-100:#222a1a;
}

* { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--font-sans);
  background-color:var(--paper);
  color:var(--ink);
  transition:background-color .4s ease, color .4s ease;
}

.font-display { font-family:var(--font-display); font-feature-settings:"ss01","ss02"; }
.font-mono    { font-family:var(--font-mono); }

/* Gradients & textures */
.bamboo-gradient {
  background:linear-gradient(135deg,var(--bamboo-700) 0%,var(--bamboo-500) 60%,var(--bamboo-400) 100%);
}
.cream-gradient { background:linear-gradient(180deg,var(--cream-50) 0%,var(--cream-100) 100%); }
.text-bamboo-grad {
  background:linear-gradient(135deg,var(--bamboo-700),var(--bamboo-500));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.bamboo-pattern {
  background-image:
    radial-gradient(circle at 20% 30%,rgba(141,177,85,.08) 0,transparent 40%),
    radial-gradient(circle at 80% 70%,rgba(201,160,124,.08) 0,transparent 40%);
}
.grain-overlay::before {
  content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.3 0 0 0 0 0.1 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.35;
}

/* Bamboo stalk decoration */
.bamboo-stalk {
  position:absolute; width:60px; border-radius:4px; opacity:.15;
  background:linear-gradient(to right,var(--bamboo-600),var(--bamboo-400),var(--bamboo-600));
}
.bamboo-stalk::before, .bamboo-stalk::after {
  content:""; position:absolute; left:-4px; right:-4px; height:10px;
  background:var(--bamboo-700); border-radius:8px;
}
.bamboo-stalk::before { top:25%; }
.bamboo-stalk::after  { top:65%; }

/* Buttons */
/* Catatan: tombol-tombol ini selalu memiliki background hijau gelap,
   sehingga warna teks dikunci ke krem terang (#fdfbf5) — TIDAK pakai
   var(--cream-50) karena variabel itu di-override jadi gelap di .dark
   (untuk pemakaian sebagai background). */
.btn-primary {
  background:var(--bamboo-700); color:#fdfbf5;
  padding:.9rem 1.6rem; border-radius:999px; font-weight:600;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  display:inline-flex; align-items:center; gap:.5rem;
  box-shadow:0 4px 14px rgba(54,74,35,.25);
}
.btn-primary:hover {
  background:var(--bamboo-800); transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(54,74,35,.35);
}
.btn-ghost {
  border:1.5px solid var(--bamboo-700); color:var(--bamboo-800);
  padding:.85rem 1.55rem; border-radius:999px; font-weight:600;
  transition:all .3s ease; display:inline-flex; align-items:center; gap:.5rem;
}
.dark .btn-ghost { color:var(--bamboo-200); border-color:var(--bamboo-300); }
.btn-ghost:hover { background:var(--bamboo-700); color:#fdfbf5; }

/* Card hover */
.card-hover { transition:transform .4s cubic-bezier(.4,0,.2,1), box-shadow .4s ease; }
.card-hover:hover { transform:translateY(-6px); box-shadow:0 20px 40px -10px rgba(54,74,35,.18); }

/* Animations */
@keyframes float-slow {
  0%,100% { transform:translateY(0) rotate(0); }
  50%     { transform:translateY(-12px) rotate(2deg); }
}
.animate-float { animation:float-slow 6s ease-in-out infinite; }

@keyframes fade-up {
  0% { opacity:0; transform:translateY(20px); }
  100%{ opacity:1; transform:translateY(0); }
}
.fade-up         { animation:fade-up .8s cubic-bezier(.4,0,.2,1) both; }
.fade-up-delay-1 { animation:fade-up .8s cubic-bezier(.4,0,.2,1) .15s both; }
.fade-up-delay-2 { animation:fade-up .8s cubic-bezier(.4,0,.2,1) .3s both; }
.fade-up-delay-3 { animation:fade-up .8s cubic-bezier(.4,0,.2,1) .45s both; }
.fade-up-delay-4 { animation:fade-up .8s cubic-bezier(.4,0,.2,1) .6s both; }

@keyframes pulse-ring {
  0%  { box-shadow:0 0 0 0 rgba(232,93,74,.6); }
  100%{ box-shadow:0 0 0 16px rgba(232,93,74,0); }
}
.pulse-ring { animation:pulse-ring 1.8s ease-out infinite; }

@keyframes marquee {
  0% { transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}
.marquee-track { animation:marquee 35s linear infinite; }

/* Scrollbar */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:var(--cream-100); }
::-webkit-scrollbar-thumb { background:var(--bamboo-400); border-radius:6px; }
::-webkit-scrollbar-thumb:hover { background:var(--bamboo-600); }
::selection { background:var(--bamboo-300); color:var(--bamboo-900); }

/* Glass */
.glass {
  background:rgba(253,251,245,.7);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border:1px solid rgba(141,177,85,.18);
}
.dark .glass { background:rgba(34,42,26,.7); border-color:rgba(206,224,168,.12); }

/* Link underline */
.link-underline { position:relative; display:inline-block; }
.link-underline::after {
  content:""; position:absolute; left:0; bottom:-3px;
  width:0; height:2px; background:var(--bamboo-600);
  transition:width .35s cubic-bezier(.4,0,.2,1);
}
.link-underline:hover::after { width:100%; }

/* Masonry */
.masonry { columns:2 280px; column-gap:1rem; }
.masonry > * { break-inside:avoid; margin-bottom:1rem; }

/* Progress bar */
.progress-bar {
  position:relative; height:8px; background:var(--cream-200);
  border-radius:999px; overflow:hidden;
}
.progress-bar > span {
  display:block; height:100%;
  background:linear-gradient(90deg,var(--bamboo-500),var(--bamboo-700));
  border-radius:999px; transition:width .6s ease;
}

/* Hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar { display:none; }
.no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }

/* Rendered product description (admin HTML) — basic prose styling */
.product-prose > *:first-child { margin-top:0; }
.product-prose p { margin:0.75em 0; }
.product-prose h2,.product-prose h3,.product-prose h4 { font-weight:600; margin:1.2em 0 0.5em; line-height:1.25; }
.product-prose h2 { font-size:1.35em; }
.product-prose h3 { font-size:1.15em; }
.product-prose h4 { font-size:1.05em; }
.product-prose ul,.product-prose ol { margin:0.75em 0; padding-left:1.5em; }
.product-prose ul { list-style:disc; }
.product-prose ol { list-style:decimal; }
.product-prose li { margin:0.3em 0; }
.product-prose a { color:var(--bamboo-600); text-decoration:underline; }
.product-prose strong,.product-prose b { font-weight:600; }
.product-prose blockquote { border-left:3px solid var(--bamboo-300); padding-left:1em; margin:0.9em 0; font-style:italic; opacity:.85; }
.product-prose hr { border:0; border-top:1px solid var(--bamboo-200); margin:1.2em 0; }
.product-prose table { width:100%; border-collapse:collapse; margin:0.9em 0; font-size:.95em; }
.product-prose th,.product-prose td { border:1px solid var(--bamboo-200); padding:0.4em 0.6em; text-align:left; }
.product-prose img { max-width:100%; height:auto; border-radius:.5rem; margin:0.9em 0; }
.product-prose iframe,.product-prose .ql-video { width:100%; aspect-ratio:16/9; height:auto; border:0; border-radius:.75rem; margin:0.9em 0; }
.product-prose pre,.product-prose .ql-syntax { background:var(--bamboo-900); color:var(--cream-50); padding:1em; border-radius:.6rem; overflow-x:auto; font-size:.9em; margin:0.9em 0; white-space:pre-wrap; }
.product-prose code { font-family:'JetBrains Mono',monospace; font-size:.92em; }
.product-prose sub { vertical-align:sub; font-size:.8em; }
.product-prose sup { vertical-align:super; font-size:.8em; }
/* Quill alignment / indent / size / font classes */
.product-prose .ql-align-center { text-align:center; }
.product-prose .ql-align-right { text-align:right; }
.product-prose .ql-align-justify { text-align:justify; }
.product-prose .ql-indent-1{padding-left:2em}.product-prose .ql-indent-2{padding-left:4em}
.product-prose .ql-indent-3{padding-left:6em}.product-prose .ql-indent-4{padding-left:8em}
.product-prose .ql-indent-5{padding-left:10em}.product-prose .ql-indent-6{padding-left:12em}
.product-prose .ql-size-small{font-size:.82em}.product-prose .ql-size-large{font-size:1.5em}.product-prose .ql-size-huge{font-size:2.3em}
.product-prose .ql-font-serif{font-family:'Fraunces',Georgia,serif}.product-prose .ql-font-monospace{font-family:'JetBrains Mono',monospace}

/* Thin scrollbar for the pre-order synopsis (dark panel) */
.po-synopsis::-webkit-scrollbar { width:5px; }
.po-synopsis::-webkit-scrollbar-track { background:transparent; }
.po-synopsis::-webkit-scrollbar-thumb { background:rgba(253,251,245,.28); border-radius:4px; }
.po-synopsis { scrollbar-width:thin; scrollbar-color:rgba(253,251,245,.28) transparent; }

/* Reveal on scroll */
.reveal       { opacity:0; transform:translateY(30px); transition:opacity .9s ease, transform .9s ease; }
.reveal.shown { opacity:1; transform:translateY(0); }

/* Price strike */
.price-strike {
  text-decoration:line-through; text-decoration-thickness:2px;
  text-decoration-color:var(--accent-flash); opacity:.6;
}

/* Input base */
.input-base {
  width:100%;
  padding:.75rem 1rem;
  border-radius:.85rem;
  background:var(--cream-50);
  border:1.5px solid var(--bamboo-100);
  color:var(--bamboo-900);
  font-size:.875rem;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  font-family:inherit;
}
.dark .input-base {
  background:rgba(45,62,31,.5);
  border-color:rgba(141,177,85,.25);
  color:var(--cream-50);
}
.input-base::placeholder { color:rgba(66,92,40,.45); }
.dark .input-base::placeholder { color:rgba(253,251,245,.45); }
.input-base:focus {
  outline:none;
  border-color:var(--bamboo-500);
  box-shadow:0 0 0 3px rgba(141,177,85,.18);
}
.input-base.is-error { border-color:#dc2626; }

/* Progress bar variants */
.progress-bar--sm { height:6px; }
.progress-bar--gold > span {
  background:linear-gradient(90deg,#fbbf24,#d97706);
}

/* Ribbon pre-order */
.ribbon-po {
  position:absolute; top:12px; left:-8px;
  background:var(--accent-gold); color:#fff;
  padding:4px 12px 4px 16px; font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,92% 50%,100% 100%,0 100%,8% 50%);
  z-index:5;
}
/* Basemap (Leaflet + OSM standard tiles). OSM is keyless/free but full colour;
   desaturating it keeps the cream/bamboo look the CARTO Positron style had. */
.leaflet-tile-pane { filter:grayscale(.55) contrast(1.02) brightness(1.03); }
.dark .leaflet-tile-pane { filter:grayscale(.7) brightness(.82) contrast(1.06); }