/* ---------------------------------------------------------------
   malikgunawan.my.id
   Palet hangat & natural. Ditulis tangan, tanpa kerangka kerja.
   --------------------------------------------------------------- */

:root {
  --krem:        #FAF7F2;
  --krem-tua:    #F1ECE2;
  --putih:       #FFFFFF;
  --garis:       #E0D8CA;
  --teks:        #2B2924;
  --teks-samar:  #5E574B;
  --hijau:       #3F5A37;
  --hijau-tua:   #33492C;
  --hijau-muda:  #EBF0E6;

  --lebar:       68rem;
  --lebar-sempit: 44rem;
  --sudut:       14px;
  --bayang:      0 1px 2px rgba(43, 41, 36, .04),
                 0 8px 24px -12px rgba(43, 41, 36, .12);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --krem:       #17150F;
    --krem-tua:   #1E1C15;
    --putih:      #221F18;
    --garis:      #38342A;
    --teks:       #EFEADF;
    --teks-samar: #B3AA99;
    --hijau:      #A8C398;
    --hijau-tua:  #BFD6B1;
    --hijau-muda: #232B1E;
    --bayang:     0 1px 2px rgba(0, 0, 0, .3),
                  0 8px 24px -12px rgba(0, 0, 0, .6);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--krem);
  color: var(--teks);
  font-family: var(--font);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ---------- kerangka ---------- */

.wadah {
  width: min(100% - 2.5rem, var(--lebar));
  margin-inline: auto;
}

.wadah.sempit { width: min(100% - 2.5rem, var(--lebar-sempit)); }

.bagian { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.bagian.alt { background: var(--krem-tua); }

/* ---------- tipografi ---------- */

h1, h2, h3 {
  line-height: 1.22;
  letter-spacing: -.018em;
  margin: 0 0 .6em;
  font-weight: 650;
  text-wrap: balance;
}

h1 { font-size: clamp(1.9rem, 1.3rem + 2.9vw, 3.15rem); }
h2 { font-size: clamp(1.45rem, 1.2rem + 1.2vw, 2rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

.lead, .bagian-lead {
  color: var(--teks-samar);
  font-size: clamp(1.05rem, 1rem + .35vw, 1.22rem);
  max-width: 46rem;
}

.bagian-lead { margin-bottom: 2.25rem; }

.kicker {
  color: var(--hijau);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .75rem;
}

a { color: var(--hijau); text-underline-offset: .18em; }
a:hover { color: var(--hijau-tua); }

:focus-visible {
  outline: 3px solid var(--hijau);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--hijau);
  color: #fff;
  padding: .75rem 1.25rem;
  z-index: 50;
  border-radius: 0 0 var(--sudut) 0;
}
.skip:focus { left: 0; }

/* ---------- bilah atas ---------- */

.bilah {
  background: color-mix(in srgb, var(--krem) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--garis);
  position: sticky;
  top: 0;
  z-index: 20;
}

.bilah-isi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
  flex-wrap: wrap;
}

.merek {
  font-weight: 650;
  color: var(--teks);
  text-decoration: none;
  letter-spacing: -.015em;
}
.merek:hover { color: var(--hijau); }

.bilah nav {
  display: flex;
  align-items: center;
  gap: clamp(.85rem, 2.5vw, 1.6rem);
  flex-wrap: wrap;
}

.bilah nav a {
  color: var(--teks-samar);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
}
.bilah nav a:hover { color: var(--hijau); }

.bilah nav a.bahasa {
  color: var(--hijau);
  border: 1px solid var(--garis);
  border-radius: 999px;
  padding: .3rem .8rem;
  background: var(--putih);
}
.bilah nav a.bahasa:hover { border-color: var(--hijau); }

/* ---------- hero ---------- */

.hero {
  padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(2.5rem, 6vw, 4rem);
  background:
    radial-gradient(60rem 30rem at 15% -10%,
      color-mix(in srgb, var(--hijau) 10%, transparent), transparent 70%);
}

.hero h1 { max-width: 20ch; }
.hero .lead { margin-top: 1.25rem; }

.tombol-baris {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}

.tombol {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .7rem 1.35rem;
  border-radius: 999px;
  border: 1px solid var(--garis);
  background: var(--putih);
  color: var(--teks);
  text-decoration: none;
  font-weight: 550;
  font-size: .97rem;
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.tombol:hover { border-color: var(--hijau); color: var(--teks); transform: translateY(-1px); }

.tombol.utama {
  background: var(--hijau);
  border-color: var(--hijau);
  color: #FFFFFF;
}
.tombol.utama:hover { background: var(--hijau-tua); border-color: var(--hijau-tua); color: #fff; }

@media (prefers-color-scheme: dark) {
  .tombol.utama { color: #14180F; }
  .tombol.utama:hover { color: #14180F; }
}

.tombol.kecil {
  padding: .5rem 1rem;
  font-size: .9rem;
  margin-top: .35rem;
  align-self: flex-start;
}

/* ---------- kartu aplikasi ---------- */

.kisi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1.25rem;
}

/* Saat aplikasinya baru satu atau dua, kisi dipersempit dan kartunya
   melebar mengisi ruang - supaya tidak terlihat kosong di layar lebar. */
.kisi.sedikit {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  max-width: 40rem;
}

.kisi.tiga {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.kartu {
  display: flex;
  flex-direction: column;
  background: var(--putih);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  padding: 1.6rem;
  box-shadow: var(--bayang);
  transition: border-color .18s ease, transform .18s ease;
}
.kartu:hover { border-color: color-mix(in srgb, var(--hijau) 45%, var(--garis)); transform: translateY(-2px); }

.kartu-kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.kartu-kepala h3 { margin: 0; }

.kartu-tagline {
  color: var(--hijau);
  font-weight: 550;
  margin: .35rem 0 .75rem;
}

.lencana {
  font-size: .78rem;
  font-weight: 600;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: var(--hijau-muda);
  color: var(--hijau);
  white-space: nowrap;
}

.cip {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: 0;
  margin: 1rem 0 .5rem;
}

.cip li {
  font-size: .82rem;
  color: var(--teks-samar);
  background: var(--krem-tua);
  border: 1px solid var(--garis);
  border-radius: 999px;
  padding: .22rem .7rem;
}

@media (prefers-color-scheme: dark) {
  .cip li { background: #1A1812; }
}

.grup h3 { margin-bottom: .5rem; }
.grup .cip { margin-top: .25rem; }

/* ---------- catatan ---------- */

.catatan-ringkas {
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--garis);
}
.catatan-ringkas:last-of-type { border-bottom: 0; }
.catatan-ringkas h2, .catatan-ringkas h3 { margin: .15rem 0 .5rem; font-size: 1.28rem; }
.catatan-ringkas h2 a, .catatan-ringkas h3 a { color: var(--teks); text-decoration: none; }
.catatan-ringkas h2 a:hover, .catatan-ringkas h3 a:hover { color: var(--hijau); text-decoration: underline; }
.catatan-ringkas p { color: var(--teks-samar); margin: 0; }

.tanggal {
  color: var(--teks-samar);
  font-size: .88rem;
  margin: 0;
}

.tautan-lanjut {
  font-weight: 550;
  text-decoration: none;
  display: inline-block;
  margin-top: 1.25rem;
}
.tautan-lanjut:hover { text-decoration: underline; }

article.bagian h1 { margin-top: .4rem; }
article.bagian p { max-width: 40rem; }

hr {
  border: 0;
  border-top: 1px solid var(--garis);
  margin: 2rem 0;
}

/* ---------- kontak ---------- */

.kontak {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  font-size: 1.05rem;
}

/* ---------- kaki ---------- */

.kaki {
  border-top: 1px solid var(--garis);
  padding: 2rem 0;
  color: var(--teks-samar);
  font-size: .9rem;
  background: var(--krem-tua);
}
.kaki p { margin: 0; }

/* ---------- layar kecil ---------- */

@media (max-width: 34rem) {
  .bilah-isi { min-height: 3.5rem; padding-block: .5rem; }
  .bilah nav { gap: .8rem; font-size: .9rem; }
  .kartu { padding: 1.3rem; }
  .tombol-baris .tombol { flex: 1 1 auto; justify-content: center; }
}

@media print {
  .bilah, .skip, .tombol { display: none; }
  body { background: #fff; color: #000; }
}