/* =========================================================================
   Aksara Incung — gaya kustom di atas Tailwind
   Palet "Lumut Batu": hijau lumut batu terpahat + aksen anggur tua
   ========================================================================= */

html { scroll-behavior: smooth; }

body {
  background-image:
    radial-gradient(ellipse 900px 500px at 12% -10%, rgba(74, 93, 69, 0.07), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 0%, rgba(122, 59, 74, 0.05), transparent 55%);
}

/* subtle fiber/grain texture, like weathered mossy stone */
.texture-grain {
  background-image: repeating-linear-gradient(
    115deg,
    rgba(34, 39, 31, 0.02) 0px,
    rgba(34, 39, 31, 0.02) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* ---------- Nav ---------- */
.nav-link { position: relative; padding-bottom: 2px; transition: color .2s ease; }
.nav-link:hover { color: #22271F; }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 1.5px;
  background: #7A3B4A; transition: right .25s ease;
}
.nav-link:hover::after, .nav-link--active::after { right: 0; }
.nav-link--active { color: #22271F; }
.mobile-link { display: block; padding: .6rem .25rem; color: #4B5741; font-size: .9rem; border-bottom: 1px solid rgba(34,39,31,.06); }

/* ---------- Hero carved mark ---------- */
.carve-stroke {
  fill: none;
  stroke: #22271F;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: carve-in 1.8s cubic-bezier(.25,.7,.3,1) forwards;
}
.carve-stroke.accent { stroke: #7A3B4A; }
.carve-stroke:nth-child(1) { animation-delay: .05s; }
.carve-stroke:nth-child(2) { animation-delay: .3s; }
.carve-stroke:nth-child(3) { animation-delay: .55s; }
.carve-stroke:nth-child(4) { animation-delay: .8s; }

@keyframes carve-in { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .carve-stroke { animation: none; stroke-dashoffset: 0; }
}

.bamboo-node { position: relative; }
.bamboo-node::before, .bamboo-node::after {
  content: ""; position: absolute; left: -2%; right: -2%; height: 8px;
  background: linear-gradient(180deg, rgba(34,39,31,.06), transparent);
  pointer-events: none;
}
.bamboo-node::before { top: 22%; }
.bamboo-node::after { top: 68%; }

/* ---------- Cards / panels (carved tablet feel) ---------- */
.tablet {
  background: #F3F6F1;
  border: 1px solid #C9D2C0;
  box-shadow: 0 20px 40px -28px rgba(34, 39, 31, .18);
  position: relative;
}
.tablet--accent { border-top: 3px solid #4A5D45; }

/* ---------- Repeating carved-line pattern (section texture) ---------- */
.pattern-incung {
  background-image: repeating-linear-gradient(
    -35deg,
    rgba(34, 39, 31, 0.05) 0px,
    rgba(34, 39, 31, 0.05) 2px,
    transparent 2px,
    transparent 26px
  );
  background-position: 0 0;
}

/* ---------- Dot-grid texture ---------- */
.pattern-dots {
  background-image: radial-gradient(rgba(34, 39, 31, 0.14) 1.4px, transparent 1.4px);
  background-size: 18px 18px;
}

/* ---------- Watermark glyph (large faint brand mark in a section) ---------- */
.brand-watermark {
  position: absolute;
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
}

/* ---------- Stat chips ---------- */
.stat-chip {
  border: 1px solid #C9D2C0;
  background: #F8FBF6;
  transition: transform .2s ease, border-color .2s ease;
}
.stat-chip:hover { transform: translateY(-2px); border-color: #7A3B4A; }

/* ---------- Step spine (Cara Pakai) ---------- */
.step-spine {
  position: absolute;
  left: 23px;
  top: 3.2rem;
  bottom: -2.5rem;
  width: 1.5px;
  background: repeating-linear-gradient(180deg, #C9D2C0 0, #C9D2C0 6px, transparent 6px, transparent 12px);
}
.step-marker {
  border: 1.5px solid #7A3B4A;
  background: #F3F6F1;
}

/* ---------- Pull quote ---------- */
.pull-quote {
  border-left: 3px solid #7A3B4A;
  background: #F8FBF6;
}

/* ---------- Image placeholder (tandai untuk diganti nanti) ---------- */
.img-placeholder {
  border: 2px dashed #B7C2AC;
  background:
    repeating-linear-gradient(45deg, rgba(74,93,69,0.05) 0px, rgba(74,93,69,0.05) 8px, transparent 8px, transparent 16px),
    #F3F6F1;
  color: #6B7360;
}
.img-placeholder .placeholder-badge {
  border: 1px solid #7A3B4A;
  color: #7A3B4A;
  background: #F8FBF6;
}

/* ---------- Dropzone ---------- */
.dropzone {
  border: 1.5px dashed #B7C2AC;
  transition: border-color .2s ease, background-color .2s ease;
}
.dropzone.is-dragover {
  border-color: #7A3B4A;
  background-color: rgba(122, 59, 74, 0.05);
}

/* ---------- Buttons ---------- */
.btn-primary {
  background: #4A5D45;
  color: #F3F6F1;
  transition: transform .15s ease, background-color .2s ease, box-shadow .2s ease;
  box-shadow: 0 8px 20px -10px rgba(74, 93, 69, .55);
}
.btn-primary:hover { background: #5C7355; transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-secondary {
  border: 1px solid #B7C2AC;
  color: #22271F;
  transition: border-color .2s ease, background-color .2s ease;
}
.btn-secondary:hover { border-color: #7A3B4A; background: rgba(122,59,74,.05); }

/* ---------- Accordion (Lihat Tahap Preprocessing) ---------- */
.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}
.accordion-panel.is-open { grid-template-rows: 1fr; }
.accordion-panel > div { overflow: hidden; }

.accordion-chevron { transition: transform .25s ease; }
.accordion-chevron.is-open { transform: rotate(90deg); }

/* stage thumbnail strip */
.stage-scroll { scrollbar-width: thin; scrollbar-color: #7A3B4A transparent; }
.stage-scroll::-webkit-scrollbar { height: 6px; }
.stage-scroll::-webkit-scrollbar-thumb { background: #7A3B4A; border-radius: 4px; }

.stage-card { border: 1px solid #C9D2C0; background: #F3F6F1; }
.stage-card img { image-rendering: pixelated; }

/* ---------- Result reveal ---------- */
.fade-up { opacity: 0; transform: translateY(14px); animation: fade-up .5s ease forwards; }
@keyframes fade-up { to { opacity: 1; transform: translateY(0); } }

/* ---------- Loading pulse ---------- */
.pulse-dot { animation: pulse-dot 1.1s ease-in-out infinite; }
.pulse-dot:nth-child(2) { animation-delay: .15s; }
.pulse-dot:nth-child(3) { animation-delay: .3s; }
@keyframes pulse-dot { 0%, 80%, 100% { opacity: .25; transform: scale(.85); } 40% { opacity: 1; transform: scale(1); } }

/* utility */
.eyebrow { letter-spacing: .14em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: #6B7360; }