:root {
  --hijau: #0b6e4f;
  --hijau-muda: #3fae86;
  --hijau-tua: #084c38;
  --latar: #eef3f0;
  --kartu: #fff;
  --teks: #1b2a24;
  --redup: #5c6b64;
  --garis: #d5dfd9;
  --kuning: #b7791f;
  --merah: #b3261e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --latar: #0f1813;
    --kartu: #16221c;
    --teks: #e6efe9;
    --redup: #9bb0a5;
    --garis: #27372f;
    --hijau-tua: #2f8f6b;
  }
}

* { box-sizing: border-box }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--latar);
  color: var(--teks);
  font: 16px/1.5 "Segoe UI", system-ui, sans-serif;
  display: flex;
  flex-direction: column;
}

.atas {
  background: linear-gradient(135deg, var(--hijau-tua), var(--hijau));
  color: #fff;
  padding: 1.5rem clamp(1rem, 5vw, 3rem);
}

.merek { display: flex; align-items: center; gap: .9rem }
.logo { width: 52px; height: 52px; flex: none }
.merek h1 { margin: 0; font-size: 1.6rem; letter-spacing: .2px }
.merek p { margin: 0; opacity: .85; font-size: .95rem }

main {
  flex: 1;
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem clamp(1rem, 4vw, 2rem);
}

.intro { color: var(--redup); margin: 0 0 1.5rem; max-width: 60ch }

.grid-aplikasi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
}

.kartu-app {
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: 14px;
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}

.kartu-app:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(11, 110, 79, .14);
  border-color: var(--hijau-muda);
}

.kartu-app:focus-visible { outline: 3px solid var(--hijau-muda); outline-offset: 2px }

.ikon {
  width: 56px; height: 56px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--hijau-tua);
}
.ikon svg { width: 30px; height: 30px }
.ikon-rujukan { background: color-mix(in srgb, var(--hijau) 16%, transparent) }
.ikon-kontrol { background: color-mix(in srgb, var(--hijau-muda) 20%, transparent) }

.isi-kartu h2 { margin: 0 0 .35rem; font-size: 1.2rem }
.isi-kartu p { margin: 0; color: var(--redup); font-size: .95rem }

.status {
  margin-top: .6rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  color: var(--redup);
}
.titik { width: 8px; height: 8px; border-radius: 50%; background: var(--redup); flex: none }
.status.aktif { color: var(--hijau) }
.status.aktif .titik { background: var(--hijau) }
.status.mati { color: var(--merah) }
.status.mati .titik { background: var(--merah) }

.buka {
  margin-top: auto;
  font-weight: 600;
  color: var(--hijau);
}

.catatan {
  margin-top: 1.5rem;
  color: var(--redup);
  font-size: .9rem;
}
.catatan code {
  background: color-mix(in srgb, var(--hijau) 10%, transparent);
  padding: .1rem .4rem;
  border-radius: 4px;
}

.bawah {
  text-align: center;
  padding: 1.25rem;
  color: var(--redup);
  font-size: .85rem;
  border-top: 1px solid var(--garis);
}

@media (prefers-reduced-motion: no-preference) {
  .kartu-app { transition: transform .15s, box-shadow .15s, border-color .15s }
}