/* =========================================================
   v2 — tata letak 16:9, rata kiri-kanan, foto & efek gambar
   ========================================================= */
:root { --max: 1600px; }
body { font-size: clamp(16px, .42vw + 10.5px, 19px); }
.wrap { width: min(var(--max), 100% - 72px); }

/* rata kiri-kanan untuk paragraf */
.def p, .card p, .card li, .lead, .k-card p, .verdict p, .callout p, .tl-item p, .steps p,
.lane-body p, .bg-grid p, .doc p, .sec-head p, .st-sub, .qbox p, .theory p, .cta-band p,
.pipe-step p { text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; }
.sec-head.center p, .thanks p { text-align: center; }

/* satu layar penuh 16:9 per bagian utama */
.hero { min-height: calc(var(--vh, 100vh) - 72px); display: flex; padding: 18px 0 26px; }
.hero > .wrap { display: flex; }
.hero-card { flex: 1; min-height: 0; grid-template-columns: 1fr 1.12fr; }
#tim, #latar { min-height: var(--vh, 100vh); display: flex; align-items: center; }
.p-hero > .wrap { display: flex; flex-direction: column; min-height: calc(var(--vh, 100vh) - 72px - 44px); }
.p-hero-card { flex: 1; }

/* ---------- efek gambar ---------- */
.fx { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.fx img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* Blur Fade Transition: dari buram ke tajam saat muncul */
  filter: blur(24px) saturate(.6); transform: scale(1.08); opacity: 0;
  transition: filter 1.8s var(--ease), transform 2.6s var(--ease), opacity 1.2s ease;
}
.fx.in img, .no-anim .fx img { filter: none; transform: none; opacity: 1; }
/* Feathered Edge: tepi lembut, tidak terpotong tajam */
.fx.feather img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect;
}
.fx.radial img {
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 35%, transparent 78%);
  mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 35%, transparent 78%);
}
/* Gradient Overlay: lapisan gradasi putih transparan */
.fx.overlay::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 38%, rgba(251, 250, 244, .42) 100%); }
/* Blur Fade di tepi: gambar menyatu dengan latar */
.fx .blur-edge { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; z-index: 2; pointer-events: none;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(90deg, #000 25%, transparent); mask-image: linear-gradient(90deg, #000 25%, transparent); }
/* White Gradient Fade: gradasi putih memudar ke gambar */
.fx.fade-l::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, var(--surface) 0%, rgba(251, 250, 244, .88) 16%, rgba(251, 250, 244, .35) 34%, rgba(251, 250, 244, 0) 52%); }

/* ---------- hero beranda dengan foto ---------- */
.hero-visual { margin: 0; border-radius: 0; background: none; min-height: 100%; overflow: visible; }
.hero-visual::before { display: none; }
.hero-visual .moon { top: 28px; right: auto; left: 10%; z-index: 4; width: 62px; height: 62px; }
.hv-glass {
  position: absolute; z-index: 4; left: 12%; right: 5%; bottom: 6%; height: 46%;
  border-radius: 24px; background: rgba(30, 53, 32, .80); color: #fff;
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, .14);
}
.hv-glass .hv-title { position: absolute; top: 18px; left: 22px; right: 22px; }
.hv-glass .hv-title b { font-size: 1.1rem; }
.hv-glass .hv-chart { position: absolute; left: 10px; right: 10px; bottom: 8px; top: 74px; height: auto; }
.fc-1 { top: 9%; right: 4%; } .fc-2 { top: 21%; right: 13%; } .fc-3 { top: 33%; right: 5%; }

/* ---------- kartu komoditas dengan foto ---------- */
.k-card { background: var(--kd); }
.k-card > .fx { position: absolute; z-index: 0; }
.k-card::before { z-index: 1; opacity: .28; }
.k-card::after { z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, var(--kt) 86%); }
.k-card > .kblur { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; z-index: 1;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 55%); mask-image: linear-gradient(180deg, transparent, #000 55%); }
.k-card > *:not(.fx):not(.kblur) { z-index: 2; }
.k-card .big-ic { display: none; }
.k-ayam { --kd: #7C5612; --kt: rgba(110, 74, 10, .94); }
.k-cabai { --kd: #7E1E14; --kt: rgba(120, 26, 16, .94); }
.k-beras { --kd: #08503F; --kt: rgba(6, 74, 58, .94); }
.k-card .tag { z-index: 2; background: rgba(255, 255, 255, .86); color: var(--ink); }

/* ---------- header halaman: terang dengan foto ---------- */
.p-hero-card { background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); align-items: center; }
.p-hero-card::before { background: var(--ketupat-dark); background-size: 56px;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 28%, transparent 40%); mask-image: linear-gradient(90deg, #000 0, #000 28%, transparent 40%); }
.p-hero-card > .p-hero-img { position: absolute; top: 0; right: 0; bottom: 0; left: 40%; }
.p-hero-card > .p-hero-text { position: relative; z-index: 2; max-width: 58%; }
.p-hero-card h1 { color: var(--ink); font-size: clamp(2.6rem, 5.2vw, 5rem); }
.p-hero-card .lead { color: var(--ink-2); max-width: 640px; }
.p-hero-card .crumb { color: var(--muted); }
.p-hero-card .crumb a:hover { color: var(--green); }
.p-hero-card .chip.light { color: var(--green); background: var(--green-soft); }
.p-hero-card .big-step { position: relative; z-index: 2; -webkit-text-stroke: 2px rgba(255, 255, 255, .95); text-shadow: 0 12px 40px rgba(0, 0, 0, .28); align-self: end; }

/* ---------- penutup dengan foto ---------- */
.thanks { position: relative; min-height: calc(var(--vh, 100vh) * .72); display: grid; place-items: center; margin-top: 96px; border-radius: 32px; overflow: hidden; }
.thanks .thanks-in { position: relative; z-index: 4; text-align: center; max-width: 760px; padding: 40px 48px; border-radius: 28px;
  background: rgba(251, 250, 244, .76); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-lg); }
.thanks .thanks-in h2 { margin: 16px 0 12px; }
.credits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.credits a { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 8px; font-size: .78rem; line-height: 1.4; color: var(--muted); }
.credits a:hover { border-color: var(--green); }
.credits img { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; }
.credits b { color: var(--ink); display: block; font-size: .8rem; }

@media (max-width: 1080px) {
  .hero-visual { min-height: 520px; }
}
@media (max-width: 860px) {
  .wrap { width: min(var(--max), 100% - 32px); }
  .hero, #tim, #latar { min-height: 0; }
  .p-hero > .wrap { min-height: 0; }
  .p-hero-card > .p-hero-img { left: 0; opacity: .3; }
  .p-hero-card > .p-hero-text { max-width: 100%; }
  .hv-glass { left: 4%; right: 4%; }
  .credits { grid-template-columns: 1fr; }
  .thanks .thanks-in { padding: 28px 22px; }
}

/* mode screenshot: tinggi layar dikunci 1080px */
.no-anim { --vh: 1080px; }

/* kartu sempit: rata kiri agar tidak ada celah antarkata */
.k-card p { text-align: left; }
/* foto anggota persegi agar bagian tim muat satu layar 16:9 */
.member .photo { aspect-ratio: 1 / 1; }

/* mode skala 16:9: ukuran mengikuti rancangan kanvas 1920 x 1080 */
html.scaled body { font-size: 18.5px; }