/* ─────────────────────────────────────────────────────────────────────────
   hanif ui · tiga bidang halaman
   Satu keputusan yang dibuat sekali di awal: halaman ini watak yang mana.
   ───────────────────────────────────────────────────────────────────────── */

/* LEBAR — etalase. Dipakai buat landing, galeri, katalog karya.
   Tujuannya bikin layar terasa lega: isi menempel jauh ke tepi, kolomnya
   banyak, dan nggak ada kolom tengah sempit yang bikin layar lebar mubazir. */
.shell-wide {
  width: 100%;
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* DASHBOARD — tetap lebar, tapi isinya data. Kepadatan naik, hiasan turun. */
.shell-dash {
  width: 100%;
  max-width: var(--w-dash);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* RINGKAS — app kecil. Satu kolom di tengah, selebar layar HP, biar di laptop
   pun rasanya seperti aplikasi yang dipegang, bukan halaman web yang melar. */
.shell-compact {
  width: 100%;
  max-width: var(--w-compact);
  margin-inline: auto;
  padding-inline: var(--s4);
}

/* Kisi — kolomnya menyesuaikan sendiri, jadi nggak perlu breakpoint manual. */
.grid { display: grid; gap: var(--s4); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.grid-tight { gap: var(--s2); }

/* Baris mendatar yang aman di layar sempit */
.row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.row-tight { gap: var(--s2); }
.row-nowrap { flex-wrap: nowrap; }
.spacer { flex: 1 1 auto; }

/* Jarak antar bagian — satu tangga, jangan dikarang tiap halaman */
.stack > * + * { margin-top: var(--s4); }
.stack-lg > * + * { margin-top: var(--s7); }
.section { padding-block: var(--s9); }
.section-sm { padding-block: var(--s7); }

/* Dashboard dua kolom: sisi kiri tipis, isi utama melar */
.split {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: var(--s6);
  align-items: start;
}
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
}