/* Halaman "Tentang" (/about).
   Bundel terpisah dari theme.css: gaya di sini hanya dipakai satu halaman,
   jadi tidak perlu ikut terunduh di setiap kunjungan. Token warna, .container,
   .block, .block-soft, .section-head, dan .btn diambil dari theme.css.

   Halaman ini terang saja, sama seperti seluruh portal: theme.css tidak punya
   token mode gelap, jadi menambahkannya di satu halaman akan membuat navbar
   dan footer tetap terang sementara isinya gelap. */

/* Nada peta: empat langkah dari satu keluarga merah bata milik portal.
   Dipakai bersama oleh peta hero dan peta kecil di bento.

   Nada paling terang sengaja masih lebih gelap dari latar hero (#FBEEEE).
   Ramp yang lebih lembut dari ini membuat peta lenyap jadi bayangan samar,
   persis keluhan yang membuat siluet versi lama dibuang. */
:root{
  --wil-1:#E5B7B0;
  --wil-2:#D4968C;
  --wil-3:#BF7669;
  --wil-4:#A6564A;
}

/* ===== Peta administrasi 24 kabupaten/kota ===== */
/* Markup-nya dibangkitkan di macros/peta_sulsel.html dari geojson yang sama
   dengan peta sebaran beranda. Kelas .wil-c0..c3 adalah hasil pewarnaan graf,
   jadi dua daerah bersebelahan tidak pernah sewarna dan batasnya tetap
   terbaca tanpa perlu garis tebal. */
.peta-sulsel{display:block; width:100%; height:auto;}
/* non-scaling-stroke: garis batas tetap setebal 1,6 px baik di peta hero
   maupun di peta kecil bento, jadi daerah sempit seperti Pare-Pare tidak
   tertelan garisnya sendiri saat peta mengecil. */
.peta-sulsel .wil{
  stroke:var(--color-white); stroke-width:1.6; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.peta-sulsel .wil-c0{fill:var(--wil-1);}
.peta-sulsel .wil-c1{fill:var(--wil-2);}
.peta-sulsel .wil-c2{fill:var(--wil-3);}
.peta-sulsel .wil-c3{fill:var(--wil-4);}

/* ===== Hero: teks di kiri, peta di kanan ===== */
/* Sengaja TIDAK memakai kelas .hero: CKAN core (main.css) punya komponen
   .hero sendiri yang menyuntik garis 1px lewat ::after. Kelas sendiri =
   tidak ada yang perlu dinolkan. */
.about-hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 92%, var(--color-bg) 100%);
  padding:var(--space-6) 0 var(--space-5);
}
.about-hero-grid{
  display:grid; grid-template-columns:minmax(0,1fr) 340px;
  gap:var(--space-5); align-items:center;
}
.about-hero-teks{max-width:660px;}
.about-hero h1{
  font-size:clamp(28px, 4.4vw, 52px); font-weight:800; letter-spacing:-0.025em;
  margin-bottom:var(--space-2);
}
.about-hero h1 .accent{color:var(--color-primary);}
.about-lead{
  font-size:clamp(16px, 1.4vw, 18.5px); color:var(--color-text-muted);
  line-height:1.7; max-width:560px; margin:0;
}
.about-hero-aksi{margin-top:var(--space-3); display:flex; flex-wrap:wrap; gap:12px;}

/* Sulawesi Selatan bentuknya jangkung: 553 x 1167 satuan viewBox, atau sekitar
   1 banding 2,1. Menaruhnya dalam kolom selebar teks akan membuatnya terapung
   kecil di tengah laut kosong, jadi kolomnya sengaja sempit dan keterangannya
   diletakkan di samping, sejajar kaki peta, bukan di bawahnya. */
.about-peta{
  margin:0; display:grid; grid-template-columns:118px minmax(0,1fr);
  gap:var(--space-2); align-items:end;
}
.about-peta-svg{filter:drop-shadow(0 10px 20px rgba(122,16,16,.10));}
.about-peta-cap{padding:0 0 8px 14px; border-left:3px solid var(--color-primary);}
.about-peta-cap strong{
  display:block; font-family:'Poppins'; font-weight:700; font-size:16px;
  color:var(--color-fg); line-height:1.3;
}
.about-peta-cap span{
  display:block; margin-top:4px; font-size:12.5px; color:var(--color-text-muted);
  line-height:1.5;
}
/* Ke-24 daerah muncul berurutan sekali saat halaman dibuka: gerak yang
   menceritakan isi seksi ini, bahwa provinsi ini dirakit dari 24 daerah. */
.about-peta-svg .wil{
  opacity:0;
  animation:wilMuncul .5s ease forwards;
  animation-delay:calc(.32s + var(--i) * .022s);
}
@keyframes wilMuncul{ to{opacity:1;} }
@media (prefers-reduced-motion: reduce){
  .about-peta-svg .wil{animation:none; opacity:1;}
}

/* ===== Pita angka ===== */
/* Garis rambut, bukan kartu: beranda sudah memakai kartu statistik berikon,
   dan mengulang bentuk yang sama di sini hanya membuat dua halaman terasa
   satu template. */
.about-angka{padding:var(--space-2) 0 0;}
.angka-pita{
  display:grid; grid-template-columns:repeat(4, 1fr); margin:0;
  border-top:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border);
}
.angka-sel{padding:var(--space-3) var(--space-3); border-left:1px solid var(--color-border);}
.angka-sel:first-child{border-left:0; padding-left:0;}
.angka-num{
  font-family:'Poppins'; font-weight:700; font-size:clamp(26px,3vw,38px);
  color:var(--color-fg); line-height:1;
}
.angka-label{font-size:13.5px; color:var(--color-text-muted); margin:8px 0 0;}

/* ===== Dua kolom: narasi + panel rujukan hukum ===== */
.about-split{display:grid; grid-template-columns:1.35fr 1fr; gap:var(--space-5); align-items:start;}
.section-head h2 .accent{color:var(--color-primary);}
.about-prose h2{font-size:clamp(22px,2.6vw,30px); font-weight:700; margin-bottom:var(--space-3);}
.about-prose p{color:var(--color-text); line-height:1.8; margin:0 0 var(--space-2); max-width:62ch;}
.about-prose p:last-child{margin-bottom:0;}
.about-prose strong{color:var(--color-fg);}

.about-panel{
  background:var(--color-white); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); padding:var(--space-3); box-shadow:var(--shadow-sm);
  position:relative;
}
/* Pita merah di tepi kiri panel, pengganti judul, biar panel tetap ringkas. */
.about-panel::before{
  content:''; position:absolute; left:0; top:var(--space-3); bottom:var(--space-3);
  width:3px; border-radius:0 3px 3px 0; background:var(--color-primary);
}
.about-panel h3{font-size:16px; font-weight:700; margin-bottom:10px;}
.about-panel p{font-size:14.5px; color:var(--color-text-muted); line-height:1.7; margin:0;}
.about-panel-note{
  margin-top:var(--space-2); padding-top:var(--space-2);
  border-top:1px solid var(--color-border);
  font-size:13.5px; color:var(--color-text-muted);
}
.about-panel-note a{color:var(--color-primary); font-weight:600;}
.about-panel-note a:hover{text-decoration:underline;}

/* ===== Empat prinsip: baris redaksional ===== */
.prinsip{list-style:none; margin:0; padding:0;}
.prinsip-baris{
  position:relative;
  display:grid; grid-template-columns:84px minmax(0,240px) minmax(0,1fr);
  gap:var(--space-3); align-items:start;
  padding:var(--space-3) 0;
  border-top:1px solid var(--color-border);
}
.prinsip-baris:last-child{border-bottom:1px solid var(--color-border);}
/* Batang aksen menyelinap dari kiri saat baris disorot. Tanpa kotak kartu,
   inilah yang menandai baris mana yang sedang dibaca. */
.prinsip-baris::before{
  content:''; position:absolute; left:-14px; top:var(--space-3); bottom:var(--space-3);
  width:3px; border-radius:3px; background:var(--color-primary);
  transform:scaleY(0); transform-origin:top;
  transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.prinsip-baris:hover::before{transform:scaleY(1);}
.prinsip-idx{
  font-family:'Poppins'; font-weight:800; font-size:52px; line-height:.85;
  color:#E7BDBA;
}
@supports (-webkit-text-stroke: 1px red){
  .prinsip-idx{color:transparent; -webkit-text-stroke:1.6px #DCA49F;}
}
.prinsip-baris h3{font-size:18px; font-weight:700; margin:6px 0 0;}
.prinsip-baris p{font-size:15px; color:var(--color-text-muted); line-height:1.75; margin:6px 0 0;}

/* ===== Yang tersedia di portal: bento ===== */
/* Empat isi, empat sel, ukuran berbeda-beda. Versi sebelumnya memakai empat
   kartu seragam, bentuk yang juga dipakai tiga seksi lain di halaman ini. */
.fitur-bento{
  display:grid;
  grid-template-columns:262px minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-2);
  align-items:stretch;
}
.bento{
  background:var(--color-white); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); padding:var(--space-3);
  display:flex; flex-direction:column; gap:var(--space-2);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.bento:hover{box-shadow:var(--shadow-md);}
.bento h3{font-size:16.5px; font-weight:700; margin:0 0 6px;}
.bento p{font-size:14px; color:var(--color-text-muted); line-height:1.65; margin:0;}
.bento-teks{min-width:0;}

/* Sel ini satu-satunya yang bantalannya nol: petanya dibiarkan penuh sampai
   tepi kartu supaya terbaca sebagai gambar, bukan ikon yang mengambang. */
.bento-peta{
  grid-column:1; grid-row:1 / span 2;
  padding:0; gap:0; color:inherit; overflow:hidden;
}
.bento-peta:hover{border-color:var(--color-primary); transform:translateY(-3px);}
.bento-peta .bento-teks{display:flex; flex-direction:column; flex:1; padding:var(--space-3);}
/* Peta kecil dibuat satu nada, bukan empat seperti di hero: di sini ia penanda
   tempat, bukan gambar utama, dan tidak boleh bersaing dengan hero. */
.bento-peta-gambar{
  background:var(--color-bg-alt);
  border-bottom:1px solid var(--color-border);
  padding:var(--space-3) var(--space-2);
}
.bento-peta-svg{height:240px; width:auto; margin:0 auto;}
.bento-peta-svg .wil{fill:var(--wil-3); stroke-width:1.2;}
.bento-tautan{
  font-size:13.5px; font-weight:700; color:var(--color-primary);
  margin-top:auto; padding-top:var(--space-2);
}

.bento-format{grid-column:2; grid-row:1;}
.format-list{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px;}
.format-chip{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--color-bg-alt); border:1px solid var(--color-border);
  border-radius:999px; padding:6px 13px;
  font-size:12.5px; font-weight:700; letter-spacing:.02em; color:var(--color-fg);
}
.format-chip em{font-style:normal; font-weight:600; color:var(--color-text-muted);}
.bento-kosong{font-size:13.5px; color:var(--color-text-muted); margin:0;}

/* Satu-satunya sel bernada, penyeimbang supaya deret bento tidak jadi
   empat kotak putih berisi tulisan. */
.bento-grafik{
  grid-column:3; grid-row:1;
  background:linear-gradient(155deg, #F7DEDD 0%, var(--color-white) 72%);
}
.bento-ikon{
  width:42px; height:42px; border-radius:12px;
  background:var(--color-white); border:1px solid var(--color-border);
  color:var(--color-primary); display:flex; align-items:center; justify-content:center;
}
.bento-ikon svg{width:21px; height:21px;}

.bento-api{grid-column:2 / span 2; grid-row:2;}
.bento-kode{
  display:block; margin-top:auto;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12.5px; color:var(--color-primary-dark);
  background:var(--color-muted); border:1px solid var(--color-border);
  border-radius:var(--radius-md); padding:10px 12px;
  overflow-x:auto; white-space:nowrap;
}

/* Daftar topik memakai kategori nyata dari helper, bukan daftar tetap,
   supaya ikut berubah kalau kategori portal ditambah atau dikurangi. */
.about-topik{display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--space-4);}
.about-topik-chip{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--color-white); border:1px solid var(--color-border);
  border-radius:999px; padding:8px 16px; font-size:14px; font-weight:600;
  color:var(--color-text); transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.about-topik-chip:hover{border-color:var(--color-primary); background:var(--color-bg-alt); transform:translateY(-1px);}
.about-topik-chip em{font-style:normal; font-weight:700; color:var(--color-primary); font-size:12.5px;}

/* ===== Alur pemakaian ===== */
/* Satu garis menerus yang memudar ke kanan, dengan penanda belah ketupat di
   tiap langkah. Bentuknya sengaja beda dari daftar prinsip di atas: yang itu
   baris menurun, yang ini alur mendatar. */
.alur{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:0 var(--space-3);
  position:relative;
}
.alur::before{
  content:''; position:absolute; top:9px; left:0; right:0; height:1px;
  background:linear-gradient(90deg, var(--color-primary) 0%, rgba(190,26,26,.20) 100%);
}
.alur-langkah{position:relative; padding-top:var(--space-4);}
.alur-langkah::before{
  content:''; position:absolute; top:0; left:0; width:15px; height:15px;
  background:var(--color-white); border:2px solid var(--color-primary);
  border-radius:3px; transform:rotate(45deg);
}
.alur-langkah h3{font-size:16.5px; font-weight:700; margin:0;}
.alur-langkah p{font-size:14px; color:var(--color-text-muted); line-height:1.7; margin:8px 0 0;}
.alur-langkah strong{color:var(--color-fg);}

/* ===== Pengelola & kontak ===== */
.kontak-pita{
  background:var(--color-white); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  padding:var(--space-4);
}
.kontak-instansi{font-family:'Poppins'; font-weight:700; font-size:19px; color:var(--color-fg); line-height:1.35;}
.kontak-sub{font-size:14px; color:var(--color-text-muted); margin-top:6px;}
.kontak-list{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-3);
  margin:var(--space-3) 0 0; padding:var(--space-3) 0 0;
  border-top:1px solid var(--color-border);
}
.kontak-item dt{
  display:flex; align-items:center; gap:10px;
  font-size:13.5px; font-weight:700; color:var(--color-fg);
}
.kontak-item dd{margin:10px 0 0 46px; font-size:14.5px; color:var(--color-text); line-height:1.65;}
.kontak-item dd a{color:var(--color-primary); font-weight:600; word-break:break-word;}
.kontak-item dd a:hover{text-decoration:underline;}
.kontak-icon{
  flex:none; width:36px; height:36px; border-radius:10px;
  background:var(--color-bg-alt); color:var(--color-primary);
  display:flex; align-items:center; justify-content:center;
}
.kontak-icon svg{width:18px; height:18px;}
.kontak-aksi{
  margin:var(--space-3) 0 0; padding-top:var(--space-3);
  border-top:1px solid var(--color-border);
  display:flex; flex-wrap:wrap; gap:10px;
}

/* ===== Responsif ===== */
@media (max-width: 1080px){
  .fitur-bento{grid-template-columns:236px minmax(0,1fr) minmax(0,1fr);}
}
@media (max-width: 980px){
  .about-hero-grid{grid-template-columns:1fr; gap:var(--space-4);}
  .about-hero-teks{max-width:none;}
  /* Peta turun ke bawah teks. Tanpa batas lebar, kolom hero yang kini selebar
     halaman akan meregangkannya jadi setinggi dua layar. */
  .about-peta{max-width:320px;}

  .about-split{grid-template-columns:1fr;}

  .fitur-bento{grid-template-columns:repeat(2, minmax(0,1fr));}
  .bento-peta{grid-column:1; grid-row:1 / span 2;}
  .bento-format{grid-column:2; grid-row:1;}
  .bento-grafik{grid-column:2; grid-row:2;}
  .bento-api{grid-column:1 / span 2; grid-row:3;}
  .bento-peta-svg{height:210px;}

  .alur{grid-template-columns:repeat(2, 1fr); gap:var(--space-4) var(--space-3);}
  /* Dua baris berarti garis menerus tidak lagi masuk akal: penanda tiap
     langkah membawa potongan garisnya sendiri. */
  .alur::before{display:none;}
  .alur-langkah::after{
    content:''; position:absolute; top:9px; left:26px; right:0; height:1px;
    background:rgba(190,26,26,.20);
  }

  .kontak-list{grid-template-columns:1fr; gap:var(--space-2);}
}
@media (max-width: 640px){
  .about-hero{padding:var(--space-5) 0 var(--space-4);}
  .angka-pita{grid-template-columns:repeat(2, 1fr);}
  .angka-sel{padding:var(--space-2) var(--space-2);}
  /* Tanpa ini, sel di kolom kiri baris kedua tetap membawa garis kirinya. */
  .angka-sel:nth-child(odd){border-left:0; padding-left:0;}
  .angka-sel:nth-child(n+3){border-top:1px solid var(--color-border);}

  /* Judul dan isi kini bertumpuk di kolom yang sama, jadi jarak antarbaris
     grid harus dikecilkan; kalau tidak keduanya terbaca sebagai dua blok. */
  .prinsip-baris{grid-template-columns:56px minmax(0,1fr); gap:2px var(--space-2);}
  .prinsip-idx{font-size:38px;}
  .prinsip-baris h3{grid-column:2; margin-top:0;}
  .prinsip-baris p{grid-column:2; margin-top:4px;}
  .prinsip-baris::before{left:-10px;}

  /* Di layar sempit peta tidak boleh setinggi separuh hero. */
  .about-peta{max-width:280px;}

  .fitur-bento{grid-template-columns:1fr;}
  .bento-peta, .bento-format, .bento-grafik, .bento-api{grid-column:1; grid-row:auto;}
  .bento-peta-svg{height:220px;}

  .alur{grid-template-columns:1fr; gap:var(--space-3);}

  .kontak-pita{padding:var(--space-3);}
  .kontak-item dd{margin-left:0;}
}