/* CSS tambahan di luar Tailwind: bentuk, animasi, dan efek Material Design 3 Expressive */
:root {
  --primary: #0e6b45;
  --on-primary: #ffffff;
  --primary-container: #b7f2cc;
  --on-primary-container: #002111;
  --secondary-container: #d0e8d5;
  --on-secondary-container: #0b1f13;
  --tertiary: #765a00;
  --tertiary-container: #ffdf9a;
  --on-tertiary-container: #241a00;
  --surface: #f5fbf3;
  --surface-container: #e9efe7;
  --surface-high: #e3e9e1;
  --outline-variant: #bec9c0;
  --ease: cubic-bezier(.05, .7, .1, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

html { scroll-behavior: smooth; scroll-padding-top: 9rem; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body { overflow-x: hidden; -webkit-font-smoothing: antialiased;
  background: radial-gradient(48rem 26rem at 100% -8%, rgb(255 223 154 / .4), transparent), radial-gradient(44rem 26rem at -10% 18%, rgb(183 242 204 / .5), transparent), var(--surface); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--surface); z-index: 60; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--tertiary); outline-offset: 3px; border-radius: 10px; }
.icon { font-family: "Material Symbols Rounded"; font-weight: 400; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; display: inline-block; flex-shrink: 0; font-feature-settings: "liga"; user-select: none; }

/* App bar */
.app-bar { transition: box-shadow .3s, border-color .3s; }
.app-bar.scrolled { border-color: var(--outline-variant); box-shadow: 0 10px 30px rgb(23 29 25 / .08); }
.progress { position: absolute; left: 0; bottom: -1px; width: 100%; height: 3px; background: linear-gradient(90deg, var(--primary), var(--tertiary)); transform: scaleX(0); transform-origin: left; }
.clock { display: none; width: fit-content; max-width: 100%; white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }
.js .clock { display: flex; }
.live { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--primary); animation: pulse 1.8s ease-out infinite; }
.nav { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.nav::-webkit-scrollbar { display: none; }
.nav a { transition: background-color .25s, border-radius .35s var(--spring), color .25s; }
.nav a:hover { background: var(--primary-container); border-radius: 14px; }
.nav a[aria-current], .nav a.accent { background: var(--primary); color: var(--on-primary); }

/* Hero */
.hero::before { content: ""; position: absolute; right: -70px; top: -70px; width: 280px; height: 280px; background: var(--tertiary-container); opacity: .7; border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; animation: morph 12s ease-in-out infinite, drift 18s ease-in-out infinite; }
.hero-body > * { animation: rise .9s var(--ease) both; }
.hero-body > :nth-child(2) { animation-delay: .1s; }
.hero-body > :nth-child(3) { animation-delay: .2s; }
.hero-body > :nth-child(4) { animation-delay: .3s; }
.orb { border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%; animation: morph 10s ease-in-out infinite; box-shadow: 0 30px 60px rgb(14 107 69 / .32); }
.orb::after { content: ""; position: absolute; inset: -16px; border: 2px dashed rgb(14 107 69 / .35); border-radius: inherit; animation: spin 50s linear infinite; }
.float-card { animation: float 6s ease-in-out infinite; box-shadow: 0 12px 28px rgb(23 29 25 / .12); }
.float-card.b { animation-delay: -3s; }

/* Tombol */
.button { transition: border-radius .35s var(--spring), background-color .2s, transform .2s, box-shadow .2s; }
.button:hover { border-radius: 16px; }
.button:active { transform: scale(.97); }
.button-filled { box-shadow: 0 6px 18px rgb(14 107 69 / .3); }
.button-outlined:hover { background: rgb(14 107 69 / .1); }
.button-tonal:hover { background: var(--primary-container); }

/* Statistik */
.stat { transition: transform .35s var(--spring), border-radius .35s var(--spring); }
.stat:hover { transform: translateY(-5px); border-radius: 40px; }
.stat dt { order: 3; }

/* Judul bagian */
.eyebrow::before { content: ""; width: 28px; height: 6px; border-radius: 999px; background: currentColor; }

/* Kartu */
.card { transition: border-radius .4s var(--spring), background-color .25s, transform .35s var(--spring), box-shadow .3s; overflow-wrap: anywhere; }
.card:nth-child(odd) { border-top-right-radius: 60px; }
.card:nth-child(even) { border-bottom-left-radius: 60px; }
.card:hover { border-radius: 42px; box-shadow: 0 18px 40px rgb(23 29 25 / .1); }
a.card:hover { transform: translateY(-4px); }
.card-icon { transition: border-radius .45s var(--spring), transform .45s var(--spring), background-color .3s, color .3s; }
.card:hover .card-icon { border-radius: 50%; transform: rotate(-8deg) scale(1.08); background: var(--primary); color: var(--on-primary); }
.card-more .icon { font-size: 18px; transition: transform .3s; }
a.card:hover .card-more .icon { transform: translate(3px, -3px); }
.tones > .card:nth-child(4n+1) { background: var(--primary-container); color: var(--on-primary-container); }
.tones > .card:nth-child(4n+2) { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.tones > .card:nth-child(4n+3) { background: var(--secondary-container); color: var(--on-secondary-container); }
.tones > .card h3 { color: inherit; }
.tones > .card .card-icon { background: rgb(255 255 255 / .6); color: inherit; }
.tones > .card:hover .card-icon { background: var(--primary); color: var(--on-primary); }

/* Timeline */
.timeline::before { content: ""; position: absolute; left: 10px; top: 14px; bottom: 14px; width: 4px; border-radius: 4px; background: linear-gradient(var(--primary), var(--tertiary)); }
.tl-item { transition: border-radius .4s var(--spring), background-color .25s; }
.tl-item:nth-child(odd) { border-top-right-radius: 56px; }
.tl-item:hover { background: var(--surface-high); border-radius: 40px; }
.tl-item::before { content: ""; position: absolute; left: -29px; top: 30px; width: 18px; height: 18px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 6px var(--surface); }
.tl-item:last-child::before { background: var(--tertiary); }

/* Blok berwarna */
.block-green::after { content: ""; position: absolute; right: -80px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; background: rgb(255 255 255 / .06); }
.block > * { position: relative; z-index: 1; }
.leader { transition: border-radius .4s var(--spring), background-color .25s; }
.leader:hover { background: rgb(255 255 255 / .2); border-radius: 40px; }
.chip { transition: background-color .2s, border-radius .35s var(--spring); }
.chip:hover { background: rgb(255 255 255 / .28); border-radius: 12px; }
.menu-item { transition: border-radius .4s var(--spring), transform .35s var(--spring); }
.menu-item:hover { border-radius: 40px; transform: translateY(-3px); }

/* Footer */
.footer a:hover { text-decoration: underline; }

/* Tombol ke atas */
.fab { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: grid; place-items: center; width: 56px; height: 56px; border: 0; border-radius: 18px; background: var(--primary-container); color: var(--on-primary-container); box-shadow: 0 10px 28px rgb(14 107 69 / .3); cursor: pointer; opacity: 0; transform: translateY(24px) scale(.8); pointer-events: none; transition: opacity .3s, transform .45s var(--spring), border-radius .35s var(--spring); }
.fab.show { opacity: 1; transform: none; pointer-events: auto; }
.fab:hover { border-radius: 50%; }

/* Animasi */
.reveal { transition: opacity .8s var(--ease), transform .8s var(--ease), border-radius .4s var(--spring), background-color .25s, box-shadow .3s; }
.reveal:not(.in) { opacity: 0; transform: translateY(32px); }
@keyframes rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes drift { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-22px, 18px) rotate(10deg); } }
@keyframes morph { 0%, 100% { border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%; } 50% { border-radius: 58% 42% 45% 55% / 45% 55% 45% 55%; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgb(14 107 69 / .5); } 70% { box-shadow: 0 0 0 8px rgb(14 107 69 / 0); } 100% { box-shadow: 0 0 0 0 rgb(14 107 69 / 0); } }

@media (max-width: 640px) { html { scroll-padding-top: 12rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }