#apnLayanan .lyn,
#apnLayanan .lyn *,
#apnLayanan .lyn *::before,
#apnLayanan .lyn *::after{box-sizing:border-box}

#apnLayanan .lyn{
  --navy:#0B2A55;
  --navy-deep:#081D3D;
  --navy-mid:#123B73;
  --blue:#1E63B5;
  --blue-soft:#4D9AE0;

  --gold:#B5842C;
  --gold-light:#D9AD5E;
  --gold-deep:#8C651F;
  --cta-text:#ffffff;
  --gold-accent:#E0B565;

  --ink:#0F2036;
  --muted:#5C6E88;
  --line:#E1E6EF;
  --mist:#F4F6FA;

  --font-head:'ABC Favorit Trial','Space Grotesk','Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  font-family:var(--font-body);
  color:var(--ink);
  background:#fff;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

#apnLayanan .lyn :where(p){margin:0 0 16px; padding:0; font-family:var(--font-body); font-weight:400; line-height:1.65; color:var(--muted); font-size:15.5px}
#apnLayanan .lyn :where(p:last-child){margin-bottom:0}
#apnLayanan .lyn :where(h1,h2,h3,h4){margin:0; padding:0; font-family:var(--font-head); font-weight:600; letter-spacing:-.02em; line-height:1.1; color:var(--navy)}
#apnLayanan .lyn :where(img){max-width:100%; height:auto; display:block}
#apnLayanan .lyn :where(a){color:inherit; text-decoration:none}
#apnLayanan .lyn :where(ul,ol,li){margin:0; padding:0; list-style:none}
#apnLayanan .lyn :where(button){-webkit-appearance:none; appearance:none; margin:0; padding:0; font:inherit; font-family:var(--font-body); color:inherit; background:none; border:0}

#apnLayanan .lyn-wrap{max-width:1480px; margin:0 auto; padding-left:24px; padding-right:24px}
#apnLayanan .lyn-sec{padding:clamp(40px,7vw,96px) 0}

#apnLayanan .lyn-rv{
  opacity:0; transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.16,.8,.28,1), transform .7s cubic-bezier(.16,.8,.28,1);
}
#apnLayanan .lyn-rv.is-in{opacity:1; transform:translateY(0)}

#apnLayanan .lyn-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin-bottom:16px;
}
#apnLayanan .lyn-eyebrow::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 12px 2px rgba(181,132,44,.25)}
#apnLayanan .lyn-eyebrow--light{color:var(--gold-accent)}
#apnLayanan .lyn-eyebrow--light::before{background:var(--gold-accent)}

#apnLayanan .lyn-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 28px; border-radius:100px;
  font-family:var(--font-body); font-size:13.5px; font-weight:700; letter-spacing:.01em; text-decoration:none;
  background:var(--gold);
  color:var(--cta-text);
  box-shadow:0 0 0 0 rgba(181,132,44,0);
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
  white-space:nowrap;
}
#apnLayanan .lyn-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 30px -6px rgba(181,132,44,.45);
}
#apnLayanan .lyn-btn svg{width:14px; height:14px; flex:none; transition:transform .3s ease}
#apnLayanan .lyn-btn:hover svg{transform:translateX(4px) rotate(-45deg)}

#apnLayanan .lyn-hero{
  position:relative; overflow:hidden;
  min-height:clamp(220px,32vw,320px);
  display:flex; align-items:center;
  background:
    linear-gradient(100deg, rgba(8,29,61,.84) 0%, rgba(11,42,85,.64) 55%, rgba(18,59,115,.46) 100%),
    url('https://asriprimanusantara.com/wp-content/uploads/2026/09/breadcrumb-image-apn.webp') center/cover no-repeat,
    var(--navy-deep);
}
#apnLayanan .lyn-hero__inner{position:relative; z-index:1; width:100%}
#apnLayanan .lyn-hero h1{
  color:#fff; text-align:left;
  font-size:clamp(1.9rem,4.2vw,50px); line-height:1.15;
}

#apnLayanan .lyn-head{padding-bottom:clamp(24px,4vw,40px)}
#apnLayanan .lyn-head h1{
  font-size:clamp(1.9rem,3.8vw,46px); line-height:1.12; max-width:26ch;
}

#apnLayanan .lyn-svc__list{border-top:1px solid var(--line)}

#apnLayanan .lyn-svc__item{border-bottom:1px solid var(--line)}
#apnLayanan .lyn-svc__head{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:clamp(24px,3.4vw,38px) 0;
  cursor:pointer; text-align:left;
}
#apnLayanan .lyn-svc__head-left{display:flex; align-items:baseline; gap:clamp(16px,3vw,32px); min-width:0}
#apnLayanan .lyn-svc__num{
  flex:0 0 auto; font-family:var(--font-body); font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--gold-deep);
}
#apnLayanan .lyn-svc__title{
  font-family:var(--font-head); font-weight:600; font-size:clamp(22px,3vw,36px); line-height:1.15; color:var(--navy); transition:color .3s ease;
}
#apnLayanan .lyn-svc__toggle{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center; position:relative;
  transition:background .3s ease, border-color .3s ease;
}
#apnLayanan .lyn-svc__toggle::before,
#apnLayanan .lyn-svc__toggle::after{
  content:""; position:absolute; background:var(--navy); transition:background .3s ease, transform .3s ease;
}
#apnLayanan .lyn-svc__toggle::before{width:14px; height:1.6px}
#apnLayanan .lyn-svc__toggle::after{width:1.6px; height:14px}
#apnLayanan .lyn-svc__item.is-open .lyn-svc__toggle::after{transform:scaleY(0)}
#apnLayanan .lyn-svc__item.is-open .lyn-svc__toggle{background:var(--gold); border-color:var(--gold)}
#apnLayanan .lyn-svc__item.is-open .lyn-svc__toggle::before,
#apnLayanan .lyn-svc__item.is-open .lyn-svc__toggle::after{background:#fff}
#apnLayanan .lyn-svc__item.is-open .lyn-svc__title{color:var(--blue)}

#apnLayanan .lyn-svc__panel{
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .55s cubic-bezier(.4,0,.12,1), opacity .4s ease, padding-bottom .4s ease;
}
#apnLayanan .lyn-svc__item.is-open .lyn-svc__panel{max-height:1400px; opacity:1; padding-top:4px; padding-bottom:clamp(28px,4vw,44px)}

#apnLayanan .lyn-svc__body{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,56px);
  padding-left:calc(64px + clamp(16px,3vw,32px));
  padding-top:clamp(20px,3vw,32px);
}
#apnLayanan .lyn-svc__body p{max-width:52ch}
#apnLayanan .lyn-svc__body p + p{margin-top:14px}

#apnLayanan .lyn-svc__list-title{
  font-family:var(--font-body); font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--navy); margin-bottom:16px; display:block;
}
#apnLayanan .lyn-svc__tags{display:flex; flex-wrap:wrap; gap:10px}
#apnLayanan .lyn-svc__tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:100px; border:1px solid var(--line);
  background:var(--mist); font-family:var(--font-body); font-size:13.5px; color:var(--ink);
}
#apnLayanan .lyn-svc__tag::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); flex:none;
}

@media (max-width:860px){
  #apnLayanan .lyn-svc__body{grid-template-columns:1fr; padding-left:0}
  #apnLayanan .lyn-svc__head-left{gap:14px}
}
@media (max-width:560px){
  #apnLayanan .lyn-svc__num{display:none}
}

#apnLayanan .lyn-cta{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg, var(--navy-mid) 0%, var(--navy) 50%, var(--navy-deep) 100%);
  padding-top:clamp(48px,8vw,116px); padding-bottom:clamp(48px,8vw,116px);
}
#apnLayanan .lyn-cta::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:640px; height:640px; left:50%; top:-360px; transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(181,132,44,.18), rgba(181,132,44,0) 68%);
}
#apnLayanan .lyn-cta .lyn-wrap{position:relative; z-index:1}
#apnLayanan .lyn-cta__grid{
  max-width:760px; margin:0 auto; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
#apnLayanan .lyn-cta .lyn-eyebrow{justify-content:center}
#apnLayanan .lyn-cta .lyn-eyebrow::before{display:none}
#apnLayanan .lyn-cta h2{
  color:#fff; margin-bottom:16px;
  font-family:var(--font-head); font-weight:600; font-size:clamp(1.7rem,3.4vw,40px); line-height:1.2; max-width:22ch;
}
#apnLayanan .lyn-cta p{max-width:56ch; color:rgba(255,255,255,.72)}
#apnLayanan .lyn-cta__btn{margin-top:24px}

@media (prefers-reduced-motion:reduce){
  #apnLayanan .lyn *{transition-duration:.01ms !important}
  #apnLayanan .lyn-rv{opacity:1 !important; transform:none !important}
}