/* ============================================================
   layout.css
   -----------------------------------------------------------
   Aturan struktural umum: container, grid dasar, spacing antar
   section. Ini BUKAN tempat buat styling tombol/card/dst —
   itu rumahnya di components.css. Kalau nyari kenapa jarak
   antar section aneh, cari duluan di sini.
============================================================ */

/* -----------------------------------------
   Container — pembungkus konten tiap section
   biar gak nempel ke tepi layar
----------------------------------------- */
.container{
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 20px;
}

/* -----------------------------------------------------
   Section spacing — jarak vertikal antar section gede.
   Dipakai sebagai base class, tiap section import ini.
----------------------------------------------------- */
.section{
  padding: var(--sp-2xl) 0;
  position: relative;
}

.section--tight{
  padding: var(--sp-xl) 0;
}

/* -------------------------------------------
   Section header — eyebrow + judul + subjudul,
   pattern yang berulang di hampir semua section
------------------------------------------- */
.section-head{
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--sp-xl);
}

.section-head .eyebrow{
  display: inline-block;
  margin-bottom: var(--sp-sm);
}

.section-head h2{
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-sm);
}

.section-head p{
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* -----------------------------------------
   Grid utilities — dipakai di services,
   pricing, trustbar, dll. Mobile-first:
   default 1 kolom, baru di-pecah lebar di
   responsive.css
----------------------------------------- */
.grid{
  display: grid;
  gap: var(--sp-md);
}

.grid-2{ grid-template-columns: 1fr; }
.grid-3{ grid-template-columns: 1fr; }
.grid-4{ grid-template-columns: 1fr; }

/* -----------------------------------------
   Flex helper kecil-kecil yang sering kepake
----------------------------------------- */
.flex-center{
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* -----------------------------------------
   Divider tipis antar blok konten
----------------------------------------- */
.hr-line{
  height: 1px;
  background: var(--border);
  width: 100%;
}