@charset "UTF-8";
/* Nivelva Managed Services: halaman per layanan. prefix: md. Dimuat SETELAH managed-services.css (memakai variabel --ms-* dan kelas ms*). Tanpa kotak krem. */

/* remah roti di atas kotak hero */
.mdHero{padding-top:4px}
.msKick{font-size:12px}
.mdCrumb{display:flex;align-items:center;flex-wrap:wrap;gap:0 8px;margin:0 0 2px;padding:0 4px;font:600 13.5px/1.3 var(--sans);color:var(--ms-mut)}
.mdCrumb a{display:inline-flex;align-items:center;min-height:40px;color:var(--ms-mut);text-decoration:none;transition:color .16s}
.mdCrumb a:hover{color:var(--accent)}
.mdCrumb a:focus-visible{outline:3px solid rgba(232,89,12,.5);outline-offset:3px;border-radius:4px}
.mdCrumb span{color:var(--ms-ink);font-weight:700}
.mdCrumb svg{flex:none;color:#A3A8B0}

/* papan di kanan hero: daftar yang termasuk dalam layanan */
.mdBoard{padding:14px}
.mdBoard .msBoard__hd{padding:8px 10px 14px}
.mdBoard__list{list-style:none;margin:0;padding:0}
.mdBoard__list li{display:flex;align-items:center;gap:14px;padding:13px 10px;font:700 16px/1.35 var(--sans);color:#fff}
.mdBoard__list li + li{border-top:1px solid rgba(255,255,255,.08)}
.mdBoard__list i{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(74,222,128,.16);color:#4ADE80}
.mdBoard__ft{display:flex;align-items:center;gap:12px;margin:12px 0 0;padding:12px 14px;border-radius:16px;background:#fff;color:#111317;font:800 15px/1.3 var(--sans);box-shadow:0 14px 30px rgba(0,0,0,.35)}
.mdBoard__ft i{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff}

/* penjelasan layanan: langsung di bawah hero, jadi selalu dirender (tujuan gulir harus tepat) */
.mdWhat{content-visibility:visible;padding-top:20px}

/* lingkup pekerjaan */
.mdScope{position:relative;padding:76px 0;background:#fff;scroll-margin-top:16px}
.mdSc__grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0;padding:0}
.mdSc{position:relative;overflow:hidden;padding:24px 24px 22px;border-radius:20px;background:radial-gradient(260px 150px at 100% 0,rgba(232,89,12,.07),transparent 70%),#fff;border:1.5px solid var(--ms-bd)}
.mdSc i{display:grid;place-items:center;width:50px;height:50px;border-radius:15px;background:linear-gradient(160deg,#272A30 0%,#0E1013 100%);color:var(--ms-peach);box-shadow:0 12px 22px -10px rgba(17,19,23,.55)}
.mdSc h3{margin:18px 0 0;font:800 18.5px/1.3 var(--sans);letter-spacing:-.01em;color:var(--ms-ink)}
.mdSc h3 button{display:block;width:100%;margin:0;padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;color:inherit;text-align:left;cursor:default}
.mdSc h3 em{display:none}
.mdSc p{margin:8px 0 0;font-size:15.5px;line-height:1.62;color:var(--ms-mut)}

/* yang disiapkan dan yang diterima (memakai kartu msPick) */
.mdDeal{position:relative;padding:76px 0;background:var(--ms-soft)}
.mdDeal .msPick__c{padding:32px 34px 34px}
.mdDeal .msPick__c h3{margin-top:18px}
.mdDeal .msPick__p{gap:0;margin-top:14px}
.mdDeal .msPick__p li{padding:13px 0;font:600 16px/1.5 var(--sans)}
.mdDeal .msPick__p li + li{border-top:1px solid var(--ms-bd)}
.mdDeal .msPick__c--dk .msPick__p li + li{border-top-color:var(--ms-line)}
.mdDeal .msPick__p svg{margin-top:4px}
.mdDeal__p svg{color:var(--accent)}
.mdNote{display:flex;align-items:flex-start;gap:12px;margin:20px 0 0;padding:16px 20px;border-radius:16px;border:1.5px dashed var(--ms-bd2);background:#fff;font:500 15.5px/1.6 var(--sans);color:#3A3D43}
.mdNote i{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ms-ink);color:#fff}
.mdNote span{padding-top:1px}
.mdNote a{display:inline-block;margin:-9px 0;padding:9px 0;font-weight:800;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.mdNote a:hover{color:var(--ms-ink)}

/* layanan terkait (memakai kartu msMore) */
.mdRel__hd{display:flex;align-items:center;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;margin-bottom:16px}
.mdRel__hd .msMore__t{margin:0}
.mdRel__all{display:inline-flex;align-items:center;gap:7px;min-height:40px;font:800 14.5px/1.2 var(--sans);color:var(--ms-ink);text-decoration:none;transition:color .16s}
.mdRel__all:hover{color:var(--accent)}
.mdRel__all:focus-visible{outline:3px solid rgba(232,89,12,.5);outline-offset:3px;border-radius:6px}

/* FAQ: judul dan tombol WhatsApp di kiri, pertanyaan di kanan */
.mdFaq{position:relative;padding:76px 0;background:var(--ms-soft)}
.mdFaq__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start}
.mdFaq__side{position:sticky;top:24px}
.mdFaq__lead{margin:16px 0 0;max-width:24em;font-size:16.5px;line-height:1.6;color:var(--ms-mut)}
.mdFaq__list{display:grid;gap:10px}
.mdFq{border-radius:16px;background:#fff;border:1.5px solid var(--ms-bd);transition:border-color .16s,box-shadow .16s}
.mdFq:hover{border-color:var(--ms-ink)}
.mdFq.is-open{border-color:var(--ms-ink);box-shadow:0 16px 30px -20px rgba(17,19,23,.45)}
.mdFq h3{margin:0}
.mdFq button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:18px 16px 18px 22px;border:0;background:transparent;text-align:left;cursor:pointer;font:700 16.5px/1.4 var(--sans);color:#16181C}
.mdFq button i{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ms-soft);color:var(--ms-ink);transition:background .16s,color .16s,transform .2s}
.mdFq:hover button i{background:var(--ms-ink);color:#fff}
.mdFq.is-open button i,.mdFq.is-open:hover button i{background:var(--accent);color:#fff;transform:rotate(45deg)}
.mdFq button:focus-visible{outline:3px solid rgba(232,89,12,.55);outline-offset:-3px;border-radius:16px}
.mdFq__a{padding:0 22px 20px}
.mdFq__a[hidden]{display:none}
.mdFq__a p{margin:0;max-width:44em;font-size:16px;line-height:1.72;color:#33363B}

/* kecepatan: bagian jauh di bawah baru dirender saat mendekati layar */
.mdDeal,.mdFaq{content-visibility:auto;contain-intrinsic-size:auto 700px}

/* tablet */
@media (max-width:1080px){
  .mdSc__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mdFaq__grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .mdFaq__side{position:static}
  .mdFaq__lead{max-width:34em}
}
/* HP: ringkas, tidak boros tinggi */
@media (max-width:640px){
  .mdHero{padding-top:2px}
  .mdCrumb{margin-bottom:2px;font-size:13px;flex-wrap:nowrap;overflow:hidden}
  .mdCrumb a{flex:none}
  .mdCrumb span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mdWhat{padding-top:0}
  .mdScope,.mdDeal,.mdFaq{padding:48px 0}
  .mdSc__grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .mdSc{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:12px;align-items:center;padding:12px 12px 12px 14px;border-radius:18px;background:#fff;transition:border-color .16s}
  .mdSc.is-open{border-color:var(--ms-ink)}
  .mdSc h3 button{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:42px;cursor:pointer}
  .mdSc h3 button::after{content:"";position:absolute;inset:0}
  .mdSc h3 button:focus-visible{outline:0}
  .mdSc:has(button:focus-visible){outline:3px solid rgba(232,89,12,.5);outline-offset:2px}
  .mdSc h3 em{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ms-soft);color:var(--ms-ink);font-style:normal;transition:transform .2s,background .16s,color .16s}
  .mdSc.is-open h3 em{background:var(--accent);color:#fff;transform:rotate(180deg)}
  .mdSc:not(.is-open) p{display:none}
  .mdSc i{width:42px;height:42px;border-radius:12px;box-shadow:none}
  .mdSc i svg{width:20px;height:20px}
  .mdSc h3{margin:0;font-size:17px}
  .mdSc p{grid-column:1 / -1;margin:8px 0 4px;font-size:15px}
  .mdDeal .msPick__c{padding:22px 20px 14px}
  .mdDeal .msPick__c h3{margin-top:14px}
  .mdDeal .msPick__p{margin-top:8px}
  .mdDeal .msPick__p li{padding:11px 0;font-size:15px}
  .mdNote{margin-top:12px;padding:14px 16px;font-size:14.5px}
  .mdRel__hd{margin-bottom:10px}
  .mdRel__all{font-size:13.5px}
  .mdFaq__grid{gap:18px}
  .mdFaq__lead{display:none}
  .mdFaq__side .msWhat__go{display:none}
  .mdFq button{padding:14px 12px 14px 16px;font-size:15.5px}
  .mdFq__a{padding:0 16px 16px}
  .mdFq__a p{font-size:15.5px;line-height:1.7}
  .mdDeal,.mdFaq{contain-intrinsic-size:auto 820px}
}
@media (prefers-reduced-motion:reduce){.mdFq,.mdFq button i,.mdCrumb a,.mdRel__all{transition:none}}