/* Bekuara — halaman area.
   Menumpang styles.css dan hanya menambah yang khas di sini: tabel tarif,
   petak area, dan tautan antararea. */

.area-intro {
  margin-top: 1.4rem; max-width: 60ch;
  color: var(--paper-dim); font-size: 1.02rem; line-height: 1.7;
}
.area-note {
  margin-top: 1rem; max-width: 62ch;
  color: var(--paper-faint); font-size: .86rem; line-height: 1.6;
}

/* --- tabel tarif -------------------------------------------------------- */
/* Tabel selalu jadi bagian pertama yang meluber di ponsel. Pembungkus dengan
   gulir sendiri membuat tabelnya bergerak, bukan halamannya. */
.tabel-bungkus { margin-top: 1.8rem; overflow-x: auto; max-width: 820px; }

.tabel-tarif {
  width: 100%; border-collapse: collapse; min-width: 460px;
  font-size: .92rem;
}
.tabel-tarif caption {
  text-align: left; color: var(--paper-faint); font-size: .78rem;
  padding-bottom: 12px; letter-spacing: .02em;
}
.tabel-tarif th, .tabel-tarif td {
  text-align: left; padding: 13px 16px 13px 0;
  border-bottom: 1px solid var(--line);
}
.tabel-tarif thead th {
  color: var(--paper-faint); font-weight: 600; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .1em; vertical-align: bottom;
}
.tabel-tarif thead th small {
  display: block; margin-top: 4px; font-family: "IBM Plex Mono", monospace;
  font-size: .72rem; letter-spacing: 0; text-transform: none; opacity: .8;
}
.tabel-tarif tbody th { color: var(--paper); font-weight: 600; }
/* Angka disejajarkan supaya kolomnya bisa dibandingkan sekilas, bukan dibaca
   satu per satu. */
.tabel-tarif td {
  color: var(--paper-dim); font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
}
.tabel-tarif tbody tr:hover th, .tabel-tarif tbody tr:hover td { color: var(--paper); }
.tabel-tarif tbody td:nth-child(3) { color: var(--frost); }
.tabel-tarif tbody td:nth-child(4) { color: var(--chilled); }

/* --- poin layanan ------------------------------------------------------- */
.area-poin {
  display: grid; gap: 22px; margin-top: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) { .area-poin { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.area-poin > div { border-top: 1px solid var(--line); padding-top: 18px; }
.area-poin h3 {
  font-family: Archivo, sans-serif; font-weight: 700; font-size: 1.02rem;
  margin: 0 0 8px; letter-spacing: -.01em;
}
.area-poin p { margin: 0; color: var(--paper-dim); font-size: .92rem; line-height: 1.6; }

/* --- tautan antararea --------------------------------------------------- */
/* Tautan ini bukan hiasan: inilah yang membuat mesin pencari bisa menelusuri
   kesepuluh halaman dari mana pun ia mendarat. */
.area-tautan { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.8rem; }
.area-tautan a {
  border: 1px solid var(--line); border-radius: 2px;
  padding: 10px 16px; text-decoration: none;
  color: var(--paper-dim); font-size: .9rem; transition: all .15s;
}
.area-tautan a:hover { border-color: var(--lime); color: var(--lime); }

/* --- petak di halaman indeks -------------------------------------------- */
.area-petak {
  display: grid; gap: 14px; margin-top: 2.4rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .area-petak { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .area-petak { grid-template-columns: repeat(3, 1fr); } }

.area-kartu {
  display: grid; gap: 8px; align-content: start;
  border: 1px solid var(--line); border-radius: 3px;
  background: rgba(247,248,245,.03); padding: 22px;
  text-decoration: none; transition: border-color .15s, background .15s;
}
.area-kartu:hover { border-color: var(--lime); background: rgba(168,232,74,.05); }
.area-kartu-nama {
  font-family: Archivo, sans-serif; font-weight: 700; font-size: 1.12rem;
  color: var(--paper); letter-spacing: -.01em;
}
.area-kartu-ket { color: var(--paper-dim); font-size: .88rem; line-height: 1.55; }

/* Topbar di halaman ini fixed dan selalu solid, jadi bagian pertama harus
   diberi ruang. Di beranda hal ini tidak perlu karena hero-nya setinggi
   layar dan isinya berada di tengah. */
main > .stage:first-child { padding-top: 132px; }
@media (max-width: 560px) { main > .stage:first-child { padding-top: 108px; } }