/* =========================================================
   ASATURA — TENTANG KAMI (about.css)

   Gaya yang HANYA dipakai halaman /about.
   Dimuat setelah style.css dan layanan.css.
   Tidak mengatur navbar maupun footer.
   ========================================================= */

/* ---------- IDENTITAS WARNA HALAMAN ----------
   Halaman about adalah halaman brand, jadi aksennya memakai
   lime-dark milik ASATURA, bukan warna khas layanan tertentu. */
.page-about{
  --lp-accent-ink: var(--lime-dark);
  --lp-accent-soft:#eef7cb;
  --lp-pro:        var(--lime-dark);
  --ab-line:       #e7e0d6;
}

/* ---------------------------------------------------------
   TENTANG — paragraf profil
   --------------------------------------------------------- */
.ab-story p{
  font-size:15px;line-height:1.8;color:var(--ink-muted);
  margin:0 0 16px;max-width:70ch;
}
.ab-story p:last-child{margin-bottom:0;}

/* ---------------------------------------------------------
   VISI — pernyataan tunggal, dibuat menonjol
   --------------------------------------------------------- */
.ab-vision{
  margin:0 0 24px;
  background:var(--ink);color:#fff;
  border-radius:16px;
  padding:26px 24px;
  position:relative;overflow:hidden;
}
.ab-vision::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 88% 6%, rgba(205,235,74,.16), transparent 58%);
  pointer-events:none;
}
.ab-vision-label{
  display:inline-block;position:relative;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lime);margin-bottom:12px;
}
.ab-vision p{
  position:relative;margin:0;
  font-size:clamp(16px,3.4vw,19px);line-height:1.65;color:#fff;
  max-width:60ch;
}

/* ---------------------------------------------------------
   MISI — daftar bernomor
   --------------------------------------------------------- */
.ab-mission{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:16px;
  padding:22px 20px;
}
.ab-mission h3{
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lp-accent-ink);margin:0 0 14px;
}
.ab-mission ol{
  list-style:none;counter-reset:abmisi;margin:0;padding:0;
}
.ab-mission li{
  counter-increment:abmisi;
  position:relative;padding:12px 0 12px 38px;
  border-top:1px solid var(--ab-line);
  font-size:14px;line-height:1.65;color:var(--ink);
}
.ab-mission li:first-child{border-top:0;padding-top:0;}
.ab-mission li::before{
  content:counter(abmisi);
  position:absolute;left:0;top:11px;
  width:24px;height:24px;border-radius:50%;
  background:var(--lp-accent-soft);color:var(--lp-accent-ink);
  font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.ab-mission li:first-child::before{top:-1px;}

/* ---------------------------------------------------------
   LAYANAN — lima bidang
   --------------------------------------------------------- */
.ab-svc-grid{display:grid;grid-template-columns:1fr;gap:12px;}
.ab-svc{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:14px;
  padding:18px;
  display:flex;gap:14px;align-items:flex-start;
}
.ab-svc-ic{
  flex-shrink:0;width:40px;height:40px;border-radius:11px;
  background:var(--ink);color:var(--lime);
  display:flex;align-items:center;justify-content:center;
}
.ab-svc h3{font-size:15.5px;color:var(--ink);margin:0 0 5px;}
.ab-svc p{font-size:13px;line-height:1.65;color:var(--ink-muted);margin:0;}

/* ---------------------------------------------------------
   KOMITMEN — penutup
   --------------------------------------------------------- */
.ab-commit{
  background:var(--bg-alt);
  border-left:3px solid var(--lime);
  border-radius:0 14px 14px 0;
  padding:22px 22px;
}
.ab-commit p{
  font-size:15px;line-height:1.8;color:var(--ink-muted);margin:0 0 14px;max-width:68ch;
}
.ab-commit p:last-child{margin-bottom:0;}
.ab-commit-close{
  color:var(--ink) !important;font-weight:600;
  padding-top:14px;border-top:1px solid var(--ab-line);
}

/* ---------------------------------------------------------
   CATATAN PENUTUP
   --------------------------------------------------------- */
.ab-note{
  margin-top:20px;
  background:var(--bg-alt);
  border-left:3px solid var(--lp-accent-ink);
  border-radius:0 10px 10px 0;
  padding:16px 18px;
  font-size:13px;line-height:1.7;color:var(--ink);
}
.ab-note b{color:var(--ink);}

/* ---------------------------------------------------------
   KONTAK
   --------------------------------------------------------- */
.ab-contact{display:grid;grid-template-columns:1fr;gap:22px;align-items:start;}
.ab-contact-card{
  background:var(--ink);color:#fff;
  border-radius:16px;padding:24px 22px;
}
.ab-contact-card h3{font-size:19px;margin:0 0 8px;color:#fff;}
.ab-contact-card p{font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.72);margin:0 0 20px;}
.ab-contact-card .btn-lime{width:100%;justify-content:center;}
.ab-contact-list{list-style:none;margin:0;padding:0;}
.ab-contact-list li{
  display:flex;gap:14px;align-items:flex-start;
  padding:16px 0;border-top:1px solid var(--ab-line);
}
.ab-contact-list li:first-child{border-top:0;padding-top:0;}
.ab-contact-list .ic{color:var(--lp-accent-ink);flex-shrink:0;margin-top:2px;}
.ab-contact-list h4{
  font-size:11px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink-faint);margin:0 0 5px;font-weight:700;
}
.ab-contact-list p{font-size:14px;color:var(--ink);margin:0;line-height:1.6;}
.ab-contact-list a{color:var(--ink);text-decoration:none;}
.ab-contact-list a:hover{color:var(--lp-accent-ink);}

/* ---------------------------------------------------------
   TABLET & DESKTOP
   --------------------------------------------------------- */
@media(min-width:720px){
  .ab-svc-grid{grid-template-columns:repeat(2,1fr);}
  .ab-contact{grid-template-columns:1.15fr .85fr;gap:40px;}
  .ab-vision{padding:32px 30px;}
  .ab-mission{padding:26px 24px;}
  .ab-commit{padding:26px 28px;}
}
@media(min-width:1080px){
  .ab-svc-grid{grid-template-columns:repeat(3,1fr);}
  .ab-vision{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:start;}
  .ab-vision-label{margin-bottom:0;padding-top:5px;}
}