/* =========================================================
   NEX Network (nex.net.id) — desain "Korporat", dikombinasikan dengan nex.co.id (17 Okt 2026)
   Foto asli (Media Library, key di option nn_images); judul, menu & tombol Poppins + teks Open Sans (sama dengan nex.co.id);
   kartu putih bergaris tipis, top bar biru + header putih, footer biru. Warna dari logo (#0A84B8 / #109BD0).
   Komponen halaman berawalan .nn-, sumber halaman di web_nex_net_id/wp/pages.
   ========================================================= */

body {
    --nn-blue: #0a84b8;
    --nn-sky: #109bd0;
    --nn-deep: #086a99;
    --nn-navy: #0a2b40;
    --nn-ink: #16222d;
    --nn-text: #3b4753;
    --nn-muted: #66727e;
    --nn-line: #dde6ed;
    --nn-tint: #edf6fb;
    --nn-soft: #f5f8fa;
    --nn-ok: #12a366;
    --nn-grad: linear-gradient(90deg, #0a6fa5 0%, #0a84b8 55%, #109bd0 100%);
    --nn-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --nn-head: "Poppins", "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --nn-r: 12px;
    --nn-r-lg: 18px;
    --nn-shadow: 0 18px 40px -24px rgba(10, 43, 64, .4);
    /* nama lama, masih dipakai gaya inline di beberapa sumber halaman */
    --nn-wave: var(--nn-blue);
    --nn-ice: var(--nn-tint);
    --nn-mist: var(--nn-soft);
}

/* ---------------------------------------------------------
   1. Dasar halaman .nn
   --------------------------------------------------------- */
body.nn-page { background: #fff; }
body.nn-page .site-content, body.nn-page #content, body.nn-page .ast-container { max-width: none; padding: 0; }
body.nn-page .entry-content > :first-child { margin-top: 0; }
.nn { font-family: var(--nn-font); font-size: 16px; line-height: 1.72; color: var(--nn-text); -webkit-font-smoothing: antialiased; overflow-x: clip; }
.nn *, .nn *::before, .nn *::after { box-sizing: border-box; }
:where(.nn) :is(h1, h2, h3, h4) { font-family: var(--nn-head); color: var(--nn-ink); letter-spacing: -.015em; margin: 0; text-transform: none; }
:where(.nn) h1 { font-size: clamp(2rem, 3.9vw, 3rem); line-height: 1.16; font-weight: 700; }
:where(.nn) h2 { font-size: clamp(1.6rem, 2.7vw, 2.2rem); line-height: 1.25; font-weight: 700; }
:where(.nn) h3 { font-size: 1.12rem; line-height: 1.4; font-weight: 600; }
:where(.nn) h4 { font-size: 1rem; line-height: 1.4; font-weight: 600; }
:where(.nn) :is(h1, h2) em { font-style: normal; color: var(--nn-blue); }
:where(.nn) :is(h1, h2, .nn-hero__title) { text-wrap: balance; }
:where(.nn) p { margin: 0 0 1em; }
:where(.nn) p:last-child { margin-bottom: 0; }
:where(.nn) a { color: var(--nn-blue); text-decoration: none; }
.nn a:not([class]):hover { text-decoration: underline; text-underline-offset: 3px; }
.nn :is(a, button, summary):focus-visible { outline: 3px solid var(--nn-sky); outline-offset: 3px; border-radius: 6px; }
:where(.nn) :is(ul, ol) { margin: 0; padding: 0; }
:where(.nn) img { max-width: 100%; height: auto; }
:where(.nn) svg { width: 1em; height: 1em; flex: none; }
:where(.nn) :is(strong, b) { font-weight: 700; color: var(--nn-ink); }

.nn-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.nn-sec { padding: 88px 0; position: relative; }
.nn-sec--ice, .nn-sec--tint { background: var(--nn-tint); }
.nn-sec--mist, .nn-sec--soft { background: var(--nn-soft); }
.nn-sec--tight { padding: 56px 0; }
.nn-sec--top0 { padding-top: 0; }
.nn-sec--ink { background: linear-gradient(135deg, #0a2b40 0%, #0b3f5f 100%); color: #c5d8e5; }
.nn-sec--ink :is(h2, h3, h4, strong, b) { color: #fff; }

.nn-eyebrow { display: inline-block; margin-bottom: 10px; font-family: var(--nn-head); font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--nn-blue); }
.nn-sec--ink .nn-eyebrow { color: #8fd9f6; }
.nn-head { max-width: 780px; margin: 0 auto 48px; text-align: center; }
.nn-head p { margin-top: 14px; font-size: 16.5px; color: var(--nn-muted); }
.nn-sec--ink .nn-head p { color: #a9c3d4; }
.nn-head--split { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.nn-head--split > div { max-width: none; }
.nn-head--center { text-align: center; }
.nn-subhead { margin: 48px 0 20px; font-size: 1.15rem; text-align: center; }

/* ---------------------------------------------------------
   2. Tombol, tautan, ikon, chip
   --------------------------------------------------------- */
.nn-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.nn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 26px; border-radius: 999px; border: 1.5px solid transparent; font-family: var(--nn-head); font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none !important; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.nn-btn svg { width: 18px; height: 18px; }
.nn-btn--primary { background: var(--nn-grad); background-color: var(--nn-blue); color: #fff !important; box-shadow: 0 10px 22px -12px rgba(10, 111, 165, .85); }
.nn-btn--primary:hover { background: var(--nn-deep); transform: translateY(-1px); }
.nn-btn--ghost { background: #fff; color: var(--nn-deep) !important; border-color: #b6d6e8; }
.nn-btn--ghost:hover { border-color: var(--nn-blue); background: var(--nn-tint); }
.nn-btn--light { background: #fff; color: var(--nn-deep) !important; }
.nn-btn--light:hover { background: var(--nn-tint); transform: translateY(-1px); }
.nn-btn--line { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .75); }
.nn-btn--line:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.nn-btn--wa { background: #15a650; color: #fff !important; box-shadow: 0 10px 22px -12px rgba(21, 166, 80, .85); }
.nn-btn--wa:hover { background: #108a42; transform: translateY(-1px); }
.nn-btn--sm { min-height: 42px; padding: 0 18px; font-size: 14px; }
.nn-btn--block { width: 100%; }
.nn-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--nn-blue) !important; }
.nn-link svg { width: 17px; height: 17px; transition: transform .18s ease; }
.nn-link:hover svg { transform: translateX(3px); }

.nn-ico { display: inline-flex; align-items: center; justify-content: flex-start; color: var(--nn-blue); flex: none; }
.nn-ico svg { width: 36px; height: 36px; stroke-width: 1.6; }
.nn-ico--ink { color: var(--nn-deep); }
.nn-sec--ink .nn-ico { color: #8fd9f6; }

.nn-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.nn-chips li { padding: 5px 12px; border-radius: 999px; background: var(--nn-tint); font-size: 13.5px; font-weight: 600; color: var(--nn-deep); }

.nn-check { list-style: none; display: grid; gap: 10px; }
.nn-check li { position: relative; padding-left: 28px; line-height: 1.5; }
.nn-check li::before { content: ""; position: absolute; left: 0; top: .16em; width: 18px; height: 18px; border-radius: 50%; background: var(--nn-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a84b8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat; }

/* ---------------------------------------------------------
   3. Hero foto & slider beranda
   --------------------------------------------------------- */
.nn-hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 500px; padding: 80px 0; overflow: hidden; color: #dfeaf2; background: var(--nn-navy); }
.nn-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100% !important; max-width: none !important; object-fit: cover; object-position: var(--pos, 65% 50%); }
.nn-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4, 22, 36, .9) 0%, rgba(4, 22, 36, .74) 36%, rgba(4, 22, 36, .3) 68%, rgba(4, 22, 36, .1) 100%); }
.nn-hero__in > * { max-width: 660px; }
.nn-hero :is(h1, .nn-hero__title) { color: #fff; }
.nn-hero__title { margin: 0; font-family: var(--nn-head); font-size: clamp(2rem, 3.9vw, 3rem); line-height: 1.16; font-weight: 700; letter-spacing: -.015em; }
.nn-hero h1 em { color: #8fdaf8; }
.nn-hero .nn-eyebrow { color: #8fdaf8; }
.nn-hero .nn-lead { margin-top: 18px; font-size: 18px; line-height: 1.65; color: #dce8f0; }
.nn-hero--short { min-height: 400px; }
.nn-hero--center { text-align: center; }
.nn-hero--center::before { background: linear-gradient(180deg, rgba(4, 22, 36, .55), rgba(4, 22, 36, .78)); }
.nn-hero--center .nn-hero__in > * { margin-left: auto; margin-right: auto; }
.nn-hero--center :is(.nn-actions, .nn-trust, .nn-crumb) { justify-content: center; }
.nn-crumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; font-size: 13.5px; color: #b3cad9; }
.nn-crumb a { color: #e3eef5 !important; }
.nn-crumb a:hover { color: #fff !important; text-decoration: underline; }
.nn-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; list-style: none; }
.nn-trust li { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: #eef5f9; }
.nn-trust li svg { width: 18px; height: 18px; color: #8fdaf8; }

.nn-slider { position: relative; display: grid; background: var(--nn-navy); }
.nn-slider > .nn-slide { grid-area: 1 / 1; min-height: clamp(560px, 78vh, 680px); padding-bottom: 104px; }
.nn-slider:not(.is-ready) > .nn-slide:not(:first-child) { display: none; }
.nn-slider.is-ready > .nn-slide { opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
.nn-slider.is-ready > .nn-slide.is-active { opacity: 1; visibility: visible; transition: opacity .9s ease; }
.nn-slider__bar { position: absolute; left: 0; right: 0; bottom: 34px; z-index: 2; display: flex; justify-content: center; align-items: center; gap: 16px; }
.nn-slider button { all: unset; box-sizing: border-box; cursor: pointer; }
.nn-slider .nn-slider__arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .65); color: #fff; transition: background-color .18s ease, color .18s ease; }
.nn-slider .nn-slider__arrow:hover { background: #fff; color: var(--nn-deep); }
.nn-slider .nn-slider__arrow svg { width: 20px; height: 20px; }
.nn-slider__dots { display: flex; gap: 8px; }
.nn-slider .nn-slider__dots button { width: 10px; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .45); transition: width .3s ease, background-color .3s ease; }
.nn-slider .nn-slider__dots button[aria-current="true"] { width: 30px; background: #fff; }
.nn-slider button:focus-visible { outline: 3px solid #8fdaf8; outline-offset: 3px; }

/* ---------------------------------------------------------
   4. Kartu layanan (rumah / bisnis)
   --------------------------------------------------------- */
.nn-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.nn-path { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 30px; border-radius: var(--nn-r); background: #fff; border: 1px solid var(--nn-line); color: var(--nn-text); text-decoration: none !important; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.nn-path:hover { border-color: #9ccbe3; box-shadow: var(--nn-shadow); transform: translateY(-2px); }
.nn-path__img { display: block; margin: -30px -30px 8px; aspect-ratio: 2 / 1; overflow: hidden; background: var(--nn-tint); }
.nn-path__img img { display: block; width: 100%; height: 100% !important; object-fit: cover; transition: transform .5s ease; }
.nn-path:hover .nn-path__img img { transform: scale(1.04); }
.nn-path__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.nn-path__from { margin: 0; font-size: 13px; color: var(--nn-muted); text-align: right; }
.nn-path__from b { display: block; font-family: var(--nn-head); font-size: 19px; font-weight: 700; color: var(--nn-ink); }
.nn-path :is(h2, h3) { font-size: 1.3rem !important; }
.nn-path p { margin: 0; color: var(--nn-muted); }
.nn-path .nn-link { margin-top: auto; padding-top: 4px; }

/* ---------------------------------------------------------
   5. Kartu paket
   --------------------------------------------------------- */
.nn-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.nn-plans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nn-plan { position: relative; display: flex; flex-direction: column; padding: 30px 24px 24px; border-radius: 14px; background: #fff; border: 1px solid var(--nn-line); transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; }
.nn-plan:hover { border-color: #9ccbe3; box-shadow: var(--nn-shadow); transform: translateY(-3px); }
.nn-plan__tier { margin: 0; font-family: var(--nn-head); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--nn-blue); }
.nn-plan__speed { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 4px; font-family: var(--nn-head); font-size: 44px; font-weight: 700; line-height: 1; color: var(--nn-ink); letter-spacing: -.02em; }
.nn-plan__speed small { font-size: 17px; font-weight: 700; color: var(--nn-muted); letter-spacing: 0; }
.nn-plan__fit { margin: 6px 0 0; min-height: 3em; font-size: 14px; color: var(--nn-muted); }
.nn-meter { height: 5px; margin: 16px 0 18px; border-radius: 5px; background: #e5edf2; overflow: hidden; }
.nn-meter i { display: block; height: 100%; width: var(--w, 50%); border-radius: 5px; background: var(--nn-grad); }
.nn-plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; margin: 0; font-size: 14px; color: var(--nn-muted); }
.nn-plan__price b { font-family: var(--nn-head); font-size: 27px; font-weight: 700; color: var(--nn-ink); letter-spacing: -.01em; }
.nn-plan__was { display: block; font-size: 13.5px; color: var(--nn-muted); text-decoration: line-through; }
.nn-plan__tax { margin: 4px 0 0; font-size: 12.5px; color: var(--nn-muted); }
.nn-plan .nn-check { margin: 20px 0 24px; font-size: 14.5px; }
.nn-plan__cta { margin-top: auto; display: grid; gap: 8px; }
.nn-badge { position: absolute; top: -13px; left: 24px; padding: 5px 14px; border-radius: 999px; font-family: var(--nn-head); background: var(--nn-grad); background-color: var(--nn-blue); color: #fff; font-size: 12px; font-weight: 700; }
.nn-plan--hot { border: 2px solid var(--nn-blue); box-shadow: 0 22px 44px -30px rgba(10, 132, 184, .7); }
.nn-promo-tag { align-self: flex-start; display: inline-flex; margin-bottom: 6px; padding: 3px 10px; border-radius: 999px; background: #fff3d1; color: #8a5a00; font-size: 12px; font-weight: 700; }
.nn-fine { margin-top: 22px; font-size: 14px; color: var(--nn-muted); }
.nn-fine li { margin-left: 18px; }

/* ---------------------------------------------------------
   6. Grid fitur, angka, tabel
   --------------------------------------------------------- */
.nn-grid { display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nn-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nn-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nn-feat { padding: 28px; border-radius: var(--nn-r); background: #fff; border: 1px solid var(--nn-line); transition: border-color .2s ease, box-shadow .2s ease; }
.nn-feat:hover { border-color: #b4d6e8; box-shadow: 0 16px 32px -26px rgba(10, 43, 64, .5); }
.nn-feat h3 { margin: 14px 0 8px; font-size: 1.1rem; }
.nn-feat p { margin: 0; font-size: 15px; color: var(--nn-muted); }
.nn-feat--row { display: flex; gap: 16px; align-items: flex-start; }
.nn-feat--row h3 { margin: 2px 0 6px; }
.nn-sec--ink .nn-feat { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
.nn-sec--ink .nn-feat p { color: #a9c3d4; }

.nn-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.nn-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nn-stats > div { padding: 24px; border-radius: var(--nn-r); background: #fff; border: 1px solid var(--nn-line); border-top: 3px solid var(--nn-blue); }
.nn-stats b { display: block; font-family: var(--nn-head); font-size: 29px; font-weight: 700; line-height: 1.15; color: var(--nn-ink); letter-spacing: -.01em; }
.nn-stats span { display: block; margin-top: 8px; font-size: 14px; color: var(--nn-muted); }
.nn-stats--guide span { margin: 0 0 6px; }
.nn-stats--guide b { font-size: 19px; color: var(--nn-deep); }

.nn-table-wrap { overflow-x: auto; border: 1px solid var(--nn-line); border-radius: var(--nn-r); background: #fff; }
.nn-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15px; }
.nn-table :is(th, td) { padding: 15px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid #e8eef2; }
.nn-table thead th { background: var(--nn-blue); color: #fff; font-weight: 700; font-size: 14.5px; }
.nn-table thead th:first-child { width: 28%; }
.nn-table tbody th { font-weight: 700; color: var(--nn-ink); background: #f7fafc; }
.nn-table tbody tr:last-child :is(th, td) { border-bottom: 0; }
.nn-table td b { color: var(--nn-ink); }
.nn-table .nn-yes { color: var(--nn-ok); font-weight: 700; }

/* ---------------------------------------------------------
   7. Split, foto, panel, langkah
   --------------------------------------------------------- */
.nn-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.nn-split--top { align-items: start; }
.nn-prose h2 { margin-bottom: 16px; }
.nn-prose h3 { margin: 26px 0 10px; }
.nn-prose ul { margin: 0 0 1em 1.2em; display: grid; gap: 6px; }
.nn-panel { padding: 30px; border-radius: var(--nn-r-lg); background: var(--nn-soft); border: 1px solid var(--nn-line); }
.nn-panel h3 { margin-bottom: 14px; }
.nn-panel--white { background: #fff; }
.nn-panel--ink { background: linear-gradient(150deg, #0b3f5f, #0a2b40); border-color: transparent; color: #c5d8e5; }
.nn-panel--ink :is(h2, h3, b, strong) { color: #fff; }
.nn-panel--ink .nn-ico { color: #8fd9f6; }
.nn-rows { list-style: none; display: grid; border-top: 1px solid var(--nn-line); }
.nn-rows li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--nn-line); font-size: 15px; }
.nn-rows li span { color: var(--nn-muted); }
.nn-rows li b { color: var(--nn-ink); font-weight: 700; text-align: right; }
:is(.nn-panel--ink, .nn-story) :is(.nn-rows, .nn-rows li) { border-color: rgba(255, 255, 255, .14); }
:is(.nn-panel--ink, .nn-story) .nn-rows li span { color: #a9c3d4; }
:is(.nn-panel--ink, .nn-story) .nn-rows li b { color: #fff; }
.nn-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 16px; }
.nn-total span { font-size: 14px; color: var(--nn-muted); }
.nn-total b { font-family: var(--nn-head); font-size: 28px; font-weight: 700; color: var(--nn-deep); letter-spacing: -.01em; }

/* foto + teks berdampingan */
.nn-media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.nn-media--top { align-items: start; }
.nn-media--rev > .nn-media__img { order: 2; }
.nn-media__img { position: relative; margin: 0; border-radius: var(--nn-r-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--nn-tint); }
.nn-media__img img { display: block; width: 100%; height: 100% !important; object-fit: cover; object-position: var(--pos, 50% 50%); }
.nn-media__body h2 { margin-bottom: 16px; }

/* kartu foto besar dengan gradasi biru (banner) */
.nn-band { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: 440px; border-radius: 22px; background: var(--nn-navy); color: #e3eef5; }
.nn-band__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100% !important; max-width: none !important; object-fit: cover; object-position: var(--pos, 75% 50%); }
.nn-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7, 88, 130, .97) 0%, rgba(9, 116, 166, .9) 38%, rgba(10, 132, 184, .3) 68%, rgba(10, 132, 184, 0) 88%); }
.nn-band__body { position: relative; max-width: 620px; padding: 56px; }
.nn-band__body h2 { color: #fff; }
.nn-band__body p { margin-top: 14px; color: #e3eef5; }
.nn-band .nn-eyebrow { color: #bfeafc; }
.nn-band + .nn-grid { margin-top: 24px; }
.nn-band--promo { justify-content: space-between; gap: 32px; padding-right: 48px; }
.nn-band--promo::before { background: linear-gradient(90deg, rgba(7, 70, 108, .97) 0%, rgba(8, 92, 136, .9) 45%, rgba(10, 43, 64, .55) 100%); }
.nn-promo__price { position: relative; flex: 0 0 330px; padding: 26px; border-radius: 16px; background: #fff; color: var(--nn-text); box-shadow: 0 24px 48px -26px rgba(0, 0, 0, .6); }
.nn-promo__price s { display: block; color: var(--nn-muted); font-size: 15px; }
.nn-promo__price b { display: block; margin: 4px 0; font-family: var(--nn-head); font-size: 34px; font-weight: 700; letter-spacing: -.02em; color: var(--nn-ink); }
.nn-promo__price small { display: block; margin-bottom: 16px; font-size: 13.5px; color: var(--nn-muted); }

/* foto lebar penuh dengan panel navy di kanan */
.nn-story { position: relative; isolation: isolate; overflow: hidden; background: var(--nn-navy); color: #c5d8e5; }
.nn-story__img { position: absolute; top: 0; left: 0; z-index: -2; width: 64%; height: 100% !important; max-width: none !important; object-fit: cover; object-position: var(--pos, 50% 50%); }
.nn-story::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 43, 64, 0) 14%, rgba(10, 43, 64, .72) 46%, #0a2b40 64%); }
.nn-story__in { display: flex; justify-content: flex-end; padding-top: 96px; padding-bottom: 96px; }
.nn-story__body { width: min(560px, 100%); }
.nn-story :is(h2, h3) { color: #fff; }
.nn-story h2 { margin-bottom: 16px; }
.nn-story h3 { margin: 26px 0 8px; font-size: 1.05rem; }
.nn-story .nn-eyebrow { color: #8fd9f6; }
.nn-story .nn-link { margin-top: 22px; color: #8fdaf8 !important; }

/* ubin foto (sektor usaha) */
.nn-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; }
.nn-tile { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 320px; padding: 26px; border-radius: var(--nn-r-lg); background: var(--nn-navy); color: #dce8f0; }
.nn-tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100% !important; max-width: none !important; object-fit: cover; transition: transform .6s ease; }
.nn-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4, 22, 36, .02) 25%, rgba(4, 22, 36, .6) 58%, rgba(4, 22, 36, .92) 100%); }
.nn-tile:hover img { transform: scale(1.05); }
.nn-tile .nn-ico { color: #8fdaf8; }
.nn-tile .nn-ico svg { width: 30px; height: 30px; }
.nn-tile h3 { margin: 10px 0 6px; color: #fff; }
.nn-tile p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #d3e1ea; }

.nn-steps { list-style: none; counter-reset: nns; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 20px; }
.nn-steps li { counter-increment: nns; position: relative; padding: 28px 24px 26px; border-radius: var(--nn-r); background: #fff; border: 1px solid var(--nn-line); }
.nn-steps li::before { content: counter(nns); font-family: var(--nn-head); display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 50%; background: var(--nn-grad); background-color: var(--nn-blue); color: #fff; font-size: 17px; font-weight: 800; }
.nn-steps h3 { margin-bottom: 8px; }
.nn-steps p { margin: 0; font-size: 15px; color: var(--nn-muted); }

.nn-note { margin-top: 18px; font-size: 14px; color: var(--nn-muted); }
.nn-callout { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--nn-r); background: var(--nn-tint); border: 1px solid #c6e1ee; font-size: 15px; }
.nn-callout svg { width: 22px; height: 22px; color: var(--nn-blue); margin-top: 1px; }

/* ---------------------------------------------------------
   8. FAQ, CTA, logo, artikel, sisipan plugin
   --------------------------------------------------------- */
.nn-faqwrap { display: block; max-width: 900px; }
.nn-faq { display: grid; gap: 12px; }
.nn-faq details { border: 1px solid var(--nn-line); border-radius: var(--nn-r); background: #fff; transition: border-color .2s ease; }
.nn-faq details[open] { border-color: #a6cfe4; }
.nn-faq summary { position: relative; list-style: none; cursor: pointer; padding: 18px 60px 18px 22px; font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--nn-ink); }
.nn-faq summary::-webkit-details-marker { display: none; }
.nn-faq summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: var(--nn-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a84b8' stroke-width='2.6' stroke-linecap='round'%3E%3Cline x1='12' y1='6' x2='12' y2='18'/%3E%3Cline x1='6' y1='12' x2='18' y2='12'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .2s ease; }
.nn-faq details[open] summary::after { transform: rotate(45deg); }
.nn-faq__a { padding: 0 22px 20px; color: var(--nn-muted); }

.nn-cta { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.nn-cta__img { margin: 0; border-radius: var(--nn-r-lg); overflow: hidden; aspect-ratio: 4 / 3; background: #dcebf3; }
.nn-cta__img img { display: block; width: 100%; height: 100% !important; object-fit: cover; }
.nn-cta h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.nn-cta p { margin-top: 12px; font-size: 16.5px; color: var(--nn-muted); }

.nn-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; list-style: none; }
.nn-logos li { flex: 0 0 calc((100% - 80px) / 6); display: grid; place-items: center; height: 92px; padding: 12px 16px; border-radius: var(--nn-r); background: #fff; border: 1px solid var(--nn-line); }
.nn-logos img { max-height: 56px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .2s ease, opacity .2s ease; }
.nn-logos li:hover img { filter: none; opacity: 1; }

.nn-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; }
.nn-post { display: flex; flex-direction: column; border-radius: var(--nn-r); overflow: hidden; background: #fff; border: 1px solid var(--nn-line); transition: box-shadow .2s ease, transform .2s ease; }
.nn-post:hover { box-shadow: var(--nn-shadow); transform: translateY(-2px); }
.nn-post__img { display: block; aspect-ratio: 16 / 9; background: var(--nn-tint); overflow: hidden; }
.nn-post__img img { width: 100%; height: 100% !important; object-fit: cover; }
.nn-post__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; flex: 1; }
.nn-post__meta { display: flex; justify-content: space-between; gap: 10px; margin: 0; font-size: 13px; color: var(--nn-muted); }
.nn-post__meta span:first-child { font-weight: 700; color: var(--nn-blue); }
.nn-post h3 { font-size: 1.05rem; line-height: 1.45; }
.nn-post h3 a { color: var(--nn-ink) !important; }
.nn-post h3 a:hover { color: var(--nn-blue) !important; }
.nn-post p { margin: 0; font-size: 14.5px; color: var(--nn-muted); }
.nn-post .nn-link { margin-top: auto; padding-top: 8px; font-size: 14.5px; }

.nn-embed { padding: 28px; border-radius: var(--nn-r-lg); background: #fff; border: 1px solid var(--nn-line); box-shadow: var(--nn-shadow); font-family: var(--nn-font); }
.nn-embed :is(input[type="text"], input[type="email"], input[type="tel"], input[type="search"], textarea, select) { border-radius: 10px !important; border: 1px solid #cbdae4 !important; font-family: var(--nn-font) !important; }
.nn-embed :is(button, input[type="submit"], .elementor-button) { border-radius: 999px !important; background: var(--nn-blue) !important; color: #fff !important; border-color: var(--nn-blue) !important; font-family: var(--nn-font) !important; font-weight: 700 !important; }
.nn-embed :is(h1, h2, h3, h4, p, label, span, div) { font-family: var(--nn-font); }

/* sematan iframe (speed test) */
.nn-embed--frame { padding: 0; overflow: hidden; }
.nn-embed--frame iframe { display: block; width: 100%; height: 650px; border: 0; }

/* dokumen legal: daftar isi lengket + isi */
.nn-legal { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 48px; align-items: start; }
.nn-toc { position: sticky; top: 140px; padding: 22px 22px 18px; border-radius: var(--nn-r); background: var(--nn-soft); border: 1px solid var(--nn-line); }
.nn-toc h2 { margin: 0 0 12px; font-size: 1rem !important; }
.nn-toc ol { list-style: none; counter-reset: toc; display: grid; gap: 2px; max-height: calc(100vh - 260px); overflow-y: auto; }
.nn-toc li { counter-increment: toc; }
.nn-toc a { display: flex; gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: 14px; line-height: 1.4; color: var(--nn-text) !important; }
.nn-toc a::before { content: counter(toc) "."; min-width: 20px; color: var(--nn-blue); font-weight: 700; }
.nn-toc a:hover { background: #fff; color: var(--nn-blue) !important; text-decoration: none !important; }
.nn-legal__sec { scroll-margin-top: 140px; padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--nn-line); }
.nn-legal__sec:last-child { border-bottom: 0; margin-bottom: 0; }
.nn-legal__sec h2 { margin-bottom: 14px; font-size: 1.4rem; }
.nn-legal__sec h3 { margin: 18px 0 8px; font-size: 1.05rem; }
.nn-legal__sec ul { margin: 0 0 0 1.2em; list-style: disc; display: grid; gap: 8px; }

/* form pendaftaran + ringkasan samping */
.nn-formwrap { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.nn-steps--list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 4px 0 6px; }
.nn-steps--list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; padding: 0 0 18px; border: 0; background: transparent; }
.nn-steps--list li::before { grid-row: span 2; width: 34px; height: 34px; margin: 0; font-size: 14px; }
.nn-steps--list h3 { margin: 4px 0 2px; font-size: 1rem; }
.nn-steps--list p { font-size: 14.5px; }

/* daftar area layanan [nn_coverage] */
.nn-cov { display: grid; gap: 36px; }
.nn-cov__city h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 16px; font-size: 1.3rem; }
.nn-cov__city h3 span { padding: 3px 12px; border-radius: 999px; background: var(--nn-tint); font-size: 13px; font-weight: 700; color: var(--nn-deep); }
.nn-cov__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.nn-cov__kec { padding: 20px 22px; border-radius: var(--nn-r); background: #fff; border: 1px solid var(--nn-line); }
.nn-cov__kec h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 1rem; }
.nn-cov__kec h4 svg { width: 18px; height: 18px; color: var(--nn-blue); }
.nn-cov__kec ul { list-style: none; display: grid; }
.nn-cov__kec li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid #edf2f6; font-size: 15px; }
.nn-cov__kec li small { font-size: 13px; color: var(--nn-muted); white-space: nowrap; }

/* ---------------------------------------------------------
   9. Responsif
   --------------------------------------------------------- */
@media (max-width: 1024px) {
    .nn-legal, .nn-formwrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .nn-toc { position: static; }
    .nn-toc ol { max-height: none; }
}
@media (max-width: 767px) {
    .nn-embed--frame iframe { height: 720px; }
}
@media (max-width: 1100px) {
    .nn-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nn-logos li { flex-basis: calc((100% - 48px) / 4); }
    .nn-band--promo { flex-direction: column; align-items: stretch; padding-right: 0; }
    .nn-band--promo .nn-promo__price { flex: none; margin: 0 56px 48px; max-width: 420px; }
}
@media (max-width: 1024px) {
    .nn-sec { padding: 72px 0; }
    .nn-split, .nn-media, .nn-cta { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .nn-media--rev > .nn-media__img { order: 0; }
    .nn-grid, .nn-grid--4, .nn-posts, .nn-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nn-plans--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nn-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nn-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nn-story__img { position: relative; display: block; width: 100%; height: 320px !important; }
    .nn-story::before { display: none; }
    .nn-story__in { padding-top: 48px; padding-bottom: 64px; }
    .nn-story__body { width: 100%; }
    .nn-band::before { background: linear-gradient(90deg, rgba(7, 88, 130, .96) 0%, rgba(9, 116, 166, .86) 55%, rgba(10, 132, 184, .45) 100%); }
}
@media (max-width: 767px) {
    .nn { font-size: 15.5px; }
    .nn-wrap { padding: 0 18px; }
    .nn-sec { padding: 56px 0; }
    .nn-sec--tight { padding: 40px 0; }
    .nn-head { margin-bottom: 32px; }
    .nn-head p { font-size: 15.5px; }
    .nn-hero { min-height: 0; padding: 64px 0 56px; }
    .nn-hero::before { background: linear-gradient(180deg, rgba(4, 22, 36, .55) 0%, rgba(4, 22, 36, .8) 55%, rgba(4, 22, 36, .9) 100%); }
    .nn-hero .nn-lead { font-size: 16.5px; }
    .nn-slider > .nn-slide { min-height: 600px; padding-top: 56px; padding-bottom: 104px; align-items: flex-end; }
    .nn-slider__bar { bottom: 26px; }
    .nn-paths, .nn-grid, .nn-grid--2, .nn-grid--4, .nn-plans, .nn-plans--3, .nn-posts, .nn-tiles, .nn-steps { grid-template-columns: minmax(0, 1fr); }
    .nn-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nn-path, .nn-panel, .nn-embed { padding: 24px; }
    .nn-path__img { margin: -24px -24px 6px; }
    .nn-band { min-height: 0; border-radius: 18px; }
    .nn-band::before { background: linear-gradient(180deg, rgba(7, 88, 130, .82) 0%, rgba(7, 88, 130, .95) 60%); }
    .nn-band__body { padding: 32px 24px; }
    .nn-band--promo .nn-promo__price { margin: 0 20px 24px; max-width: none; }
    .nn-tile { min-height: 260px; }
    .nn-story__img { height: 240px !important; }
    .nn-logos li { flex-basis: calc((100% - 16px) / 2); }
    .nn-actions { flex-direction: column; align-items: stretch; }
    .nn-actions .nn-btn { width: 100%; }
    .nn-faq summary { padding: 16px 54px 16px 18px; font-size: 15.5px; }
    .nn-faq__a { padding: 0 18px 18px; }
    .nn-stats b { font-size: 24px; }
    .nn-stats > div { padding: 18px; }
    .nn-plan__speed { font-size: 42px; }
}
@media (prefers-reduced-motion: reduce) {
    .nn *, .nn *::before, .nn *::after { transition: none !important; }
}

/* =========================================================
   10. Top bar biru (disisipkan nexnet-ui.php ke container header desktop 47fe5f6)
       + header Elementor 982 menjadi bar putih penuh
   ========================================================= */
.nn-topbar { width: 100%; background: linear-gradient(90deg, #075e8c 0%, #0a84b8 60%, #109bd0 100%); color: #fff; font-family: var(--nn-font); font-size: 13.5px; line-height: 1.4; }
.nn-topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1248px; min-height: 44px; margin: 0 auto; padding: 0 24px; }
.nn-topbar ul { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0; padding: 0; list-style: none; }
.nn-topbar a { display: inline-flex; align-items: center; gap: 7px; color: #fff !important; text-decoration: none !important; }
.nn-topbar__info a:hover { text-decoration: underline !important; text-underline-offset: 3px; }
.nn-topbar svg { width: 15px; height: 15px; flex: none; }
.nn-topbar__act { display: flex; align-items: center; gap: 10px; }
.nn-topbar .nn-tb-btn { padding: 5px 16px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .8); font-family: var(--nn-head); font-size: 12.5px; font-weight: 600; transition: background-color .18s ease, color .18s ease; }
.nn-topbar .nn-tb-btn:hover { background: rgba(255, 255, 255, .14); }
.nn-topbar .nn-tb-btn--solid { background: #fff; border-color: #fff; color: var(--nn-deep) !important; }
.nn-topbar .nn-tb-btn--solid:hover { background: var(--nn-tint); }
.nn-tb-menu { position: relative; margin: 0; }
.nn-tb-menu summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; color: #fff; }
.nn-tb-menu summary::-webkit-details-marker { display: none; }
.nn-tb-menu summary::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.nn-tb-menu[open] summary { background: #fff; color: var(--nn-deep); }
.nn-tb-menu ul { position: absolute; right: 0; top: calc(100% + 8px); z-index: 1000; display: grid !important; gap: 2px !important; min-width: 240px; padding: 8px !important; border-radius: 12px; background: #fff; border: 1px solid var(--nn-line); box-shadow: 0 24px 48px -24px rgba(10, 43, 64, .5); }
.nn-tb-menu ul a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--nn-ink) !important; font-weight: 600; }
.nn-tb-menu ul a:hover { background: var(--nn-tint); color: var(--nn-blue) !important; }
.nn-tb-search { position: relative; margin: 0; }
.nn-tb-search label { display: block; margin: 0; }
.nn-topbar .nn-tb-search input[type="search"] { box-sizing: border-box; width: 34px; height: 32px; margin: 0; padding: 0 12px 0 32px; border-radius: 999px; border: 1.5px solid transparent; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E") 9px 50% / 15px no-repeat; color: #fff; font: inherit; cursor: pointer; transition: width .25s ease, background-color .25s ease, border-color .25s ease; -webkit-appearance: none; appearance: none; box-shadow: none; }
.nn-topbar .nn-tb-search input[type="search"]::placeholder { color: transparent; }
.nn-topbar .nn-tb-search input[type="search"]:focus { width: 210px; background-color: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .7); outline: none; cursor: text; }
.nn-topbar .nn-tb-search input[type="search"]:focus::placeholder { color: rgba(255, 255, 255, .75); }
.nn-tb-search button { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.nn-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* header kini bar solid: margin bawah negatif bawaan template (-165px desktop, -120px HP) yang dulu menarik konten
   ke bawah header mengambang dinolkan, jadi konten mulai tepat di bawah header (berlaku juga untuk spacer sticky) */
body .elementor-982 :is(.elementor-element-47fe5f6, .elementor-element-5cd7e2f) { margin-bottom: 0 !important; }
body .elementor-982 .elementor-element-47fe5f6 { padding: 0 !important; background: #fff !important; box-shadow: 0 1px 0 #e3eaf0, 0 12px 26px -24px rgba(10, 43, 64, .55) !important; }
@media (min-width: 1025px) {
    /* container desktop (disembunyikan Elementor di tablet/HP): top bar di atas, menu di bawahnya */
    body .elementor-982 .elementor-element-47fe5f6 { display: block !important; }
}
body .elementor-982 .elementor-element-47fe5f6 > .e-con-inner { max-width: 1248px !important; padding: 0 24px !important; }
body .elementor-982 .elementor-element-7c60a79 { min-height: 76px; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
body .elementor-982 .elementor-element-5cd7e2f { padding: 0 !important; background: #fff !important; box-shadow: 0 1px 0 #e3eaf0, 0 10px 22px -22px rgba(10, 43, 64, .55) !important; }
body .elementor-982 .elementor-element-5cd7e2f > .e-con-inner { padding: 0 !important; }
body .elementor-982 .elementor-element-9231e5c { margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
body .elementor-982 { font-family: var(--nn-font); }
body .elementor-982 .elementor-nav-menu--main .elementor-item { font-family: var(--nn-head) !important; font-size: 15px !important; font-weight: 500 !important; color: #26323d !important; }
body .elementor-982 .elementor-nav-menu--main .elementor-item:is(:hover, .highlighted, .elementor-item-active) { color: var(--nn-blue) !important; }
body .elementor-982 .elementor-nav-menu--main .elementor-item::after { background-color: var(--nn-blue) !important; height: 2px !important; }
body .elementor-982 .elementor-widget-button .elementor-button { background: linear-gradient(90deg, #0a6fa5, #109bd0) !important; border-radius: 999px !important; font-family: var(--nn-head) !important; font-weight: 600 !important; font-size: 15px !important; box-shadow: 0 10px 22px -14px rgba(10, 111, 165, .9); }
body .elementor-982 .elementor-widget-button .elementor-button:hover { background: var(--nn-deep) !important; }
body .elementor-982 .elementor-menu-toggle { color: var(--nn-ink) !important; background: var(--nn-tint) !important; border-radius: 10px !important; }
/* dropdown menu desktop: kartu rapi */
.elementor-nav-menu .ast-header-navigation-arrow { display: none !important; }
body .elementor-982 .elementor-nav-menu--main .elementor-nav-menu--dropdown { min-width: 250px !important; padding: 8px !important; border-radius: 12px !important; border: 1px solid var(--nn-line) !important; background: #fff !important; box-shadow: 0 24px 48px -24px rgba(10, 43, 64, .45) !important; margin-top: 10px !important; }
body .elementor-982 .elementor-nav-menu--main .elementor-nav-menu--dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
body .elementor-982 .elementor-nav-menu--main .elementor-nav-menu--dropdown .elementor-nav-menu--dropdown { margin: -8px 0 0 12px !important; }
body .elementor-982 .elementor-nav-menu--main .elementor-nav-menu--dropdown a.elementor-sub-item { padding: 11px 14px !important; border-radius: 8px; font-family: var(--nn-head) !important; font-size: 14.5px !important; font-weight: 600 !important; color: #26323d !important; background: transparent !important; border: 0 !important; }
body .elementor-982 .elementor-nav-menu--main .elementor-nav-menu--dropdown a.elementor-sub-item:is(:hover, :focus-visible, .highlighted, .elementor-item-active) { background: var(--nn-tint) !important; color: var(--nn-blue) !important; }
body .elementor-982 .elementor-nav-menu--main .elementor-nav-menu--dropdown .sub-arrow { transform: rotate(-90deg); opacity: .6; }

/* =========================================================
   11. Footer terang (shortcode [nn_footer] di template 987)
   ========================================================= */
body .elementor-987 .elementor-element-7751812 { background: transparent !important; padding: 0 !important; }
body .elementor-987 .elementor-element-7751812 > .e-con-inner, body .elementor-987 .elementor-element-7751812 .elementor-widget-shortcode, body .elementor-987 .elementor-element-7751812 .elementor-widget-container { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
.nnf { font-family: var(--nn-font); background: linear-gradient(160deg, #0b77ad 0%, #0a6fa5 45%, #075e8c 100%); color: rgba(255, 255, 255, .86); font-size: 14.5px; line-height: 1.7; }
.nnf__in { max-width: 1200px; margin: 0 auto; padding: 64px 24px 0; }
.nnf__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, .8fr)) minmax(0, 1.3fr); gap: 40px; padding-bottom: 44px; }
.nnf a { color: rgba(255, 255, 255, .86); text-decoration: none; }
.nnf a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.nnf p { margin: 0; }
.nnf__logo img { display: block; width: 176px; height: auto; margin-bottom: 18px; }
.nnf__about { max-width: 36ch; }
.nnf__lic { margin-top: 18px; padding: 14px 16px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .07); font-size: 13px; line-height: 1.6; }
.nnf__lic b { color: #fff; }
.nnf__h { margin: 0 0 14px !important; font-family: var(--nn-head); font-size: 15.5px; font-weight: 600; color: #fff; }
.nnf ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.nnf address { font-style: normal; }
.nnf address + .nnf__h, .nnf__col ul + .nnf__h { margin-top: 22px !important; }
.nnf__contact li { display: flex; gap: 10px; align-items: flex-start; }
.nnf__contact b { color: #fff; }
.nnf__contact svg { width: 17px; height: 17px; margin-top: 3px; color: #fff; opacity: .75; flex: none; }
.nnf__group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 20px 0 26px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 14px; }
.nnf__group p b { color: #fff; font-family: var(--nn-head); font-weight: 600; }
.nnf__group ul { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.nnf__bar { background: rgba(4, 40, 62, .35); color: rgba(255, 255, 255, .8); font-size: 13.5px; }
.nnf__bar .nnf__in { display: flex; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 16px 24px; }
.nnf__bar a { color: #fff; }
@media (max-width: 1024px) {
    .nnf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .nnf__in { padding: 48px 18px 0; }
    .nnf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
    .nnf__brand, .nnf__offices { grid-column: 1 / -1; }
    .nnf__bar .nnf__in { padding: 16px 18px; }
}

/* =========================================================
   12. Artikel & arsip (template Elementor 1134 & 1087) mengikuti tipografi baru
   ========================================================= */
body.single-post .elementor-widget-theme-post-content, body.single-post .elementor-widget-theme-post-title .elementor-heading-title, body:is(.archive, .blog) .elementor-widget-archive-posts { font-family: var(--nn-font) !important; }
body.single-post .elementor-widget-theme-post-title .elementor-heading-title.elementor-heading-title { font-family: var(--nn-head) !important; font-weight: 700 !important; letter-spacing: -.01em; color: var(--nn-ink) !important; }
body.single-post .elementor-widget-theme-post-content { color: var(--nn-text); font-size: 17px; line-height: 1.78; }
body.single-post .elementor-widget-theme-post-content :is(h2, h3, h4) { font-family: var(--nn-head) !important; color: var(--nn-ink) !important; letter-spacing: -.01em; }
body.single-post .elementor-widget-theme-post-content h2 { font-size: 1.6rem; font-weight: 700; margin: 1.6em 0 .6em; }
body.single-post .elementor-widget-theme-post-content h3 { font-size: 1.28rem; font-weight: 700; margin: 1.4em 0 .5em; }
body.single-post .elementor-widget-theme-post-content h4 { font-size: 1.08rem; font-weight: 700; margin: 1.2em 0 .4em; }
body.single-post .elementor-widget-theme-post-content a { color: var(--nn-blue); }
body.single-post .elementor-widget-theme-post-content img { border-radius: 12px; height: auto; }
@media (max-width: 767px) {
    body.single-post .elementor-widget-theme-post-content table { display: block; overflow-x: auto; }
}
/* jarak atas lama (untuk header mengambang yang menutupi konten) disesuaikan dengan header solid */
body .elementor-1134 .elementor-element-bea0a90 { margin-top: 40px !important; }
body .elementor-1087 .elementor-element-565f794 > .e-con-inner { padding-top: 80px !important; }
@media (max-width: 767px) {
    body .elementor-1134 .elementor-element-bea0a90 { margin-top: 20px !important; }
    body .elementor-1087 .elementor-element-565f794 > .e-con-inner { padding-top: 48px !important; }
}
/* banner promo samping (fixed) menutupi judul & isi artikel di layar < 1280px */
@media (max-width: 1279px) {
    body.single-post .elementor-element.elementor-element-49bca82,
    body.single-post .elementor-element.elementor-element-fbaaab5 { display: none !important; }
}
@media (max-width: 1024px) {
    body:is(.page-id-802, .page-id-804) .site-content > .ast-container { padding-top: 24px; }
}

/* =========================================================
   13. Menu mobile: panel kartu di bawah header
   ========================================================= */
@media (max-width: 1024px) {
    body .elementor-982 .elementor-element:is(.elementor-element-753ee7b, .elementor-element-fade5a8) nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
        position: fixed !important; top: var(--nn-mtop, 76px) !important; left: 10px !important; right: 10px !important; width: auto !important; max-width: none !important;
        margin: 0 !important; padding: 8px; background: #fff !important; border: 1px solid var(--nn-line); border-radius: 14px;
        box-shadow: 0 30px 60px -30px rgba(10, 43, 64, .55); max-height: calc(100vh - 96px); overflow-y: auto;
    }
    body .elementor-982 .elementor-element:is(.elementor-element-753ee7b, .elementor-element-fade5a8) nav.elementor-nav-menu--dropdown a {
        justify-content: space-between !important; min-height: 48px; padding: 12px 14px !important; border-radius: 8px; background: transparent !important;
        font-family: var(--nn-head) !important; font-size: 16px !important; font-weight: 500 !important; color: #26323d !important; text-align: left; border-inline-start: 0 !important;
    }
    body .elementor-982 .elementor-element:is(.elementor-element-753ee7b, .elementor-element-fade5a8) nav.elementor-nav-menu--dropdown > ul > li + li { border-top: 1px solid #e8eff4; }
    body .elementor-982 .elementor-element:is(.elementor-element-753ee7b, .elementor-element-fade5a8) nav.elementor-nav-menu--dropdown a:is(:hover, :focus-visible, .highlighted, .elementor-item-active) { color: var(--nn-blue) !important; background: var(--nn-tint) !important; }
    body .elementor-982 .elementor-element:is(.elementor-element-753ee7b, .elementor-element-fade5a8) nav.elementor-nav-menu--dropdown ul.sub-menu { margin: 2px 0 8px 12px; padding: 4px; background: var(--nn-soft); border-radius: 10px; border-left: 2px solid var(--nn-tint); }
    body .elementor-982 .elementor-element:is(.elementor-element-753ee7b, .elementor-element-fade5a8) nav.elementor-nav-menu--dropdown ul.sub-menu a { min-height: 44px; font-size: 15px !important; font-weight: 500 !important; }
    body .elementor-982 nav.elementor-nav-menu--dropdown .sub-arrow { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 0; border-radius: 8px; font-size: 12px; color: var(--nn-blue); background: var(--nn-tint); transform: none; opacity: 1; transition: transform .2s ease; }
    body .elementor-982 nav.elementor-nav-menu--dropdown a.highlighted .sub-arrow { transform: rotate(180deg); }
}

/* widget WhatsApp: label "Hubungi Kami" disembunyikan di HP (ikon tetap) agar tidak menutupi konten */
@media (max-width: 767px) {
    .fik-wa-widget .fik-wa-widget-label { display: none !important; }
}
.elementor-nav-menu a:focus-visible, .elementor-button:focus-visible { outline: 3px solid rgba(16, 155, 208, .5); outline-offset: 2px; }

/* =========================================================
   14. Palet & font global (Astra + kit Elementor 5): Blog, artikel, arsip, Daftar Isi ikut seragam
   ========================================================= */
body.elementor-kit-5 {
    --ast-global-color-0: #0a84b8; --ast-global-color-1: #086a99; --ast-global-color-2: #16222d; --ast-global-color-3: #3b4753; --ast-global-color-4: #edf6fb; --ast-global-color-6: #dde6ed;
    --e-global-color-astglobalcolor0: #0a84b8; --e-global-color-astglobalcolor1: #086a99; --e-global-color-astglobalcolor2: #16222d; --e-global-color-astglobalcolor3: #3b4753; --e-global-color-astglobalcolor4: #edf6fb; --e-global-color-astglobalcolor6: #dde6ed;
    --e-global-typography-primary-font-family: "Poppins"; --e-global-typography-secondary-font-family: "Poppins"; --e-global-typography-text-font-family: "Open Sans"; --e-global-typography-accent-font-family: "Open Sans";
}
body.elementor-kit-5, body.elementor-kit-5 :is(input, select, textarea, .elementor-post__meta-data) { font-family: var(--nn-font) !important; }
body.elementor-kit-5 :is(h1, h2, h3, h4, h5, h6, button, .elementor-heading-title, .elementor-post__title, .elementor-post__read-more, .elementor-button) { font-family: var(--nn-head) !important; letter-spacing: -.01em; }
body:is(.archive, .blog, .search) .elementor-1087 .elementor-element-565f794 { background: linear-gradient(110deg, #0a2b40 0%, #075e8c 60%, #0a84b8 100%) !important; }
body:is(.archive, .blog, .search) .elementor-post { border-radius: 12px !important; overflow: hidden; border: 1px solid var(--nn-line) !important; box-shadow: none !important; transition: transform .2s ease, box-shadow .2s ease; }
body:is(.archive, .blog, .search) .elementor-post:hover { transform: translateY(-2px); box-shadow: var(--nn-shadow) !important; }
body:is(.archive, .blog, .search) .elementor-post__title a { color: var(--nn-ink) !important; font-weight: 700 !important; letter-spacing: -.01em; }
body:is(.archive, .blog, .search) .elementor-post__read-more { color: var(--nn-blue) !important; font-weight: 700 !important; }
body:is(.archive, .blog, .search) .elementor-post__badge { background: var(--nn-blue) !important; font-family: var(--nn-font) !important; font-weight: 700 !important; }

/* =========================================================
   15. Promo di template artikel 1134 ([nn_promo_post], [nn_promo_side])
   ========================================================= */
.nn-pp { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: 14px; background: linear-gradient(100deg, #075e8c 0%, #0a84b8 70%, #109bd0 100%); color: #e3f1f9 !important; text-decoration: none !important; font-family: var(--nn-font); transition: transform .2s ease; }
.nn-pp:hover { transform: translateY(-2px); }
.nn-pp__tag { flex: none; padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--nn-deep); font-size: 12px; font-weight: 700; }
.nn-pp__main { display: grid; gap: 2px; flex: 1; min-width: 0; font-size: 14px; color: #dcedf7; }
.nn-pp__main b { color: #fff; font-size: 17px; font-weight: 800; }
.nn-pp__btn { flex: none; padding: 10px 18px; border-radius: 999px; background: #fff; color: var(--nn-deep); font-size: 14px; font-weight: 700; }
@media (max-width: 767px) {
    .nn-pp { flex-wrap: wrap; gap: 12px; }
    .nn-pp__btn { width: 100%; text-align: center; }
}
.nn-ps { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 150px; padding: 18px 16px; border-radius: 16px; background: linear-gradient(170deg, #0a84b8, #075e8c); color: #e3f1f9 !important; text-decoration: none !important; font-family: var(--nn-font); box-shadow: 0 24px 48px -26px rgba(10, 43, 64, .6); }
.nn-ps img { width: 100%; height: auto; }
.nn-ps__t { font-size: 15px; font-weight: 800; line-height: 1.25; color: #fff; }
.nn-ps__p { display: grid; font-size: 20px; font-weight: 800; line-height: 1.1; color: #fff; }
.nn-ps__p small { font-size: 12px; font-weight: 600; color: #bfeafc; }
.nn-ps__l { font-size: 12.5px; line-height: 1.5; color: #dcedf7; }
.nn-ps__btn { align-self: stretch; padding: 9px 12px; border-radius: 999px; background: #fff; color: var(--nn-deep); font-size: 13.5px; font-weight: 800; text-align: center; }