/* CSS khusus about.blade.php (resources/views/livewire/guest-page). Dimuat di <head> lewat partials/page-css. */
/* ══════════════════════════════════════════════════════
   TENTANG KAMI — tema terang (default) + dark mode lewat token ugs-site.css
   Hierarki: H1/H2 display kapital → label mono oranye → judul kartu Inter tebal → isi/tombol huruf biasa
══════════════════════════════════════════════════════ */
:where(.a-page, .a-page *) { font-family:var(--font-body); }
.a-page { background:var(--ugs-page); color:var(--ugs-fg); }
.a-container { max-width:1240px; margin:0 auto; padding:0 2rem; }
.a-section { padding:7rem 0; }
.a-section-surface { background:var(--ugs-surface); }

.a-label { display:block; font-family:'IBM Plex Mono', ui-monospace, Consolas, monospace; font-size:.72rem; font-weight:500; text-transform:uppercase; letter-spacing:.14em; color:var(--ugs-accent-text); margin-bottom:.75rem; }
.a-h2 { font-family:var(--font-display); font-size:var(--ugs-fs-h2); font-weight:800; text-transform:uppercase; line-height:.98; color:var(--ugs-fg); margin:0 0 1.25rem; text-wrap:balance; }
.a-h2 em, .a-hero-h1 em, .a-cta-h2 em { font-family:inherit; font-style:normal; font-weight:300; color:var(--ugs-fg-3); }
.a-body { font-size:1rem; line-height:1.75; color:var(--ugs-fg-2); margin:0; }
.a-sec-head { margin-bottom:3rem; }

/* Tombol */
.a-btn { display:inline-flex; align-items:center; gap:.5rem; font-weight:500; text-decoration:none; border-radius:100px; transition:all .22s ease; cursor:pointer; border:1.5px solid transparent; white-space:nowrap; font-size:.95rem; padding:.85rem 1.8rem; }
.a-btn-primary, .a-btn-white { background:var(--ugs-accent); color:#fff; border-color:var(--ugs-accent); }
.a-btn-primary:hover, .a-btn-white:hover { background:var(--ugs-accent-dark); border-color:var(--ugs-accent-dark); color:#fff; transform:translateY(-1px); }
.a-btn-ghost { background:transparent; color:var(--ugs-fg); border-color:var(--ugs-hairline-strong); }
.a-btn-ghost:hover { color:var(--ugs-fg); border-color:var(--ugs-fg); }

/* Muncul saat discroll */
.a-reveal { opacity:0; transform:translateY(22px); transition:opacity .85s cubic-bezier(0,0,.2,1), transform .85s cubic-bezier(0,0,.2,1); }
.a-reveal.visible { opacity:1; transform:none; }
.a-reveal:nth-child(2){ transition-delay:.1s; } .a-reveal:nth-child(3){ transition-delay:.18s; }

/* ── HERO: teks kiri, foto gedung di kanan sebagai kartu ── */
.a-hero { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:3.5rem; align-items:center;
    background:var(--ugs-studio); padding:calc(var(--ugs-nav-h) + 3.5rem) max(2rem, calc((100% - 1240px) / 2 + 2rem)) 4rem; }
.a-hero-scrim { display:none; }
.a-hero-body { order:1; }
.a-hero-pic { order:2; display:block; min-width:0; }
.a-hero-img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:62% 45%; border-radius:24px; box-shadow:0 30px 70px var(--ugs-shadow); }
.a-hero-h1 { font-family:var(--font-display); font-size:var(--ugs-fs-h1); font-weight:800; line-height:.9; text-transform:uppercase; color:var(--ugs-fg); margin:.5rem 0 1.25rem; }
.a-hero-sub { font-size:clamp(.95rem,1.4vw,1.05rem); color:var(--ugs-fg-2); line-height:1.7; max-width:560px; margin:0 0 2rem; }
.a-hero-cta { display:flex; gap:.75rem; flex-wrap:wrap; }

/* ── ANGKA ── */
.a-stats-row { display:grid; grid-template-columns:repeat(4,1fr); max-width:1240px; margin:0 auto; border-bottom:1px solid var(--ugs-hairline); }
.a-stat { display:flex; flex-direction:column; padding:2.6rem 2rem 2.4rem; border-left:1px solid var(--ugs-hairline); }
.a-stat:first-child { border-left:0; }
.a-stat-n { font-family:var(--font-display); font-size:clamp(2.6rem,5vw,4rem); font-weight:800; color:var(--ugs-fg); line-height:1; font-variant-numeric:tabular-nums; }
.a-stat-n span { font-family:inherit; color:var(--ugs-accent); }
.a-stat-l { font-size:.95rem; font-weight:500; color:var(--ugs-fg); margin-top:.6rem; }
.a-stat-sub { font-size:.82rem; color:var(--ugs-fg-3); margin-top:.15rem; }

/* ── VISI & MISI: peta Indonesia samar di belakang ── */
.a-vm { position:relative; overflow:hidden; padding:7rem 0; background:var(--ugs-surface); }
/* foto peta berlatar penuh hanya jadi pita belang di tema baru: disembunyikan */
.a-vm-bg { display:none; }
.a-vm-overlay { display:none; }
.a-vm-grid { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; align-items:stretch; }
.a-vm-divider { display:none; }
.a-vm-card { background:var(--ugs-card); border:1px solid var(--ugs-hairline); border-radius:24px; padding:2.25rem; }
.a-vm-icon { width:48px; height:48px; border-radius:13px; background:var(--ugs-accent-tint); display:flex; align-items:center; justify-content:center; font-size:1.15rem; color:var(--ugs-accent); margin-bottom:1.25rem; }
.a-vm-text { font-size:1.02rem; color:var(--ugs-fg-2); line-height:1.75; margin:0; }
.a-mission-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.75rem; }
.a-mission-list li { font-size:.95rem; color:var(--ugs-fg-2); line-height:1.65; padding-left:1.4rem; position:relative; }
.a-mission-list li::before { content:''; position:absolute; left:0; top:.6rem; width:6px; height:6px; border-radius:50%; background:var(--ugs-accent); }

/* ── KEUNGGULAN ── */
.a-creds-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.a-cred-card { background:var(--ugs-card); border:1px solid var(--ugs-hairline); border-radius:22px; padding:1.9rem 1.75rem; transition:transform .3s, box-shadow .3s; }
.a-cred-card:hover { transform:translateY(-3px); box-shadow:0 18px 40px var(--ugs-shadow); }
.a-cred-icon { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; margin-bottom:1.1rem; background:var(--ugs-accent-tint); color:var(--ugs-accent); }
.a-cred-head { display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; flex-wrap:wrap; }
.a-cred-title { font-family:var(--font-body); font-size:1.08rem; font-weight:600; letter-spacing:-.01em; color:var(--ugs-fg); margin:0; }
.a-cred-desc { font-size:.9rem; color:var(--ugs-fg-2); line-height:1.65; margin:0; }
.a-badge-yellow, .a-badge-green { font-size:.72rem; font-weight:500; padding:.2rem .6rem; border-radius:100px; white-space:nowrap; }
.a-badge-yellow { background:rgba(234,179,8,.12); color:#92660a; border:1px solid rgba(234,179,8,.35); }
.a-badge-green { background:rgba(22,163,74,.1); color:#15803d; border:1px solid rgba(22,163,74,.3); }
:root[data-ugs-theme="dark"] .a-badge-green { color:#4ade80; }
:root[data-ugs-theme="dark"] .a-badge-yellow { color:#facc15; }

/* ── AJAKAN ── */
.a-cta { padding:7rem 0; text-align:center; background:var(--ugs-page); border-top:1px solid var(--ugs-hairline); }
.a-cta-body { max-width:760px; }
.a-cta-h2 { font-family:var(--font-display); font-size:var(--ugs-fs-display-sm); font-weight:800; text-transform:uppercase; line-height:.95; color:var(--ugs-fg); margin:.5rem 0 1.25rem; }
.a-cta-sub { font-size:1rem; color:var(--ugs-fg-2); line-height:1.7; max-width:540px; margin:0 auto 2.25rem; }
.a-cta-btns { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }

/* ── RESPONSIF ── */
@media(max-width:991px){
    .a-hero { grid-template-columns:1fr; gap:2rem; }
    .a-hero-pic { order:0; }
    .a-hero-img { aspect-ratio:16/9; }
    .a-creds-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px){
    .a-section, .a-vm, .a-cta { padding:4.5rem 0; }
    .a-container { padding:0 1.25rem; }
    .a-hero { padding:calc(var(--ugs-nav-h) + 1.25rem) 1.25rem 3rem; }
    .a-hero-cta, .a-cta-btns { flex-direction:column; align-items:stretch; }
    .a-hero-cta .a-btn, .a-cta-btns .a-btn { justify-content:center; }
    .a-stats-row { grid-template-columns:repeat(2,1fr); }
    .a-stat { padding:1.8rem 1.25rem; }
    .a-stat:nth-child(3) { border-left:0; }
    .a-stat:nth-child(n+3) { border-top:1px solid var(--ugs-hairline); }
    .a-vm-grid { grid-template-columns:1fr; }
    .a-vm-card { padding:1.6rem; }
}
@media(max-width:576px){ .a-creds-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce){ .a-reveal { opacity:1; transform:none; transition:none; } }