/* =======================
   LAYANAN PERSURATAN
======================= */
.svc-section{
  background:#ffffff;
  padding:72px 0 96px;
  border-top:1px solid rgba(0,0,0,.04);
}

.svc-shell{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

.svc-header{
  text-align:center;
  margin:0 0 40px;
}

.svc-eyebrow{
  margin:0 0 8px;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#ac2929;
}

.svc-title{
  margin:0 0 12px;
  font-size:clamp(26px,2.8vw,34px);
  font-weight:800;
  color:#141414;
}

.svc-subtitle{
  margin:0;
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
  font-size:15px;
  line-height:1.7;
  color:#4a4a4a;
}

.svc-actions{
  margin-top:20px;
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.svc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 28px;
  height:40px;
  border-radius:999px;
  border:none;
  background:#ac2929;
  color:#ffffff;
  font-size:13px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  box-shadow:0 14px 30px rgba(172,41,41,.4);
  transition:
    background-color 200ms cubic-bezier(.2,.8,.2,1),
    box-shadow 200ms cubic-bezier(.2,.8,.2,1),
    transform 180ms cubic-bezier(.22,.61,.36,1);
}

.svc-btn:hover{
  background:#911f1f;
  box-shadow:0 18px 40px rgba(172,41,41,.5);
  transform:translateY(-1px);
}

.svc-btn-ghost{
  background:#ffffff;
  color:#ac2929;
  box-shadow:0 0 0 1px rgba(172,41,41,.4);
}

.svc-btn-ghost:hover{
  background:#fff3f3;
  box-shadow:0 0 0 1px rgba(172,41,41,.5);
}

.svc-layout{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1.1fr);
  gap:40px;
  align-items:flex-start;
}

/* PRODUCTS GRID */
.svc-products{
  margin:40px 0 40px;
}

.svc-products-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.svc-product{
  border:none;
  padding:18px 18px 24px;
  border-radius:24px;
  background-image:
    linear-gradient(to top,
      rgba(255,255,255,.7) 0%,
      rgba(255,255,255,.5) 32%,
      rgba(255,255,255,.24) 60%,
      rgba(255,255,255,0) 100%
    ),
    linear-gradient(to top,
      rgba(0,0,0,.22),
      rgba(0,0,0,.22)
    ),
    var(--svc-photo);
  background-color: #f3f4f6; /* Warna abu-abu terang sebagai base jika gambar gagal load */
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  gap:6px;
  text-align:left;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(15,23,42,.25);
  min-height:260px;
  will-change:transform;
  transition:
    transform 160ms cubic-bezier(.22,.61,.36,1),
    box-shadow 180ms cubic-bezier(.22,.61,.36,1),
    background-color 160ms cubic-bezier(.22,.61,.36,1);
}

.svc-product:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 24px rgba(15,23,42,.35);
}

.svc-product-code{
  font-size:12px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#ac2929;
}

.svc-product-title{
  font-size:17px;
  font-weight:600;
  color:#111827;
}

.svc-product{
  text-decoration:none;
  color:inherit;
}

.svc-disclaimer{
  margin-top:12px;
}

.svc-disclaimer-inner{
  max-width:820px;
  margin:0 auto;
  padding:16px 18px 16px;
  border-radius:18px;
  background:rgba(252, 231, 230, 0.55);
  border:1px solid rgba(248, 113, 113, 0.3);
}

.svc-disclaimer-title{
  margin:0 0 6px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:700;
  color:#b91c1c;
}

.svc-disclaimer-list{
  margin:0;
  padding-left:20px;
  font-size:14px;
  line-height:1.6;
  color:#374151;
}

/* DETAIL PAGE */
.svc-detail{
  padding-top:56px;
}

.svc-detail-header{
  max-width:760px;
  margin:0 auto 40px;
  text-align:left;
}

.svc-detail-breadcrumb{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:10px;
  font-size:13px;
  color:#6b7280;
}

.svc-detail-breadcrumb-link{
  color:#4b5563;
  text-decoration:none;
  font-weight:500;
}

.svc-detail-breadcrumb-link:hover{
  text-decoration:underline;
}

.svc-detail-breadcrumb-current{
  color:#9ca3af;
}

.svc-detail-breadcrumb-sep{
  color:#d1d5db;
}

.svc-detail-title{
  margin:0 0 10px;
  font-size:clamp(26px,2.6vw,32px);
  font-weight:800;
  color:#111827;
}

.svc-detail-subtitle{
  margin:0 0 14px;
  font-size:15px;
  line-height:1.8;
  color:#4b5563;
}

.svc-detail-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:18px;
}

.svc-detail-chip{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  background:#f3f4f6;
  font-size:12px;
  color:#4b5563;
}

.svc-detail-layout{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
  gap:26px;
  align-items:flex-start;
}

.svc-detail-main{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.svc-panel{
  border-radius:22px;
  border:1px solid rgba(0,0,0,.04);
  background:#ffffff;
  box-shadow:0 18px 40px rgba(15,23,42,.04);
  padding:18px 18px 18px;
}

.svc-panel-title{
  margin:0 0 8px;
  font-size:16px;
  font-weight:700;
  color:#111827;
}

.svc-panel-text{
  margin:0 0 8px;
  font-size:14px;
  line-height:1.8;
  color:#4b5563;
}

.svc-panel-text:last-child{
  margin-bottom:0;
}

.svc-terms-list{
  margin:12px 0 0;
  padding-left:18px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.svc-term{
  font-size:14px;
  line-height:1.7;
  color:#374151;
}

.svc-steps-list{
  margin:10px 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.svc-step-row{
  display:flex;
  gap:10px;
}

.svc-step-pill{
  flex:0 0 26px;
  height:26px;
  border-radius:999px;
  background:#ac2929;
  color:#ffffff;
  font-size:13px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
}

.svc-step-body{
  flex:1;
}

.svc-step-row-title{
  margin:0 0 2px;
  font-size:14px;
  font-weight:600;
  color:#111827;
}

.svc-step-row-text{
  margin:0;
  font-size:13px;
  line-height:1.7;
  color:#4b5563;
}

.svc-detail-aside{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.svc-detail-aside-card{
  position:sticky;
  top:96px;
}

.svc-meta{
  margin:10px 0 0;
}

.svc-meta-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:6px 0;
  font-size:13px;
  border-bottom:1px dashed rgba(15,23,42,.06);
}

.svc-meta-row:last-child{
  border-bottom:none;
}

.svc-meta-row dt{
  color:#6b7280;
}

.svc-meta-row dd{
  margin:0;
  color:#111827;
  font-weight:500;
  text-align:right;
}

.svc-detail-links{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

@media (max-width: 900px){
  .svc-detail-layout{
    grid-template-columns:minmax(0,1fr);
  }

  .svc-detail-aside-card{
    position:static;
  }
}

@media (max-width: 640px){
  .svc-detail-header{
    margin-bottom:28px;
  }
}

/* TIMELINE */
.svc-timeline{
  position:relative;
  list-style:none;
  margin:0;
  padding:0;
}

.svc-timeline::before{
  content:"";
  position:absolute;
  left:18px;
  top:0;
  bottom:0;
  width:2px;
  background:rgba(0,0,0,.06);
}

.svc-step{
  position:relative;
  display:flex;
  gap:18px;
  padding:0 0 28px 40px;
}

.svc-step:last-child{
  padding-bottom:0;
}

.svc-step-marker{
  position:absolute;
  left:2px;
  top:2px;
  width:32px;
  height:32px;
  border-radius:999px;
  background:#ffffff;
  border:2px solid rgba(172,41,41,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}

.svc-step-number{
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#ac2929;
}

.svc-step-body{
  margin-left:18px;
}

.svc-step-title{
  margin:0 0 6px;
  font-size:17px;
  font-weight:700;
  color:#111827;
}

.svc-step-text{
  margin:0 0 8px;
  font-size:14px;
  line-height:1.7;
  color:#4b5563;
}

.svc-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#ac2929;
  text-decoration:none;
}

.svc-link::after{
  content:"↗";
  font-size:12px;
}

.svc-link:hover{
  text-decoration:underline;
}

/* ASIDE / RESOURCES */
.svc-aside{
  position:relative;
}

.svc-aside-card{
  border-radius:24px;
  border:1px solid rgba(0,0,0,.04);
  box-shadow:0 18px 40px rgba(15,23,42,.06);
  padding:24px 22px 24px;
  background:#ffffff;
}

.svc-aside-eyebrow{
  margin:0 0 6px;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#ac2929;
}

.svc-aside-title{
  margin:0 0 8px;
  font-size:18px;
  font-weight:800;
  color:#111827;
}

.svc-aside-text{
  margin:0 0 16px;
  font-size:14px;
  line-height:1.7;
  color:#4b5563;
}

.svc-resource-list{
  display:grid;
  gap:8px;
}

.svc-resource{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 10px 10px 0;
  border-radius:16px;
  text-decoration:none;
}

.svc-resource:hover{
  background:rgba(0,0,0,.02);
}

.svc-resource-bullet{
  flex:0 0 46px;
  height:32px;
  border-radius:999px;
  background:#111827;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#ffffff;
}

.svc-resource-body{
  flex:1;
}

.svc-resource-title{
  display:block;
  font-size:14px;
  font-weight:600;
  color:#111827;
  margin-bottom:2px;
}

.svc-resource-desc{
  display:block;
  font-size:13px;
  color:#6b7280;
}

@media (max-width: 900px){
  .svc-layout{
    grid-template-columns:minmax(0,1fr);
    gap:32px;
  }
}

@media (max-width: 640px){
  .svc-shell{
    padding:0 20px;
  }

  .svc-step{
    padding-left:36px;
  }

  .svc-step-marker{
    left:0;
  }

  .svc-timeline::before{
    left:16px;
  }
}