@import url("/theme.css");

/* Indonesian service destination; all colours come from the shared palette. */
#layanan,#demo,#proses,#faq,#diskusi,.id-portfolio-group{scroll-margin-top:6rem}
.id-hero{padding:4rem 0;background:radial-gradient(ellipse at 85% 25%,hsl(var(--t-primary) / .12),transparent 65%)}
.id-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:3rem;align-items:center}
.id-hero h1{font-size:clamp(2rem,4vw,3.5rem);line-height:1.17;margin:.7rem 0 1.5rem;overflow-wrap:break-word}
.id-hero .hero-lead{margin-bottom:1.7rem;max-width:60ch}
.id-hero-cta{max-width:100%;text-align:center;white-space:normal}
.id-note{color:hsl(var(--t-muted));font-size:.9rem;line-height:1.7;margin-top:1.5rem}
.id-workflow{padding:1.8rem;border:2px solid hsl(var(--t-border));background:hsl(var(--t-surface));box-shadow:7px 7px 0 hsl(var(--t-info));min-width:0}
.id-workflow h2{font-size:1.45rem;line-height:1.35;margin:.8rem 0 1.3rem}
.id-workflow ol{list-style:none;counter-reset:flow;display:grid;gap:.85rem}
.id-workflow li{counter-increment:flow;display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.15rem .5rem;padding:.8rem;border:1px solid hsl(var(--t-primary) / .4);background:hsl(var(--t-primary) / .06)}
.id-workflow li::before{content:"0" counter(flow);grid-row:1 / 3;font-family:var(--t-font-mono);color:hsl(var(--t-primary));font-weight:700}
.id-workflow span{grid-column:2;color:hsl(var(--t-muted));font-size:.88rem;line-height:1.5}
.id-list{padding-left:1.2rem;margin-top:1rem;color:hsl(var(--t-muted));display:grid;gap:.6rem;line-height:1.65}
.id-portfolio-nav{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.5rem 0 2.5rem}
.id-portfolio-nav a{padding:.7rem 1rem;border:1px solid hsl(var(--t-border));min-height:44px}
.id-portfolio-group+.id-portfolio-group{margin-top:3rem;padding-top:1.5rem;border-top:1px solid hsl(var(--t-border))}
.id-portfolio-group>h3{font-size:1.6rem;line-height:1.4;margin-bottom:.8rem}
.id-demo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem}
.id-demo{padding:0;overflow:hidden;min-width:0}
.id-demo>img{display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:contain;background:hsl(var(--t-bg-alt))}
.id-demo>div{padding:1.5rem}
.id-demo p{margin-bottom:1rem;line-height:1.7}
.id-demo h4{font-size:1.2rem;line-height:1.45;margin-bottom:.8rem}
.id-demo .id-project-kind{font-size:.8rem;line-height:1.5;margin-bottom:.7rem;font-family:var(--t-font-mono);color:hsl(var(--t-primary))}
.id-project-links{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.id-project-links a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:.2rem}
.id-steps{display:grid;gap:1.3rem;padding-left:1.5rem;line-height:1.8}
#diskusi .section-lead{margin:0 auto 1.6rem}
@media(max-width:980px){.id-hero-grid{grid-template-columns:1fr;gap:2.2rem}.id-workflow{max-width:44rem}}
@media(max-width:600px){.id-hero{padding:2.7rem 0}.id-hero-cta{width:100%;padding:.95rem .7rem}.id-workflow{padding:1.2rem}.id-demo-grid{grid-template-columns:1fr}.id-demo>div{padding:1.2rem}}