* { box-sizing: border-box; }
:root {
  color-scheme: light;
  --paper: #faf6ef;
  --ink: #362e2b;
  --muted: #62554d;
  --wine: #721e15;
  --gold: #c69b6c;
  --line: #e5d8c9;
  --sans: "DM Sans", Arial, sans-serif;
}
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.65 var(--sans); }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .25em; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font: 800 clamp(1.85rem, 4vw, 3.85rem)/1.04 var(--sans); letter-spacing: -.045em; overflow-wrap: anywhere; }
h3 { line-height: 1.3; }
.shell { width: min(1240px, calc(100% - 72px)); margin-inline: auto; }
.header { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand img { width: 151px; }
.header nav { display: flex; align-items: center; gap: clamp(15px, 3vw, 42px); font-size: .88rem; font-weight: 600; }
.header .about-link { color: var(--wine); font-weight: 800; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 23px; min-height: 48px; border: 1px solid transparent; border-radius: 100px; background: var(--wine); color: white; cursor: pointer; font: 700 .9rem/1.3 var(--sans); text-align: center; }
.button:hover { text-decoration: none; background: #56150f; }
.button-small { padding-inline: 17px; min-height: 42px; }
.button-light { color: #42271d; background: #f3d7ac; }
.button-light:hover { background: #ffe7c3; }
.button-outline { color: white; border-color: #f8e7d294; background: #2d18145c; }
.button-outline:hover { background: #2d1814; }
.eyebrow { color: var(--wine); font-weight: 700; letter-spacing: .15em; font-size: .71rem; line-height: 1.6; text-transform: uppercase; }
.hero { min-height: 568px; border-radius: 34px; overflow: hidden; isolation: isolate; display: grid; place-items: center; text-align: center; position: relative; color: white; background: #4d1b17; }
.hero-art, .hero-line { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-art { background: radial-gradient(ellipse at center, #2b100d9e 12%, transparent 80%), linear-gradient(180deg, #4f1016c9, #541e16ae 55%, #261511ea), url("assets/kota.webp") center 46% / cover; }
.hero-line { inset: auto -4% -67px; height: 113px; border-radius: 50%; border: 2px solid #d7a87886; box-shadow: 0 -9px 0 -6px #d7a87844, 0 -20px 0 -14px #c7835e6e; }
.hero-content { padding: 65px 24px 81px; }
.hero h1 { font-size: clamp(3.4rem, 7.5vw, 7rem); font-weight: 900; margin: 16px 0 22px; line-height: .98; text-wrap: balance; }
.hero h1 em { color: #f3d7ac; font-weight: 800; font-style: normal; }
.hero .eyebrow { color: #f3d7ac; }

.hero-description { max-width: 530px; margin: auto; color: #fff3e7; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 29px; }
.section { padding-block: 94px; }
.intro { max-width: 670px; }
.centered { text-align: center; margin-inline: auto; }
.intro h2, .donation h2 { margin-block: 10px 17px; }
.intro > p:last-child { color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 42px; }





.budget { background: radial-gradient(ellipse at top, #f3dfc4, #f5ede2 75%); border-block: 1px solid var(--line); }
.intro > .total { color: var(--wine); font: 900 clamp(2rem, 8vw, 6.8rem)/1 var(--sans); letter-spacing: -.055em; font-variant-numeric: lining-nums tabular-nums; margin-top: 20px; white-space: nowrap; }
.budget-card { max-width: 900px; margin: 34px auto 0; padding: 15px 28px 22px; background: #fffbf6; border: 1px solid var(--line); border-radius: 23px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 13px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th:last-child, td { text-align: right; padding-left: 12px; }
tbody th { font-weight: 600; }
td { white-space: nowrap; }
thead, small, .note, .swift { font-size: .85rem; color: var(--muted); }
table small { display: block; font-weight: 400; }
tfoot { color: var(--wine); font-weight: 700; }
tfoot th, tfoot td { border: 0; }
.note { margin-top: 7px; }
.progress { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--line); }
.progress p { display: flex; justify-content: space-between; gap: 8px; }
progress { width: 100%; accent-color: var(--wine); }
.donation { display: grid; grid-template-columns: 1fr minmax(310px, .66fr); align-items: center; gap: 45px; padding: clamp(28px, 6vw, 75px); border-radius: 29px; margin-bottom: 72px; color: #fff6eb; background: linear-gradient(140deg, #570f0e, #68351e 65%, #3a2923); }
.donation p { max-width: 490px; }
.donation .button-light { margin-top: 23px; }
.bank { padding: 28px; background: #fffaf4; color: var(--ink); border-radius: 19px; }
.bank .eyebrow { color: var(--wine); }


.copy-status:not(:empty) { font-size: .83rem; margin-top: 10px; }
footer { background: #362e2b url("assets/bumi.webp") right bottom / min(68vw, 730px) auto no-repeat; color: #fff7ed; }
.footer { display: grid; grid-template-columns: .85fr 1.8fr; gap: 26px; padding-block: 51px 37px; }
.footer img { width: 145px; margin-bottom: 11px; }
.footer p, .footer-bottom { color: #f2dfcc; font-size: .9rem; }
.footer a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.footer-bottom { display: flex; justify-content: space-between; gap: 12px; padding-block: 16px 21px; border-top: 1px solid #f2dfcc47; }
.sr-only, .skip:not(:focus) { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
.skip:focus { display: inline-block; padding: 10px; }
.reading { max-width: 790px; }
.reading h2, .split h2 { margin-bottom: 23px; }
.prose { display: grid; gap: 1.05em; color: var(--muted); }
.prose strong { color: var(--ink); font-weight: 700; }
.prose p, .impact-note { max-width: 72ch; }
.paper-tint { background: #f4ecdf; border-block: 1px solid var(--line); }
.objectives { list-style: none; padding: 0; margin-bottom: 0; }
.objectives li {
  min-height: 122px;
  padding: clamp(13px, 2.4vw, 29px);
  background: #fffbf6;
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: 18px;
  font-size: clamp(.83rem, 2.8vw, 1.025rem);
  font-weight: 400;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.objectives strong { font-weight: 800; }
@media (hover: hover) and (pointer: fine) {
  .objectives li {
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  }
  .objectives li:hover {
    background: #fff5e8;
    border-top-color: var(--wine);
    box-shadow: 0 10px 24px #642f221b;
    transform: translateY(-3px);
  }
}
.split { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: start; gap: clamp(22px, 6vw, 84px); }
.vehicle-photo { width: min(100%, 355px); margin: 20px auto 0; }
.detail-card { background: #fffbf6; border: 1px solid var(--line); border-radius: 22px; padding: clamp(17px, 3vw, 28px); }
.list-lead { font-weight: 700; }
.detail-list { color: var(--muted); margin: 9px 0 0; padding-inline-start: 1.25em; }
.detail-list li { padding: 10px 0 10px .3em; }
.detail-list li + li { border-top: 1px solid var(--line); }
.detail-list li::marker { color: var(--wine); }
.spec-table td { white-space: normal; }
.detail-card .note { margin-top: 15px; }
.budget-scroll { overflow-x: auto; }
.budget-table th, .budget-table td { padding-inline: 10px; }
.budget-table th:nth-child(n+3), .budget-table td { text-align: right; }
.budget-table th[scope="col"] { white-space: nowrap; }
.impact { display: grid; gap: 26px; }
.impact h2 { margin-bottom: 14px; }
.impact-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 185px), 1fr)); gap: 12px; list-style: none; padding: 0; margin: 13px 0 0; }
.impact-list li { padding: 19px; border-left: 3px solid var(--wine); border-radius: 0 15px 15px 0; background: #fffbf6; color: var(--ink); }
.impact-note { color: var(--muted); }
.signature { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.bank-details { margin: 0 0 16px; }
.bank-details div + div { margin-top: 6px; }
.bank-details dt, .bank-details dd { display: inline; margin: 0; }
.bank-details dt { color: var(--muted); }
.bank-details dd { font-weight: 700; }
.bank-details .account { margin-block: 10px; }
.bank-details .account dd { display: block; font-size: clamp(1.25rem, 3vw, 2rem); line-height: 1.25; }
.footer-contact h2 { font: 700 1rem/1.4 var(--sans); letter-spacing: 0; margin-bottom: 5px; }
@media (min-width: 1050px) {
  .edge-shapes { position: relative; isolation: isolate; overflow: clip; }
  .edge-shapes::before, .edge-shapes::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: min(15vw, 270px);
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
  }
  .edge-shapes::before {
    left: 0;
    top: 11%;
    transform: translateX(-50%);
    background: linear-gradient(140deg, #c69b6c, #a6784d);
  }
  .edge-shapes::after {
    right: 0;
    bottom: 12%;
    transform: translateX(50%);
    background: linear-gradient(145deg, #721e15, #5c3619);
  }
  .shell { width: min(1240px, 81%); }
  #spesifikasi::before, #dampak::after { background: linear-gradient(155deg, #e2c39c, #c69b6c); }
  #spesifikasi::after { background: linear-gradient(150deg, #755039, #4c2e1c); }
  #dampak::before { background: linear-gradient(150deg, #862a1c, #5a1513); }
}
@media (max-width: 820px) {
  .shell { width: calc(100% - 40px); }
  .section { padding-block: 68px; }
  .hero { min-height: 500px; }
  .donation { gap: 27px; }
  .bank { padding: 20px; }
}
@media (max-width: 640px) {
  .shell { width: calc(100% - 30px); }
  .header { min-height: 0; padding-block: 15px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .brand img { width: 126px; }
  .header nav { flex-wrap: wrap; grid-row: 2; grid-column: 1 / -1; justify-content: center; border-top: 1px solid var(--line); padding-top: 10px; }
  .hero { min-height: 472px; border-radius: 24px; }
  .hero-content { padding-inline: 15px; }
  .hero h1 { font-size: clamp(2.15rem, 9.6vw, 4.3rem); }
  .split, .donation, .footer { grid-template-columns: 1fr; }
  .cards { gap: 10px; margin-top: 28px; }
  .objectives { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .budget-card { padding-inline: 16px; }
  .donation { margin-bottom: 47px; padding: 24px; }
  .footer { gap: 20px; padding-block: 39px 25px; }
  .budget-scroll { margin-inline: -4px; }
  .budget-table { font-size: .78rem; }
  .budget-table th, .budget-table td { padding-inline: 4px; }
  .budget-table th[scope="col"] { font-size: .65rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .objectives li, .objectives li:hover { transition: none; transform: none; }
}