/* ============================================================
   50-HALAMAN.CSS — Tentang & Hubungi
   Dimuat setelah 40-utilities. Semua kelas baru, tidak ada satu pun
   selector lama yang ditimpa, jadi cascade lama tetap utuh.
   ============================================================ */

/* ============================================================
   BAB 01 — NAMA
   Nama anak jadi nama toko. Kata "Anna" adalah satu-satunya
   elemen mega di halaman ini; sisanya diam.
   ============================================================ */

.sa-nama__judul {
  display: grid;
  gap: var(--sa-space-3);
  margin-bottom: var(--sa-space-9);
}

.sa-nama__kecil {
  font-family: var(--sa-font-display);
  font-variation-settings: 'wdth' 70, 'wght' 600;
  font-size: var(--sa-fs-label);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--sa-fg-muted);
  line-height: 1;
}

.sa-nama__besar {
  font-size: var(--sa-fs-mega);
  line-height: var(--sa-lh-mega);
  font-variation-settings: 'wdth' 125, 'wght' 800;
  letter-spacing: -.04em;
  display: block;
}

.sa-nama__bawah {
  display: grid;
  gap: var(--sa-space-5);
  max-width: 52ch;
  margin-inline-start: auto;
  padding-inline-start: var(--sa-modul);
  border-inline-start: var(--sa-garis) solid var(--sa-line);
}

@media (min-width: 900px) {
  .sa-nama__bawah { width: 46%; }
}

/* ============================================================
   BAB 03 — RIWAYAT
   Kronologi jadi tata letak.

   Satu variabel --_b (1..9) menggerakkan empat hal sekaligus:
   lebar sumbu huruf, ukuran tahun, panjang kolom teks, dan
   ruang vertikal. Benang di tepi kiri menebal mengikuti --_b,
   putus di babak "jeda", lalu kembali paling tebal di "bangkit".
   ============================================================ */

/* ------------------------------------------------------------
   --_b dan --_wdth harus berupa ANGKA, bukan token teks. Tanpa @property,
   calc() di dalam font-variation-settings dianggap nilai tidak sah dan seluruh
   deklarasinya dibuang — sumbu lebar Archivo diam-diam tidak pernah bergerak.
   ------------------------------------------------------------ */
@property --_b    { syntax: '<number>'; inherits: true; initial-value: 5; }
@property --_wdth { syntax: '<number>'; inherits: true; initial-value: 100; }

.sa-riwayat { padding-bottom: 0; }

.sa-riwayat__daftar {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sa-babak {
  --_wdth: calc(62 + (var(--_b) - 1) * 7);            /* 62 → 118  */
  --_fs: calc(2rem + var(--_b) * clamp(.34rem, 1.5vw, 1.15rem));
  --_ukur: calc(30ch + var(--_b) * 2.6ch);            /* 32ch → 53ch */
  --_ruang: calc(var(--sa-space-6) + var(--_b) * clamp(5px, 1.05vw, 14px));
  --_benang: calc(2px + (var(--_b) - 1) * 1px);       /* 2px → 10px */

  background: var(--sa-bg);
  color: var(--sa-fg);
}

/* Benang riwayat.
   Padding vertikal ada di dalam __inner, bukan di li, supaya garis satu babak
   bersambung persis dengan garis babak berikutnya — tanpa celah. Tebalnya
   berubah per babak, jadi tepi kiri halaman melangkah menebal tahun demi tahun. */
.sa-babak__inner {
  position: relative;
  display: grid;
  gap: var(--sa-space-4);
  padding-block: var(--_ruang);
  /* Benang berdiri tepat di tepi teks halaman; isinya mundur satu modul stroke
     logo, jarak yang sama dipakai di seluruh sistem. */
  padding-inline-start: calc(var(--sa-gutter) + var(--sa-modul));
}

.sa-babak__inner::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--sa-gutter);
  width: var(--_benang);
  background: var(--sa-line);
}

/* Tahun — sumbu lebar Archivo membawa pertumbuhan usaha. */
.sa-babak__tahun {
  font-family: var(--sa-font-display);
  font-variation-settings: 'wdth' 100, 'wght' 800;   /* cadangan bila @property tak didukung */
  font-variation-settings: 'wdth' var(--_wdth), 'wght' 800;
  font-size: var(--_fs);
  max-width: 4.6ch;                                  /* rentang tahun pecah dua baris, bukan melebar */
  line-height: .84;
  letter-spacing: -.03em;
  color: var(--sa-fg);
  margin: 0;
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
}

.sa-babak__judul {
  font-size: var(--sa-fs-h3);
  font-variation-settings: 'wdth' 100, 'wght' 700;
  margin-bottom: var(--sa-space-3);
}

.sa-babak__teks { max-width: var(--_ukur); }

.sa-babak__teks p {
  max-width: none;
  margin-bottom: var(--sa-space-3);
}

.sa-babak__teks p:last-child { margin-bottom: 0; }

.sa-babak__foto { margin: 0; }
.sa-babak__foto img { width: 100%; height: auto; }

@media (min-width: 900px) {
  .sa-babak__inner {
    /* Kolom tahun selebar angkanya sendiri; jarak ke teks ikut tumbuh
       bersama usaha, sama seperti ukuran hurufnya. */
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: calc(var(--sa-space-6) + var(--_b) * clamp(4px, .8vw, 12px));
    align-items: start;
  }

  .sa-babak__foto {
    grid-column: 2;
    max-width: calc(34% + var(--_b) * 4%);
  }
}

/* ---------- TUMBUH ---------- */
.sa-babak--tumbuh .sa-babak__tahun { color: var(--sa-fg); }

/* ---------- JEDA — satu-satunya babak yang patah ----------
   Benang berubah jadi garis terputus, kuning hilang sama sekali, ruang
   vertikal dikompresi, dan tahun kehilangan lebarnya. Tidak ada label apa pun
   yang menjelaskan ini; pembaca merasakannya sebelum sempat membacanya. */
.sa-babak--jeda {
  --_ruang: var(--sa-space-6);
  --_wdth: 62;
}

.sa-babak--jeda .sa-babak__inner::before {
  background: repeating-linear-gradient(
    to bottom,
    var(--sa-line) 0 10px,
    transparent 10px 26px
  );
}

.sa-babak--jeda .sa-babak__tahun { color: var(--sa-abu-gelap); }
.sa-babak--jeda .sa-babak__teks { max-width: 42ch; }

/* ---------- BANGKIT — benang kembali, lebih tebal dari sebelumnya ---------- */
.sa-babak--bangkit { --_benang: calc(5px + (var(--_b) - 1) * 1.2px); }

.sa-babak--bangkit .sa-babak__inner::before { background: var(--sa-hitam); }

.sa-babak--bangkit .sa-babak__tahun {
  color: var(--sa-hitam);
  text-shadow: var(--sa-garis) calc(var(--sa-garis) * -1) 0 var(--sa-kuning);
}

/* ---------- KINI ---------- */
.sa-babak--kini { --_ruang: var(--sa-y-rapat); }
.sa-babak--kini .sa-babak__tahun { font-variation-settings: 'wdth' 125, 'wght' 800; }

/* ============================================================
   BAB 04 — KARAK KALIANG
   ============================================================ */

.sa-karak__angka {
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: .8;
  font-variation-settings: 'wdth' 62, 'wght' 700;
  color: var(--sa-fg-muted);
  margin: 0;
  max-width: none;
}

.sa-karak__rak {
  display: grid;
  gap: var(--sa-space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .sa-karak__rak { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .sa-karak__rak > :nth-child(2) { transform: translateY(var(--sa-modul)); }
}

/* ============================================================
   FASILITAS — dipakai di Tentang dan Hubungi
   Tanpa ikon. Nama fasilitas ditulis besar; itu sudah cukup.
   ============================================================ */

.sa-fasilitas {
  display: grid;
  gap: var(--sa-space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 700px)  { .sa-fasilitas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sa-fasilitas { grid-template-columns: repeat(3, 1fr); } }

.sa-fasilitas__item {
  padding-block-start: var(--sa-space-4);
  border-block-start: var(--sa-garis) solid var(--sa-line);
}

.sa-fasilitas__judul {
  font-size: var(--sa-fs-h3);
  font-variation-settings: 'wdth' 88, 'wght' 700;
  margin-bottom: var(--sa-space-2);
}

.sa-fasilitas__teks {
  color: var(--sa-fg-muted);
  font-size: var(--sa-fs-body-sm);
  max-width: 32ch;
  margin: 0;
}

/* ============================================================
   BAB 06 — ANGKA & MISI
   ============================================================ */

.sa-angka {
  display: grid;
  gap: var(--sa-space-7);
  list-style: none;
  margin: 0 0 var(--sa-space-9);
  padding: 0;
}

@media (min-width: 768px) {
  .sa-angka { grid-template-columns: repeat(3, 1fr); align-items: start; }
}

.sa-angka__nilai {
  display: flex;
  align-items: baseline;
  gap: var(--sa-space-3);
  font-size: clamp(3.5rem, 11vw, 8rem);
  line-height: .82;
  font-variation-settings: 'wdth' 118, 'wght' 800;
  letter-spacing: -.04em;
  margin: 0 0 var(--sa-space-4);
  max-width: none;
}

.sa-angka__label {
  font-size: var(--sa-fs-label);
  font-variation-settings: 'wdth' 70, 'wght' 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--sa-fg-muted);
}

.sa-angka__teks {
  color: var(--sa-fg-muted);
  font-size: var(--sa-fs-body-sm);
  max-width: 30ch;
  margin: 0;
}

.sa-misi {
  display: grid;
  gap: var(--sa-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sa-misi__item {
  padding-inline-start: var(--sa-space-6);
  position: relative;
  max-width: 46ch;
}

/* Penanda 60°, sudut yang sama dengan sisi segitiga logo. */
.sa-misi__item::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .55em;
  width: calc(var(--sa-space-4) * .58);
  height: var(--sa-space-4);
  background: var(--sa-cahaya);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.sa-prosa p { color: var(--sa-fg-muted); }

/* ============================================================
   BAB 07 — LANJUT
   ============================================================ */

.sa-lanjut__pilihan {
  display: grid;
  gap: var(--sa-space-6);
}

@media (min-width: 768px) {
  .sa-lanjut__pilihan { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
  .sa-lanjut__pilihan > :nth-child(2) { transform: translateY(var(--sa-modul)); }
}

/* ============================================================
   HUBUNGI
   ============================================================ */

.sa-tiba__judul {
  font-size: var(--sa-fs-mega);
  line-height: var(--sa-lh-mega);
  font-variation-settings: 'wdth' 108, 'wght' 800;
  margin-bottom: var(--sa-space-9);
}

.sa-tiba__bawah {
  display: grid;
  gap: var(--sa-space-6);
  max-width: 54ch;
}

@media (min-width: 900px) {
  .sa-tiba__bawah { margin-inline-start: calc(var(--sa-modul) * 2); }
}

/* ---------- Outlet ---------- */

.sa-outlet__daftar {
  display: grid;
  gap: var(--sa-space-9);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sa-outlet__item {
  display: grid;
  gap: var(--sa-space-5);
  padding-block-start: var(--sa-space-5);
  border-block-start: var(--sa-garis-tebal) solid var(--sa-line);
}

@media (min-width: 900px) {
  .sa-outlet__item {
    grid-template-columns: auto minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--sa-space-7);
    align-items: start;
  }
}

.sa-outlet__no {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: .8;
  font-variation-settings: 'wdth' 62, 'wght' 700;
  color: var(--sa-cahaya);
  margin: 0;
  max-width: none;
}

.sa-outlet__nama {
  font-size: var(--sa-fs-h3);
  font-variation-settings: 'wdth' 100, 'wght' 700;
}

.sa-outlet__alamat {
  font-style: normal;
  color: var(--sa-fg);
  max-width: 34ch;
  line-height: 1.5;
}

.sa-outlet__catatan {
  color: var(--sa-fg-muted);
  font-size: var(--sa-fs-body-sm);
  max-width: 34ch;
  margin: 0;
}

/* ---------- Peta ---------- */

.sa-peta {
  --_h: clamp(18px, 3vw, 34px);
  --_w: calc(var(--_h) * var(--sa-lari));
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sa-surface);
  clip-path: polygon(var(--_w) 0, 100% 0, 100% 100%, 0 100%, 0 var(--_h));
}

.sa-peta iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* Peta Google berwarna; dinetralkan agar tidak melawan empat warna merek. */
  filter: grayscale(1) contrast(1.06);
  transition: filter var(--sa-dur-ui) var(--sa-ease-out);
}

.sa-peta:hover iframe,
.sa-peta:focus-within iframe { filter: none; }

/* ---------- Singgah ---------- */

.sa-singgah__ed {
  display: grid;
  gap: var(--sa-space-8);
}

@media (min-width: 1100px) {
  .sa-singgah__ed { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: start; }
  .sa-singgah__ed .sa-fasilitas { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Saluran ---------- */

.sa-saluran__grid {
  display: grid;
  gap: var(--sa-space-6);
}

@media (min-width: 700px)  { .sa-saluran__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sa-saluran__grid { grid-template-columns: repeat(4, 1fr); } }

.sa-sosial {
  display: grid;
  gap: var(--sa-space-4);
  margin-block-start: var(--sa-space-7);
}

.sa-sosial__daftar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sa-space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sa-saluran__isi { max-width: var(--sa-measure); }

/* ============================================================
   IRAMA JUDUL HALAMAN
   .sa-head dibatasi 16ch untuk bab beranda. Di halaman panjang seperti ini
   judul jadi pecah lima baris dan descender saling tabrak, jadi ukurannya
   dilonggarkan khusus untuk Tentang dan Hubungi.
   ============================================================ */

.sa-tentang .sa-head,
.sa-hubung .sa-head { max-width: 22ch; }

.sa-tentang .sa-head h2,
.sa-hubung .sa-head h2 { line-height: .98; }

/* Penanda misi: segitiga 60°, sudut yang sama dengan sisi segitiga logo. */
.sa-misi__item { padding-inline-start: var(--sa-space-7); }

.sa-misi__item::before {
  inset-block-start: .42em;
  width: calc(var(--sa-space-5) * .58);
  height: var(--sa-space-5);
}