/* ==========================================================================
   Halaman jasa (jasa-pembuatan-website, jasa-pembuatan-aplikasi-android,
   aplikasi-kasir, jasa-pembuatan-website-jakarta-selatan) + kotak "layanan
   terkait" di halaman artikel blog. Memakai token warna dari css/v3.css.
   ========================================================================== */
body.v3 .jz-hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
body.v3 .jz-sec{ padding: clamp(64px, 9vw, 112px) 0; }
body.v3 .jz-sec.jz-tint{ background: var(--bg-alt); }
body.v3 .jz-head{ max-width: 720px; margin-bottom: 40px; }
body.v3 .jz-head h2{ font-size: clamp(30px, 4vw, 44px); line-height: 1.1; letter-spacing: -.02em; margin: 10px 0 0; color: var(--ink); }
body.v3 .jz-head p{ margin-top: 14px; color: var(--ink-soft); font-size: 17px; line-height: 1.7; }

/* feature grid */
body.v3 .jz-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
body.v3 .jz-card{ background:#fff; border:1px solid var(--line); border-radius: 20px; padding: 26px 24px; box-shadow: var(--shadow-card); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
body.v3 .jz-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lift); }
body.v3 .jz-card .jz-ico{ width:44px; height:44px; border-radius: 12px; display:grid; place-items:center; background: var(--accent-soft); color: var(--accent); margin-bottom: 16px; }
body.v3 .jz-card .jz-ico svg{ width:22px; height:22px; }
body.v3 .jz-card h3{ font-size: 19px; line-height: 1.3; margin: 0 0 8px; color: var(--ink); }
body.v3 .jz-card p{ color: var(--ink-soft); line-height: 1.65; margin: 0; font-size: 15.5px; }
body.v3 .jz-card ul{ margin: 10px 0 0; padding-left: 18px; color: var(--ink-soft); font-size: 15px; line-height: 1.7; }
body.v3 a.jz-card{ display:block; text-decoration:none; }
body.v3 a.jz-card .jz-more{ display:inline-block; margin-top: 14px; font-weight: 700; color: var(--accent); }

/* price band */
body.v3 .jz-price{ display:grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 40px; align-items:center; background: var(--night-2); color: var(--night-ink); border-radius: 28px; padding: clamp(28px, 4vw, 52px); position:relative; overflow:hidden; }
body.v3 .jz-price::before{ content:""; position:absolute; width:420px; height:420px; right:-120px; top:-160px; border-radius:50%; background: radial-gradient(circle, rgba(47,92,245,.45), transparent 70%); pointer-events:none; }
body.v3 .jz-price .jz-from{ font-size: 15px; color: var(--night-soft); }
body.v3 .jz-price .jz-amount{ display:block; font-size: clamp(40px, 6vw, 64px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin: 6px 0 10px; background: var(--grad-light); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.v3 .jz-price h2{ font-size: clamp(26px, 3vw, 34px); line-height: 1.15; margin: 0; color: #fff; }
body.v3 .jz-price p{ color: var(--night-soft); line-height: 1.7; }
body.v3 .jz-price ul{ list-style:none; margin:0; padding:0; display:grid; gap: 12px; position:relative; }
body.v3 .jz-price li{ display:flex; gap: 12px; align-items:flex-start; line-height: 1.5; }
body.v3 .jz-price li::before{ content:""; flex:none; width:22px; height:22px; margin-top:1px; border-radius:50%; background: var(--grad) center/12px no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E"), var(--grad); }
body.v3 .jz-price .btn{ margin-top: 22px; }

/* chips */
body.v3 .jz-chips{ display:flex; flex-wrap:wrap; gap: 10px; }
body.v3 .jz-chips span{ background:#fff; border:1px solid var(--line); border-radius:999px; padding: 9px 16px; font-weight:600; font-size: 15px; color: var(--ink); }

/* two options */
body.v3 .jz-two{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* office / map */
body.v3 .jz-office{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 32px; align-items:stretch; }
body.v3 .jz-office iframe{ width:100%; height:100%; min-height: 320px; border:0; border-radius: 22px; box-shadow: var(--shadow-card); }
body.v3 .jz-office address{ font-style: normal; font-size: 18px; line-height: 1.6; color: var(--ink); margin: 14px 0 18px; }

/* faq on service pages reuses .faq-list / .faq-item from home-v2.css */
body.v3 .jz-faq{ max-width: 860px; }

/* related links (service pages + blog posts) */
body.v3 .jz-related{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
body.v3 .jz-related a{ display:flex; flex-direction:column; gap:6px; padding: 20px; border-radius: 18px; background:#fff; border:1px solid var(--line); text-decoration:none; color: var(--ink); font-weight:700; line-height:1.35; transition: border-color .25s, transform .3s cubic-bezier(.2,.8,.2,1); }
body.v3 .jz-related a span{ font-weight:500; font-size: 14px; color: var(--ink-faint); }
body.v3 .jz-related a:hover{ border-color: #bcd2ff; transform: translateY(-3px); }

/* blog post: service box after the article */
body.v3 .jz-postbox{ margin: 48px auto 0; max-width: 760px; border-radius: 24px; padding: 28px; background: var(--accent-soft); border: 1px solid #d6e2ff; }
body.v3 .jz-postbox h2{ font-size: 24px; margin: 0 0 6px; color: var(--ink); }
body.v3 .jz-postbox p{ margin: 0 0 18px; color: var(--ink-soft); }
body.v3 .jz-postbox .jz-related{ grid-template-columns: repeat(2, minmax(0,1fr)); }

@media (max-width: 960px){
  body.v3 .jz-grid{ grid-template-columns: 1fr 1fr; }
  body.v3 .jz-price, body.v3 .jz-office{ grid-template-columns: 1fr; }
  body.v3 .jz-related{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  body.v3 .jz-grid, body.v3 .jz-two, body.v3 .jz-related, body.v3 .jz-postbox .jz-related{ grid-template-columns: 1fr; }
  body.v3 .jz-hero-actions .btn{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion: reduce){
  body.v3 .jz-card, body.v3 .jz-related a{ transition:none; }
}