/* ═══════════════════════════════════════════════════════════
   about-tentang.css — LiGaMu Tentang Kami
   v2.12.1.5.18_8_2
   Scoped: .aboutx-* agar aman walau CSS dimuat global.
═══════════════════════════════════════════════════════════ */

.aboutx-page {
  --ax-ink:#123f34;
  --ax-muted:#60746c;
  --ax-soft:#f7f4ec;
  --ax-paper:#fffdf8;
  --ax-line:rgba(18,63,52,.10);
  --ax-brand:#006850;
  --ax-gold:#c69a45;
  color:var(--ax-ink);
  background:linear-gradient(180deg,#fffdf8 0%,#faf7ef 45%,#fffdf8 100%);
}
.aboutx-page * { box-sizing:border-box; }
.aboutx-page a { text-decoration:none; }
.aboutx-page img { display:block; max-width:100%; }
.aboutx-page h1,
.aboutx-page h2,
.aboutx-page h3 { color:var(--ax-ink); letter-spacing:-.035em; }
.aboutx-page h1,
.aboutx-page h2 { font-family:var(--font-serif,'Lora',serif); }
.aboutx-page h1 { font-size:clamp(2.4rem,5.7vw,4.45rem); line-height:1; margin:0 0 18px; max-width:840px; }
.aboutx-page h2 { font-size:clamp(1.7rem,3.2vw,2.65rem); line-height:1.12; margin:0 0 12px; }
.aboutx-page p { color:var(--ax-muted); line-height:1.75; margin:0; }
.aboutx-kicker {
  display:inline-flex; align-items:center; gap:7px; width:max-content; max-width:100%;
  padding:6px 11px; border-radius:999px; margin-bottom:14px;
  background:rgba(0,104,80,.08); color:var(--ax-brand);
  font-size:.72rem; font-weight:800; letter-spacing:.01em;
}
.aboutx-kicker i { font-size:14px; }
.aboutx-section { padding:clamp(42px,6vw,78px) 0; }
.aboutx-section + .aboutx-section { border-top:1px solid rgba(18,63,52,.055); }
.aboutx-section-head { max-width:780px; margin-bottom:24px; }
.aboutx-section-head p { max-width:660px; font-size:.94rem; }
.aboutx-head-row { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; max-width:none; }

/* Hero */
.aboutx-hero {
  position:relative; overflow:hidden; padding:clamp(38px,5.8vw,76px) 0 54px;
  background:
    radial-gradient(circle at 84% 16%, rgba(0,104,80,.14), transparent 32%),
    radial-gradient(circle at 10% 95%, rgba(198,154,69,.18), transparent 30%),
    linear-gradient(135deg,#fffdf8 0%,#f8f3e8 52%,#eaf7f0 100%);
  border-bottom:1px solid var(--ax-line);
}
.aboutx-hero-grid { display:grid; grid-template-columns:minmax(0,1.2fr) 390px; gap:clamp(26px,5vw,70px); align-items:center; }
.aboutx-hero-copy p { max-width:760px; font-size:1rem; }
.aboutx-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.aboutx-hero-card {
  padding:18px; border-radius:30px; background:rgba(255,253,248,.80);
  border:1px solid rgba(18,63,52,.10); box-shadow:0 26px 70px rgba(20,53,42,.14);
  backdrop-filter:blur(12px);
}
.aboutx-hero-card-top {
  padding:22px; min-height:156px; border-radius:20px;
  background:linear-gradient(145deg,#0f4a3d,#0b352d); color:#fff;
  display:flex; flex-direction:column; justify-content:flex-end; gap:6px; position:relative; overflow:hidden;
}
.aboutx-hero-card-top:after { content:""; position:absolute; right:-62px; top:-78px; width:190px; height:190px; border-radius:50%; background:rgba(198,154,69,.28); }
.aboutx-hero-card-top span { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; background:rgba(255,255,255,.12); position:relative; z-index:1; }
.aboutx-hero-card-top strong,
.aboutx-hero-card-top small { position:relative; z-index:1; }
.aboutx-hero-card-top strong { font-size:1.03rem; }
.aboutx-hero-card-top small { color:rgba(255,255,255,.72); line-height:1.45; }
.aboutx-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.aboutx-stat-grid a { padding:15px; border-radius:16px; background:#fff; border:1px solid rgba(18,63,52,.08); display:flex; flex-direction:column; gap:2px; }
.aboutx-stat-grid strong { color:var(--ax-ink); font-size:1.35rem; line-height:1; }
.aboutx-stat-grid span { color:var(--ax-muted); font-size:.75rem; }

/* split / profile */
.aboutx-story-section { background:#fffdf8; }
.aboutx-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.86fr); gap:clamp(24px,5vw,56px); align-items:center; }
.aboutx-main-photo,
.aboutx-copy-card,
.aboutx-service-card,
.aboutx-facility-card,
.aboutx-media-card,
.aboutx-video-card,
.aboutx-feature-card,
.aboutx-close-card {
  border:1px solid rgba(18,63,52,.09); box-shadow:0 16px 44px rgba(33,55,45,.07);
}
.aboutx-main-photo { border-radius:28px; overflow:hidden; background:#e8eee7; min-height:320px; }
.aboutx-main-photo img { width:100%; height:100%; min-height:320px; object-fit:cover; }
.aboutx-copy-card { padding:clamp(24px,4vw,38px); border-radius:28px; background:#fff; }
.aboutx-info-list { display:grid; gap:10px; margin-top:20px; }
.aboutx-info-list span { display:flex; align-items:center; gap:8px; color:#315d50; font-weight:650; font-size:.88rem; }
.aboutx-info-list i { color:var(--ax-brand); }

/* services */
.aboutx-service-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.aboutx-service-card {
  min-height:168px; padding:20px; border-radius:20px; background:#fff; display:flex; flex-direction:column; gap:8px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.aboutx-service-card:hover,
.aboutx-feature-card:hover { transform:translateY(-3px); border-color:rgba(0,104,80,.28); box-shadow:0 20px 46px rgba(33,55,45,.11); }
.aboutx-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; background:rgba(0,104,80,.09); color:var(--ax-brand); flex:0 0 auto; }
.aboutx-icon i { font-size:20px; }
.aboutx-service-card strong,
.aboutx-facility-card strong,
.aboutx-feature-card strong { color:var(--ax-ink); font-size:.96rem; }
.aboutx-service-card small,
.aboutx-feature-card small { color:var(--ax-muted); line-height:1.55; }
.aboutx-service-card em { margin-top:auto; color:#1b6c89; font-style:normal; font-size:.73rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

/* facility */
.aboutx-soft { background:linear-gradient(180deg,#f7f4ec 0%,#edf8f2 100%); }
.aboutx-facility-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(24px,4.2vw,54px); align-items:start; }
.aboutx-photo-stack { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.aboutx-photo-card { margin:0; border-radius:22px; overflow:hidden; background:#fff; border:1px solid rgba(18,63,52,.09); box-shadow:0 16px 38px rgba(33,55,45,.08); position:relative; }
.aboutx-photo-card-1 { grid-column:1 / -1; }
.aboutx-photo-card img { width:100%; aspect-ratio:16/10; object-fit:cover; }
.aboutx-photo-card figcaption { position:absolute; left:12px; right:12px; bottom:12px; padding:12px 14px; border-radius:15px; background:rgba(255,253,248,.88); backdrop-filter:blur(10px); display:flex; flex-direction:column; gap:2px; }
.aboutx-photo-card figcaption strong { color:var(--ax-ink); font-size:.86rem; }
.aboutx-photo-card figcaption span { color:var(--ax-muted); font-size:.72rem; }
.aboutx-facility-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.aboutx-facility-card { padding:20px; border-radius:20px; background:#fffdf8; display:flex; flex-direction:column; gap:9px; min-height:154px; }
.aboutx-facility-card p { font-size:.84rem; line-height:1.6; }

/* gallery */
.aboutx-gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.aboutx-media-card,
.aboutx-video-card { position:relative; display:block; overflow:hidden; border-radius:22px; background:#eef3ed; min-height:190px; }
.aboutx-media-card img,
.aboutx-video-card img { width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .28s ease; }
.aboutx-media-card:hover img,
.aboutx-video-card:hover img { transform:scale(1.035); }
.aboutx-media-card:after,
.aboutx-video-card:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.58)); pointer-events:none; }
.aboutx-media-caption { position:absolute; z-index:2; left:14px; right:14px; bottom:14px; display:flex; flex-direction:column; gap:2px; }
.aboutx-media-caption strong { color:#fff; font-size:.92rem; text-shadow:0 2px 12px rgba(0,0,0,.25); }
.aboutx-media-caption span { color:rgba(255,255,255,.78); font-size:.76rem; }
.aboutx-video-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:18px; }
.aboutx-play { position:absolute; z-index:3; left:18px; top:18px; width:46px; height:46px; display:grid; place-items:center; border-radius:999px; background:rgba(255,253,248,.92); color:var(--ax-brand); box-shadow:0 10px 26px rgba(0,0,0,.16); }
.aboutx-video-card-empty .aboutx-play { color:#8a6b2e; }

/* ligamu */
.aboutx-ligamu { background:linear-gradient(135deg,#fffdf8 0%,#f4f7ee 54%,#e9f6f0 100%); }
.aboutx-ligamu-grid { display:grid; grid-template-columns:.88fr 1.12fr; gap:clamp(24px,5vw,60px); align-items:center; }
.aboutx-ligamu-panel { padding:clamp(26px,4vw,42px); border-radius:30px; background:linear-gradient(145deg,#0f4a3d,#082d26); color:#fff; box-shadow:0 24px 70px rgba(14,54,43,.18); position:relative; overflow:hidden; }
.aboutx-ligamu-panel:after { content:""; position:absolute; right:-70px; top:-80px; width:220px; height:220px; border-radius:50%; background:rgba(198,154,69,.24); }
.aboutx-ligamu-panel > * { position:relative; z-index:1; }
.aboutx-ligamu-panel h2 { color:#fff; }
.aboutx-ligamu-panel p { color:rgba(255,255,255,.76); }
.aboutx-ligamu-panel .aboutx-kicker { background:rgba(255,255,255,.10); color:#e8d3a3; }
.aboutx-ligamu-panel blockquote { margin:22px 0 0; padding:16px 18px; border-left:3px solid var(--ax-gold); border-radius:0 14px 14px 0; background:rgba(255,255,255,.08); color:#fff; font-family:var(--font-serif,'Lora',serif); font-style:italic; }
.aboutx-ligamu-panel .btn-outline { border-color:rgba(255,255,255,.30); color:#fff; }
.aboutx-ligamu-panel .btn-outline:hover { background:rgba(255,255,255,.10); }
.aboutx-feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.aboutx-feature-card { padding:18px; border-radius:20px; background:#fff; display:grid; grid-template-columns:42px 1fr; column-gap:14px; row-gap:4px; align-items:start; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.aboutx-feature-card .aboutx-icon { grid-row:1 / span 2; }
.aboutx-feature-card strong { align-self:end; }
.aboutx-feature-card small { font-size:.8rem; }

/* close */
.aboutx-close-section { padding-top:34px; }
.aboutx-close-card { display:grid; grid-template-columns:1.2fr .8fr; gap:26px; align-items:center; padding:clamp(24px,4vw,38px); border-radius:28px; background:linear-gradient(135deg,#fffaf0,#edf8f2); }
.aboutx-close-card ul { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.aboutx-close-card li { display:flex; align-items:center; gap:9px; padding:10px 13px; border-radius:999px; background:rgba(255,255,255,.76); color:#315d50; font-weight:650; font-size:.86rem; }
.aboutx-close-card li i { color:var(--ax-brand); }

/* Responsive */
@media (max-width: 1024px) {
  .aboutx-hero-grid,
  .aboutx-split,
  .aboutx-facility-layout,
  .aboutx-ligamu-grid,
  .aboutx-close-card { grid-template-columns:1fr; }
  .aboutx-hero-card { max-width:560px; }
  .aboutx-service-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 780px) {
  .aboutx-page h1 { font-size:clamp(2.1rem,12vw,3.1rem); }
  .aboutx-section { padding:42px 0; }
  .aboutx-hero { padding-top:30px; }
  .aboutx-service-grid,
  .aboutx-gallery-grid,
  .aboutx-video-grid { grid-template-columns:1fr 1fr; }
  .aboutx-facility-grid,
  .aboutx-feature-grid { grid-template-columns:1fr; }
  .aboutx-photo-stack { grid-template-columns:1fr; }
  .aboutx-stat-grid { grid-template-columns:1fr 1fr; }
  .aboutx-main-photo img { min-height:240px; }
}
@media (max-width: 520px) {
  .aboutx-hero-card { padding:12px; border-radius:22px; }
  .aboutx-hero-card-top { min-height:136px; padding:18px; }
  .aboutx-service-grid,
  .aboutx-gallery-grid,
  .aboutx-video-grid { grid-template-columns:1fr; }
  .aboutx-stat-grid { grid-template-columns:1fr; }
  .aboutx-close-card li { border-radius:14px; }
}