:root {
  --rumput: #2d5a27;
  --kulit: #6b3e24;
  --program: #f6f0e0;
  --tinta: #2a241c;
  --garis: #d9cfb6;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Garamond, "Palatino Linotype", Georgia, serif;
  background: var(--program);
  color: var(--tinta);
  line-height: 1.7;
}
h1, h2, h3 { font-family: Verdana, "Trebuchet MS", sans-serif; font-weight: 700; }
a { color: var(--kulit); }
.trek { height: 7px; background: repeating-linear-gradient(90deg, var(--rumput) 0 22px, #f6f0e0 22px 28px, var(--kulit) 28px 34px); }
.paddock {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 5vw;
  background: #fffaf0;
  border-bottom: 1px solid var(--garis);
}
.paddock img { width: 56px; height: 56px; }
.paddock h1 { margin: 0; font-size: 22px; color: var(--rumput); }
.paddock h1 a { color: inherit; text-decoration: none; }
.paddock p { margin: 3px 0 0; color: var(--kulit); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.heat {
  display: flex;
  flex-wrap: wrap;
  background: var(--rumput);
}
.heat a {
  color: #f4ecda;
  text-decoration: none;
  padding: 11px 16px;
  font-family: Verdana, sans-serif;
  font-size: 13px;
}
.heat a:hover, .heat a.aktif { background: var(--kulit); color: #fff; }
.oval { width: min(960px, 92vw); margin: 28px auto 70px; }
.muka {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  align-items: center;
  margin-bottom: 26px;
}
.muka h2 { margin: 0 0 12px; font-size: clamp(26px, 4vw, 38px); color: var(--rumput); line-height: 1.15; }
.muka img { width: 100%; border: 1px solid var(--garis); }
.kartu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.kartu article {
  background: #fffaf0;
  border: 1px solid var(--garis);
  padding: 18px 20px;
}
.kartu h3 { margin: 0 0 6px; color: var(--rumput); }
.esai {
  background: #fffaf0;
  border: 1px solid var(--garis);
  padding: 28px 30px;
}
.esai h2 { margin-top: 0; color: var(--rumput); }
.tombol {
  display: inline-block;
  background: var(--rumput);
  color: #fff;
  text-decoration: none;
  padding: 10px 16px;
  font-family: Verdana, sans-serif;
}
.kaki-trek {
  border-top: 1px solid var(--garis);
  padding: 24px 5vw 40px;
  font-size: 13px;
}
.kaki-trek a { margin-right: 12px; }
@media (max-width: 760px) {
  .muka, .kartu { grid-template-columns: 1fr; }
}