/* ==================================================
   Classic (Okt 2026): komponen tambahan di atas custom.css situs lama.
   Palet & font mengikuti situs lama: emas #E1BF02, navy #1C3451, latar #F2F5F9, Lexend + Onest.
================================================== */
:root {
	--cl-navy: #1C3451;
	--cl-navy-deep: #0f2239;
	--cl-gold: #E1BF02;
	--cl-mist: #F2F5F9;
	--cl-text: #65758B;
	--cl-ink: #1C3451;
	--cl-line: rgba(28, 52, 81, .12);
}

/* Mandarin & Korea: font CJK dulu supaya huruf tidak jatuh ke font sistem acak. */
body.lang-zh { --default-font: "Onest", "Noto Sans SC", sans-serif; --heading-font: "Lexend", "Noto Sans SC", sans-serif; }
body.lang-ko { --default-font: "Onest", "Noto Sans KR", sans-serif; --heading-font: "Lexend", "Noto Sans KR", sans-serif; }
body.lang-zh .sis-section-title h2, body.lang-ko .sis-section-title h2,
body.lang-zh .sis-hero h1, body.lang-ko .sis-hero h1 { word-break: keep-all; overflow-wrap: anywhere; }

.cl-skip { position: absolute; left: -9999px; top: 8px; z-index: 3000; background: #fff; color: var(--cl-ink); padding: 10px 16px; border-radius: 10px; }
.cl-skip:focus { left: 16px; }

/* Judul hero: "Local Expertise" tebal + miring (permintaan Abex). */
.sis-hero h1 b { font-weight: 800; font-style: italic; }

/* ---------- Dropdown bahasa ---------- */
.lang-dd { position: relative; z-index: 30; }
.lang-dd summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 10px 16px; border-radius: 50px; background: #FFFFFF26; color: #fff; font-family: var(--heading-font); font-weight: 600; font-size: 15px; line-height: 1; white-space: nowrap; user-select: none; }
.lang-dd summary::-webkit-details-marker { display: none; }
.lang-dd summary:hover, .lang-dd[open] summary { background: rgba(255,255,255,.28); }
.lang-dd summary:focus-visible { outline: 2px solid var(--cl-gold); outline-offset: 2px; }
.lang-dd .lang-chev { font-size: 11px; transition: transform .2s; }
.lang-dd[open] .lang-chev { transform: rotate(180deg); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px; margin: 0; padding: 6px; list-style: none; background: #fff; border-radius: 16px; box-shadow: 0 18px 40px rgba(7,18,32,.22); }
.lang-menu a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--cl-ink); font-weight: 500; }
.lang-menu a:hover { background: var(--cl-mist); color: var(--cl-ink); }
.lang-menu a[aria-current] { background: #fff7cc; }
.lang-menu .code { min-width: 44px; font-family: var(--heading-font); font-weight: 700; color: var(--cl-ink); }
.lang-menu .fa-check { margin-left: auto; color: #8a7300; }
.lang-dd.up .lang-menu { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; }
.lang-mobile { display: none; }
@media only screen and (max-width: 1024px) {
	.lang-mobile { display: block; margin-left: auto; }
	.lang-mobile summary { padding: 9px 13px; font-size: 14px; background: rgba(15,34,57,.55); backdrop-filter: blur(8px); }
}
.sisf-widget-holder .lang-dd summary { padding: 12px 16px; }
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
	.sisf-centered-header-wrapper .navbar-nav .nav-link { padding-left: 10px !important; padding-right: 10px !important; font-size: 15px; }
	.header-btn .sis-btn-default { padding-left: 16px; padding-right: 16px; }
}
.lang-footer summary { background: rgba(255,255,255,.12); }

/* ---------- Gelembung WhatsApp (HP & tablet) ---------- */
.wa-float { display: none; }
@media only screen and (max-width: 1024px) {
	.wa-float { position: fixed; right: 16px; bottom: calc(72px + env(safe-area-inset-bottom) + 14px); z-index: 1150; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #1fa855; color: #fff; font-size: 30px; box-shadow: 0 10px 26px rgba(7,18,32,.32); transition: transform .4s cubic-bezier(.2,1.35,.38,1), opacity .25s; }
	.wa-float:hover { color: #fff; background: #1a9049; }
	body.mobile-bottom-nav-hidden .wa-float { transform: translateY(calc(72px + 14px)); }
	body.mobile-bottom-menu-open .wa-float { opacity: 0; pointer-events: none; }
	/* Tombol kembali-ke-atas lama menabrak gelembung WA: taruh di atasnya (aturan HP lama menyasar pembungkusnya, bukan tombolnya). */
	.sis-back-to-top { right: 21px; bottom: calc(72px + env(safe-area-inset-bottom) + 14px + 56px + 12px); }
}

/* ---------- Video hero: tombol jeda/putar ---------- */
.cl-video-toggle { position: absolute; z-index: 5; right: 24px; top: 120px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.45); background: rgba(15,34,57,.45); color: #fff; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); }
.cl-video-toggle:hover { background: rgba(15,34,57,.7); }
.cl-video-toggle .vt-play { display: none; }
.cl-video-toggle[data-state="paused"] .vt-play { display: inline; }
.cl-video-toggle[data-state="paused"] .vt-pause { display: none; }
@media only screen and (max-width: 1024px) { .cl-video-toggle { top: auto; bottom: 18px; right: auto; left: 18px; } }

/* ---------- Kotak angka: 5 item, ikon & kata ---------- */
.cl-counters-5 .sis-counter-item { gap: 16px !important; }
.cl-counters-5 .sis-e-counter-image { flex-shrink: 0; }
.cl-example .sisf-e-media-image img { height: 263px; object-fit: cover; }
.cl-counter-icon { font-size: 40px; line-height: 1; }
.cl-counter-word { font-size: 34px; line-height: 1.1; }
@media only screen and (min-width: 1200px) { .cl-counters-5 .sis-e-counter-image img { width: 52px; } }

/* ---------- Band gelap (Journey, kuis) ---------- */
.cl-band { background: linear-gradient(180deg, #1C3451 0%, #0f2239 100%); padding: 70px 0; margin-top: 0; margin-bottom: 0; position: relative; overflow: hidden; }
.cl-band::after { content: ""; position: absolute; inset: auto -10% -40% auto; width: 60%; height: 80%; background: radial-gradient(closest-side, rgba(225,191,2,.12), transparent); pointer-events: none; }
.cl-band .container { position: relative; z-index: 1; }

/* ---------- Journey to the Summit ---------- */
.journey { margin-top: 10px; }
.journey-chart { position: relative; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 10px 6px 0; touch-action: pan-y; }
.journey-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.journey-chart .grid line { stroke: rgba(255,255,255,.1); stroke-width: 1; }
.journey-chart .grid text { fill: rgba(255,255,255,.66); font-size: 14px; font-family: var(--default-font); }
.journey-chart .area { fill: url(#jg-area); }
.journey-chart .trail { fill: none; stroke: var(--cl-gold); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.journey-chart .pt { cursor: pointer; outline: none; }
.journey-chart .pt .hit { fill: transparent; }
.journey-chart .pt .dot { fill: #0f2239; stroke: var(--cl-gold); stroke-width: 3; transition: r .2s; }
.journey-chart .pt.active .dot, .journey-chart .pt:focus-visible .dot { fill: var(--cl-gold); }
.journey-chart .pt-label { fill: #fff; font-size: 14px; font-weight: 600; text-anchor: middle; font-family: var(--heading-font); pointer-events: none; }
.journey-chart .cursor line { stroke: rgba(255,255,255,.4); stroke-dasharray: 4 4; }
.journey-chart .cursor circle { fill: var(--cl-gold); }
.journey-tip { position: absolute; z-index: 4; transform: translate(-50%, calc(-100% - 18px)); width: 220px; background: #fff; color: var(--cl-ink); border-radius: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.45; box-shadow: 0 14px 34px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: opacity .2s; }
.journey-tip.show { opacity: 1; }
.journey-tip b { display: block; font-family: var(--heading-font); }
.journey-tip .alt { color: #8a7300; font-weight: 700; }
.journey-tip .approx { color: var(--cl-text); font-size: 12px; }
.journey-tip .txt { margin-top: 6px; color: var(--cl-text); }
.journey-stops { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.journey-stops button { text-align: left; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 12px; color: #fff; display: flex; flex-direction: column; gap: 2px; transition: border-color .2s, background .2s; }
.journey-stops button:hover, .journey-stops button.active { border-color: var(--cl-gold); background: rgba(225,191,2,.1); }
.journey-stops small { color: var(--cl-gold); font-weight: 600; }
.journey-stops strong { font-family: var(--heading-font); font-size: 15px; line-height: 1.3; }
.journey-stops span { color: rgba(255,255,255,.7); font-size: 14px; }
.journey-hint { color: rgba(255,255,255,.7); font-size: 14px; margin: 14px 0 0; }
@media only screen and (max-width: 991px) { .journey-stops { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media only screen and (max-width: 575px) {
	.journey-stops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.journey-chart .grid text { font-size: 30px; }
	.journey-chart .pt-label { font-size: 30px; }
	.journey-tip { width: 200px; font-size: 13px; }
}

/* ---------- Jadwal keberangkatan ---------- */
.cl-departures { background: var(--cl-mist); }
.dep-wrap { padding: 8px 20px; box-shadow: 0 10px 30px rgba(28,52,81,.06); }
.dep-table { width: 100%; border-collapse: collapse; }
.dep-table th { text-align: left; font-family: var(--heading-font); font-size: 14px; color: var(--cl-text); font-weight: 500; padding: 16px 12px; border-bottom: 1px solid var(--cl-line); }
.dep-table td { padding: 18px 12px; border-bottom: 1px solid var(--cl-line); color: var(--cl-ink); vertical-align: middle; }
.dep-table tr:last-child td { border-bottom: 0; }
.dep-table .dep-date { font-family: var(--heading-font); font-weight: 700; font-size: 18px; }
.dep-status { display: inline-block; padding: 6px 14px; border-radius: 50px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.dep-status.request { background: #fff7cc; color: #6b5a00; }
.dep-status.interest { background: #e3ecf7; color: var(--cl-navy); }
.dep-status.open { background: #dcf3e4; color: #145c33; }
.dep-cta { text-align: right; }
.dep-cta .sis-btn-default { white-space: nowrap; }
@media only screen and (max-width: 991px) {
	.dep-wrap { padding: 4px 16px; }
	.dep-table thead { display: none; }
	.dep-table, .dep-table tbody, .dep-table tr, .dep-table td { display: block; width: 100%; }
	.dep-table tr { padding: 16px 0; border-bottom: 1px solid var(--cl-line); }
	.dep-table tr:last-child { border-bottom: 0; }
	.dep-table td { border: 0; padding: 4px 0; }
	.dep-table td[data-label]::before { content: attr(data-label) ": "; color: var(--cl-text); font-size: 14px; }
	.dep-cta { text-align: left; padding-top: 12px !important; }
}

/* ---------- Catatan kecil, badge contoh, draft ---------- */
.cl-note { color: var(--cl-text); font-size: 15px; margin-top: 18px; }
.cl-example { position: relative; }
.cl-example-badge { position: absolute; right: 14px; top: 14px; z-index: 2; background: var(--cl-navy); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 50px; border: 1px dashed rgba(255,255,255,.6); }
.cl-example-badge.static { position: static; display: inline-block; margin-left: 6px; vertical-align: middle; }
.cl-example-note { background: #fff; border: 1px dashed rgba(28,52,81,.3); border-radius: 14px; padding: 12px 16px; }
.cl-draft { display: inline-block; background: rgba(225,191,2,.14); color: #fff; border: 1px solid rgba(225,191,2,.5); border-radius: 12px; padding: 10px 14px; font-size: 14px; }
.cl-draft.dark { color: #5b4b00; background: #fff7cc; border-color: #e9d46a; }
.cl-tag { display: inline-block; background: var(--cl-gold); color: var(--cl-navy); font-weight: 700; font-size: 13px; padding: 4px 12px; border-radius: 50px; }
.cl-meta { color: var(--cl-text); font-size: 14px; }

/* ---------- Kotak placeholder mitra B2B ---------- */
.cl-partners { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 24px 0 14px; }
.cl-partner-tile { aspect-ratio: 16 / 9; border: 1px dashed rgba(255,255,255,.45); border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: rgba(255,255,255,.75); background: rgba(255,255,255,.05); font-size: 14px; }
.cl-partner-tile i { font-size: 22px; color: var(--cl-gold); }
.cl-partners-note { font-size: 14px; opacity: .85; }
#b2b .sis-page-list-background, .cl-cert .sis-page-list-background { margin-bottom: 0; padding-bottom: 60px; }
#b2b .cl-partners { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media only screen and (max-width: 991px) { #b2b .cl-partners { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Ikon Font Awesome di daftar gaya lama ---------- */
.cl-fa-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--cl-mist); color: var(--cl-navy); font-size: 26px; }
.cl-environment .cl-fa-icon { background: #e7f3e9; color: #1d6b39; }

/* ---------- Kartu tahap / area (base camp, readiness, founding) ---------- */
.cl-stage { background: #fff; border-radius: 20px; padding: 26px; margin-bottom: 24px; height: calc(100% - 24px); box-shadow: 0 10px 30px rgba(28,52,81,.05); }
.cl-stage-num { display: inline-flex; width: 46px; height: 46px; border-radius: 50%; align-items: center; justify-content: center; background: var(--cl-gold); color: var(--cl-navy); font-family: var(--heading-font); font-weight: 700; margin-bottom: 14px; }
.cl-stage h3 { font-size: 21px; line-height: 1.35; color: var(--cl-ink); margin-bottom: 8px; }
.cl-stage p { margin: 0; }

/* ---------- Halaman trip: sidebar, fakta, perlengkapan ---------- */
@media only screen and (min-width: 992px) { .cl-sticky { position: sticky; top: 24px; } }
.sisf-sis-list-item a[href^="#"] { color: inherit; }
.cl-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; background: #eef3fb; border-radius: 20px; padding: 10px 22px; }
.cl-fact { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid rgba(28,52,81,.08); }
.cl-fact:nth-last-child(-n+2) { border-bottom: 0; }
.cl-fact i { font-size: 26px; color: var(--cl-navy); width: 34px; text-align: center; margin-top: 4px; }
.cl-fact small { display: block; color: var(--cl-text); font-size: 15px; }
.cl-fact strong { display: block; color: var(--cl-ink); font-family: var(--heading-font); font-size: 18px; font-weight: 600; line-height: 1.35; }
@media only screen and (max-width: 575px) { .cl-facts { grid-template-columns: 1fr; } .cl-fact:nth-last-child(2) { border-bottom: 1px solid rgba(28,52,81,.08); } }
.cl-excluded .cl-x { color: #b04848; }
.cl-callout { background: #fff; border-left: 4px solid var(--cl-gold); border-radius: 16px; padding: 22px 24px; }
.cl-callout h3 { font-size: 21px; color: var(--cl-ink); }
.cl-callout p:last-child { margin-bottom: 0; }
.cl-h3 { font-size: 20px; color: var(--cl-ink); }
.cl-gear { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 10px; }
.cl-gear-cat { background: #fff; border-radius: 20px; padding: 22px; }
.cl-gear-cat.is-technical { grid-column: 1 / -1; border: 2px solid var(--cl-gold); }
.cl-gear-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.cl-gear-head h3 { margin: 0; font-size: 20px; color: var(--cl-ink); }
.cl-gear-icon { width: 54px; height: 54px; border-radius: 50%; background: var(--cl-mist); display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--cl-navy); flex-shrink: 0; }
.cl-gear-cat.is-technical .cl-gear-icon { background: var(--cl-gold); }
.cl-gear-note { font-size: 15px; background: var(--cl-mist); border-radius: 12px; padding: 10px 12px; }
.cl-gear ul { list-style: none; padding: 0; margin: 0; }
.cl-gear li { display: flex; gap: 10px; padding: 6px 0; color: var(--cl-ink); line-height: 1.5; }
.cl-gear li i { color: #2c6fd1; margin-top: 4px; }
.cl-gear-cat.is-technical ul { columns: 2; column-gap: 28px; }
@media only screen and (max-width: 767px) { .cl-gear { grid-template-columns: 1fr; } .cl-gear-cat.is-technical ul { columns: 1; } }

/* ---------- Galeri base camp ---------- */
.cl-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 220px; gap: 14px; }
.cl-gallery a { display: block; border-radius: 18px; overflow: hidden; }
.cl-gallery a.wide { grid-column: span 2; }
.cl-gallery figure, .cl-gallery img { width: 100%; height: 100%; margin: 0; }
.cl-gallery img { object-fit: cover; }
@media only screen and (max-width: 767px) { .cl-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; } }

/* ---------- Kuis Readiness ---------- */
.quiz { padding: 28px; min-height: 340px; }
.quiz-progress { height: 6px; background: var(--cl-mist); border-radius: 6px; overflow: hidden; margin-bottom: 18px; }
.quiz-progress i { display: block; height: 100%; background: var(--cl-gold); transition: width .3s; }
.quiz-q small { color: var(--cl-text); }
.quiz-q h3 { color: var(--cl-ink); font-size: 24px; line-height: 1.35; margin: 6px 0 18px; }
.quiz-opts { display: grid; gap: 10px; }
.quiz-opts button { text-align: left; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--cl-line); background: var(--cl-mist); color: var(--cl-ink); font-weight: 500; transition: border-color .2s, background .2s; }
.quiz-opts button:hover, .quiz-opts button[aria-pressed="true"] { border-color: var(--cl-gold); background: #fff7cc; }
.quiz-nav { margin-top: 14px; }
.quiz-back { background: none; border: 0; color: var(--cl-navy); font-weight: 600; padding: 6px 0; text-decoration: underline; }
.quiz-eyebrow { color: #8a7300; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.score-ring { display: flex; align-items: center; gap: 18px; margin: 10px 0 12px; }
.score-ring b { font-family: var(--heading-font); font-size: 52px; color: var(--cl-ink); line-height: 1; }
.score-ring .of { font-size: 20px; color: var(--cl-text); }
.score-ring .tier { background: var(--cl-navy); color: #fff; padding: 8px 16px; border-radius: 50px; font-weight: 700; }
.quiz-result p, .quiz-result li { color: var(--cl-text); }
.quiz-result h3 { color: var(--cl-ink); font-size: 21px; margin-top: 18px; }
.quiz .mail-alt { margin: 10px 0 0; text-align: center; }
.quiz .form-hint { font-size: 13px; color: var(--cl-text); margin-top: 12px; }
.quiz label { color: var(--cl-ink); font-weight: 500; margin-bottom: 6px; display: block; }

/* ---------- Form ---------- */
.cl-form .form-control, .cl-form .form-select { margin-bottom: 4px !important; min-height: 50px; }
.cl-form .form-group { margin-bottom: 14px; }
.cl-form label { color: var(--cl-ink); font-weight: 500; }
.cl-form .err { color: #c03a3a; font-size: 14px; min-height: 0; }
.cl-form .field.invalid .form-control { border-color: #c03a3a !important; box-shadow: 0 0 0 2px rgba(192,58,58,.15); }
.cl-form button.sis-btn-default { border: 0; }
.cl-mail-alt { color: var(--cl-navy); text-decoration: underline; font-weight: 600; }
.cl-form-hint { font-size: 14px; color: var(--cl-text); margin: 14px 0 0; }

/* ---------- Teks panjang (legal, artikel) ---------- */
.cl-legal, .cl-article { background: var(--cl-mist); }
.cl-prose { padding: 40px; color: var(--cl-text); }
.cl-prose h2 { font-size: 26px; line-height: 1.3; color: var(--cl-ink); margin: 28px 0 12px; }
.cl-prose p, .cl-prose li { line-height: 1.75; }
.cl-prose .lead { font-size: 19px; color: var(--cl-ink); }
.cl-prose ol { padding-left: 1.2em; }
.cl-updated { color: var(--cl-ink); font-weight: 600; }
.cl-source { margin-top: 24px; padding: 14px 16px; background: var(--cl-mist); border-radius: 12px; }
@media only screen and (max-width: 767px) { .cl-prose { padding: 24px 20px; } .cl-prose h2 { font-size: 22px; } }

/* ---------- Filter Journal ---------- */
.cl-filter { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.cl-filter button { border: 1px solid var(--cl-line); background: #fff; color: var(--cl-ink); padding: 10px 20px; border-radius: 50px; font-weight: 600; }
.cl-filter button[aria-pressed="true"] { background: var(--cl-navy); color: #fff; border-color: var(--cl-navy); }

/* ---------- Kontak: dua nomor WA ---------- */
.footer-contacts { row-gap: 14px !important; }
.footer-contacts .sisf-contact-box { padding-left: 0 !important; }
.cl-faq-contacts .sisf-contact-box a, .cl-faq-contacts .sisf-contact-box span.sis-title { font-size: 16px; }
.cl-closing-contacts a { color: #fff; text-decoration: underline; }
.cl-desk-contacts .sisf-contact-box { margin-bottom: 12px; }
.cl-desk-contacts .sis-title { color: #fff; }

/* ---------- Penutup ---------- */
.cl-closing .sisf-m-title { margin-bottom: 14px; }
.cl-closing .sis-btn-default .fa-whatsapp { font-size: 18px; }

/* ==================================================
   Bug situs lama: di 768-1024 px menu desktop tersembunyi tapi bottom nav belum muncul (tanpa navigasi).
   Salinan aturan bottom nav lama (custom.css baris 119-523, aslinya hanya <=767 px) untuk tablet.
================================================== */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	html,
	body.site-mobile-nav-enabled {
		margin: 0;
		padding: 0;
		background-color: var(--secondary-color);
	}

	body.site-mobile-nav-enabled {
		padding-bottom: calc(72px + env(safe-area-inset-bottom));
	}

	.site-mobile-nav-enabled #sisf-page-header {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		margin: 0 !important;
		border-radius: 0 !important;
		z-index: 1000;
	}

	.site-mobile-nav-enabled #sisf-page-header-inner {
		padding: 10px 18px;
		border-radius: 0 !important;
		background: linear-gradient(180deg, rgb(15 34 57 / 26%) 0%, rgb(15 34 57 / 22%) 72%, rgba(15, 34, 57, 0) 100%);
	}

	.site-mobile-nav-enabled #sisf-page-header-inner > .container {
		width: 100%;
		max-width: none;
		padding: 0;
	}

	.site-mobile-nav-enabled #sisf-page-header .navbar-toggle,
	.site-mobile-nav-enabled #sisf-page-header .responsive-menu,
	.site-mobile-nav-enabled #sisf-page-header .slicknav_menu {
		display: none !important;
	}

	.site-mobile-nav-enabled .navbar-brand.mobile-block.sisf-header-logo-link {
		display: flex !important;
	}

	.site-mobile-nav-enabled .sisf-header-logo-link.navbar-brand img {
		width: 142px;
		height: auto;
	}

	.home-mobile-first .sis-hero.home-page,
	.home-mobile-first .sis-hero.home-page .hero-slider-layout,
	.home-mobile-first .sis-hero.home-page .hero-swiper,
	.home-mobile-first .sis-hero.home-page .hero-slide {
		width: 100%;
		height: 100vh;
		height: 100svh;
		min-height: 100vh !important;
		min-height: 100svh !important;
		margin: 0 !important;
		border-radius: 0 !important;
	}

	.home-mobile-first .sis-hero.home-page .hero-slide {
		align-items: stretch;
		padding: 0 !important;
	}

	.home-mobile-first .sis-hero.home-page .hero-slide > .container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 100%;
		max-width: none;
		padding: 78px 20px calc(82px + env(safe-area-inset-bottom));
	}

	.home-mobile-first .sis-hero.home-page .hero-slide > .container > .row:first-child {
		flex: 0 0 auto;
	}

	.home-mobile-first .sis-hero.home-page .hero-slide > .container > .row:first-child > .col-xl-2 {
		display: none !important;
	}

	.home-mobile-first .sis-hero.home-page .hero-slide > .container > .row:first-child > .col-xl-8 {
		width: 100%;
		padding: 0;
	}

	.home-mobile-first .hero-content.pb-0 {
		margin: 0 !important;
		padding: 0 !important;
	}

	.home-mobile-first .hero-content .sis-section-title {
		margin: 0;
	}

	.home-mobile-first .hero-content .sis-section-title .sisf-subtitle {
		margin: 0 0 14px;
		padding: 4px;
		font-size: 10px;
		line-height: 17px;
		background: rgba(225, 191, 2, 0.28);
		border-color: rgba(225, 191, 2, 0.36);
	}

	.home-mobile-first .hero-content .sis-section-title h1 {
		margin-bottom: 14px;
		font-size: clamp(29px, 8.3vw, 38px);
		line-height: 1.08;
		letter-spacing: -0.045em;
	}

	.home-mobile-first .hero-content .sis-section-title p {
		margin: 0;
		padding: 0 0 18px;
		font-size: 14px;
		line-height: 21px;
	}

	.home-mobile-first .hero-content .button-group {
		gap: 9px !important;
	}

	.home-mobile-first .hero-content .button-group .sis-btn-default {
		min-height: 42px;
		padding: 9px 15px;
		font-size: 12px;
		white-space: nowrap;
	}

	.home-mobile-first .sisf-content-bottom-side {
		margin-top: clamp(18px, 3.2svh, 32px);
	}

	.home-mobile-first .sisf-content-bottom-side > .row {
		justify-content: center;
	}

	.home-mobile-first .sisf-content-bottom-side > .row > .col-lg-3 {
		width: 100%;
		max-width: 390px;
		padding: 0;
	}

	.home-mobile-first .sisf-content-bottom-side > .row > .col-lg-9 {
		display: none !important;
	}

	.home-mobile-first .sisf-hero-end-content {
		margin: 0;
	}

	.home-mobile-first .sisf-hero-end-content .sisf-e-inner {
		padding: 16px !important;
		border: 1px solid rgba(255, 255, 255, 0.16);
		background: rgba(28, 52, 81, 0.88);
		backdrop-filter: blur(16px);
		box-shadow: 0 14px 36px rgba(0, 0, 0, 0.2);
	}

	.home-mobile-first .sisf-content-bottom-side .sisf-hero-end-content .sisf-e-users {
		margin-bottom: 9px !important;
	}

	.home-mobile-first .sisf-content-bottom-side .sisf-hero-end-content .sisf-e-users img {
		width: 112px;
	}

	.home-mobile-first .sisf-hero-end-content .sisf-e-title h2 {
		font-size: 19px !important;
		line-height: 24px;
	}

	.home-mobile-first .sisf-hero-end-content .sis-e-text p {
		font-size: 13px;
		line-height: 20px;
	}

	.mobile-bottom-nav {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1200;
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		min-height: calc(72px + env(safe-area-inset-bottom));
		padding: 7px 6px calc(7px + env(safe-area-inset-bottom));
		border-top: 1px solid rgba(255, 255, 255, 0.12);
		background: rgba(15, 34, 57, 0.97);
		box-shadow: 0 -14px 34px rgba(7, 18, 32, 0.3);
		backdrop-filter: blur(18px);
		transform: translateY(0);
		transform-origin: center bottom;
		will-change: transform, opacity;
		transition: transform 0.46s cubic-bezier(0.2, 1.35, 0.38, 1), opacity 0.28s ease, box-shadow 0.28s ease;
	}

	body.mobile-bottom-nav-hidden .mobile-bottom-nav {
		transform: translateY(calc(100% + 14px)) scaleX(0.96);
		opacity: 0;
		box-shadow: none;
		pointer-events: none;
	}

	.mobile-bottom-nav__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-width: 0;
		padding: 4px 2px;
		border: 0;
		background: transparent;
		color: rgba(255, 255, 255, 0.68);
		font-family: var(--default-font);
		font-size: 10px;
		font-weight: 650;
		line-height: 13px;
		text-align: center;
		cursor: pointer;
		transition: color 0.25s ease, transform 0.25s ease;
	}

	.mobile-bottom-nav__item i {
		display: grid;
		place-items: center;
		width: 32px;
		height: 28px;
		border-radius: 12px;
		font-size: 16px;
		transition: background-color 0.25s ease, color 0.25s ease;
	}

	.mobile-bottom-nav.nav-icons-enter .mobile-bottom-nav__item i {
		animation: nemangkawi-nav-icon-pop 0.52s cubic-bezier(0.2, 1.55, 0.38, 1) both;
	}

	.mobile-bottom-nav.nav-icons-enter .mobile-bottom-nav__item:nth-child(2) i { animation-delay: 45ms; }
	.mobile-bottom-nav.nav-icons-enter .mobile-bottom-nav__item:nth-child(3) i { animation-delay: 90ms; }
	.mobile-bottom-nav.nav-icons-enter .mobile-bottom-nav__item:nth-child(4) i { animation-delay: 135ms; }
	.mobile-bottom-nav.nav-icons-enter .mobile-bottom-nav__item:nth-child(5) i { animation-delay: 180ms; }

	.mobile-bottom-nav__item.active,
	.mobile-bottom-nav__item:hover,
	.mobile-bottom-nav__item:focus-visible,
	.mobile-bottom-nav__item[aria-expanded="true"] {
		color: var(--main-color);
	}

	.mobile-bottom-nav__item.active i,
	.mobile-bottom-nav__item[aria-expanded="true"] i {
		background: rgba(225, 191, 2, 0.16);
		color: var(--main-color);
	}

	.mobile-menu-backdrop {
		position: fixed;
		inset: 0;
		z-index: 1100;
		display: block;
		padding: 0;
		border: 0;
		background: rgba(5, 13, 23, 0.68);
		backdrop-filter: blur(4px);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.28s ease, visibility 0.28s ease;
	}

	.mobile-all-menu {
		position: fixed;
		left: 0;
		right: 0;
		bottom: calc(72px + env(safe-area-inset-bottom));
		z-index: 1150;
		display: block;
		max-height: calc(100svh - 92px);
		padding: 10px 18px 22px;
		border-top: 1px solid rgba(255, 255, 255, 0.13);
		border-radius: 26px 26px 0 0;
		background: #142b47;
		box-shadow: 0 -24px 70px rgba(0, 0, 0, 0.38);
		overflow-y: auto;
		transform: translateY(calc(100% + 90px));
		visibility: hidden;
		transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.34s ease;
	}

	.mobile-all-menu__handle {
		width: 44px;
		height: 4px;
		margin: 0 auto 14px;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.2);
	}

	.mobile-all-menu__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		margin-bottom: 18px;
	}

	.mobile-all-menu__eyebrow {
		display: block;
		margin-bottom: 2px;
		color: var(--main-color);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.mobile-all-menu__header h2 {
		color: #fff;
		font-size: 25px;
		font-weight: 700;
		line-height: 1.2;
	}

	.mobile-all-menu__close {
		display: grid;
		place-items: center;
		width: 42px;
		height: 42px;
		min-width: 42px;
		padding: 0;
		border: 1px solid rgba(255, 255, 255, 0.14);
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.08);
		color: #fff;
		font-size: 18px;
	}

	.mobile-all-menu__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 9px;
	}

	.mobile-all-menu__grid a {
		display: flex;
		align-items: center;
		gap: 10px;
		min-height: 52px;
		padding: 10px 12px;
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 15px;
		background: rgba(255, 255, 255, 0.055);
		color: #fff;
		font-size: 13px;
		font-weight: 650;
	}

	.mobile-all-menu__grid a i {
		width: 20px;
		color: var(--main-color);
		font-size: 15px;
		text-align: center;
	}

	.mobile-all-menu__support {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		margin-top: 14px;
		padding: 13px 16px;
		border-radius: 16px;
		background: var(--main-color);
		color: var(--accent-contrast-color);
		font-size: 14px;
		font-weight: 750;
	}

	.mobile-all-menu__support small {
		display: block;
		font-size: 10px;
		font-weight: 650;
		opacity: 0.72;
	}

	body.mobile-bottom-menu-open {
		overflow: hidden !important;
	}

	body.mobile-bottom-menu-open .mobile-menu-backdrop {
		opacity: 1;
		visibility: visible;
	}

	body.mobile-bottom-menu-open .mobile-all-menu {
		transform: translateY(0);
		visibility: visible;
	}

	.site-mobile-nav-enabled .sis-back-to-top-button {
		bottom: calc(82px + env(safe-area-inset-bottom));
	}

}