/* Public feature pages (/ai-gambar, /ai-video, /ai-suara, /ai-musik, /aplikasi-android).
   Built on landing-cinematic.css tokens (--lc-panel, --lc-border, --lc-muted, --lc-blue) so dark/light themes follow the home page. */

/* Feature pages carry the landing header/footer, so the generic public header and footer stay hidden (as on the home page). */
.public-feature-page>.public-topbar,.public-feature-page>.public-footer{display:none!important}

/* Feature titles on the home cards are links to these pages; keep them reading as titles. */
.lc-service h3 a{color:inherit;text-decoration:none}
.lc-service h3 a:hover,.lc-service h3 a:focus-visible{text-decoration:underline;text-underline-offset:3px}

.lc-crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:18px;font-size:13px;color:var(--lc-muted)}
.lc-crumbs a{color:var(--lc-muted);text-decoration:none}
.lc-crumbs a:hover,.lc-crumbs a:focus-visible{color:var(--lc-text);text-decoration:underline}

/* Hero: one focal point, the h1; the art sits beside it on wide screens and under it on phones. */
.lc-feature-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;padding-top:22px;padding-bottom:34px}
.lc-feature-hero h1{font-size:clamp(30px,3.6vw,48px);line-height:1.08;letter-spacing:-1.4px;margin:14px 0 14px;font-weight:760}
.lc-feature-lede{font-size:17px;line-height:1.55;color:var(--lc-muted);max-width:56ch;margin:0}
.lc-feature-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.lc-feature-actions .lc-button{min-height:46px}
.lc-feature-cost{margin:14px 0 0;font-size:13px;color:var(--lc-muted)}
.lc-feature-notice{margin:16px 0 0;padding:10px 12px;border:1px solid var(--lc-border);border-radius:8px;background:var(--lc-panel)}
.lc-feature-art{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;border:1px solid var(--lc-border);background:var(--lc-panel);display:grid;place-items:center}
.lc-feature-art img{width:100%;height:100%;object-fit:cover;display:block}
.lc-feature-art-caption{position:absolute;left:10px;bottom:10px;padding:4px 9px;border-radius:6px;background:#030c12cc;color:#eef3f8;font-size:12px}
.lc-feature-art-icon{width:96px;height:96px;border-radius:24px;display:grid;place-items:center}
.lc-feature-art-icon .lc-icon{width:44px;height:44px}

/* Uses: a short list, not a card grid of identical icons. */
.lc-feature-uses{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.lc-feature-uses article{padding:16px;border:1px solid var(--lc-border);border-radius:10px;background:var(--lc-panel)}
.lc-feature-uses h3{font-size:16px;margin:0 0 6px}
.lc-feature-uses p{margin:0;color:var(--lc-muted);font-size:14px}

/* Steps keep their real count (3 or 4) and order numbers. */
.lc-feature-steps{list-style:none;counter-reset:step;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.lc-feature-steps li{counter-increment:step;position:relative;padding-top:38px}
.lc-feature-steps li::before{content:counter(step);position:absolute;top:0;left:0;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;color:#fff;background:var(--lc-blue)}
.lc-feature-steps h3{font-size:16px;margin:0 0 6px}
.lc-feature-steps p{margin:0;color:var(--lc-muted);font-size:14px}

.lc-feature-facts{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;border-top:1px solid var(--lc-border)}
.lc-feature-facts div{padding:12px 0;border-bottom:1px solid var(--lc-border);display:flex;justify-content:space-between;gap:16px}
.lc-feature-facts dt{color:var(--lc-muted);font-size:14px}
.lc-feature-facts dd{margin:0;text-align:right;font-weight:600;font-size:14px}

.lc-feature-more{display:flex;flex-wrap:wrap;gap:10px}
.lc-feature-more a{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:6px 14px 6px 6px;border:1px solid var(--lc-border);border-radius:10px;background:var(--lc-panel);color:var(--lc-text);text-decoration:none;font-weight:600}
.lc-feature-more a:hover,.lc-feature-more a:focus-visible{border-color:var(--lc-blue)}
.lc-feature-more .lc-service-icon{width:36px;height:36px;border-radius:8px;display:grid;place-items:center}

@media(max-width:800px){
  .lc-feature-hero{grid-template-columns:1fr;gap:22px;padding-top:12px}
  .lc-feature-lede{font-size:16px}
  .lc-feature-actions .lc-button{flex:1 1 160px;justify-content:center}
}
@media(max-width:480px){
  .lc-feature-facts div{flex-direction:column;gap:2px}
  .lc-feature-facts dd{text-align:left}
}