/* ============================================================
   Tema custom "Catatan WU" — terang, hangat, nyaman dibaca.
   Aksen: teal + oranye. Latar off-white biar tidak menyilaukan.
   ============================================================ */

:root {
  --md-primary-fg-color: #0f766e;   /* teal-700 */
  --md-accent-fg-color: #ea580c;    /* oranye hangat */
}

/* Latar belakang lembut (bukan putih terang) */
[data-md-color-scheme="default"] {
  --md-default-bg-color: #faf9f6;
  --md-typeset-a-color: #0f766e;
}

/* Lebar konten yang enak dibaca + napas yang lega */
.md-grid {
  max-width: 1080px;
}
.md-typeset {
  line-height: 1.75;
}
.md-typeset h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
}
.md-typeset h2 {
  font-weight: 650;
  margin-top: 2.2em;
  border-bottom: 1px solid rgba(15, 118, 110, 0.12);
  padding-bottom: 0.2em;
}

/* Header dengan sentuhan gradien biar berasa "custom" */
.md-header {
  background: linear-gradient(90deg, #0f766e 0%, #115e59 100%);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.md-tabs {
  background: transparent;
}

/* Kartu ala portofolio (dipakai lewat blok "grid cards") */
.md-typeset .grid.cards > ul > li {
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.md-typeset .grid.cards > ul > li:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(15, 118, 110, 0.14);
  border-color: rgba(15, 118, 110, 0.4);
}

/* Link lebih bersih */
.md-typeset a {
  text-decoration: none;
}
.md-typeset a:hover {
  text-decoration: underline;
}

/* Gambar/screenshot di dalam konten: rapi, ada bingkai & bayangan halus */
.md-typeset img {
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  max-width: 100%;
}

/* Hero halaman beranda */
.hero {
  text-align: center;
  padding: 3rem 1rem 1rem;
}
.hero h1 {
  font-size: 2.6rem;
  margin-bottom: 0.4rem;
  background: linear-gradient(90deg, #0f766e, #ea580c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero p {
  color: #57534e;
  font-size: 1.05rem;
  max-width: 660px;
  margin: 0.4rem auto 1.4rem;
}
/* Bingkai/bayangan tidak berlaku untuk ikon SVG di tombol hero */
.hero .md-button {
  margin: 0.2rem 0.3rem;
}