/* MANTUL138 APP DESK — theme overrides for Editorial HTML5 UP.
   Keep assets/css/main.css and original Editorial JS unchanged. */
:root { --ocean:#087e98; --ocean-deep:#073b5a; --ink:#153a4a; --muted:#5a7786; --foam:#f0f8fa; --line:#d7e8ee; --sea:#21a6bc; }
html {scroll-behavior:smooth}
body { color:#526d7c; background:#fff; }
body, input, select, textarea {font-family: 'Open Sans', system-ui,-apple-system,Segoe UI, sans-serif;}
h1,h2,h3,h4,h5,h6,strong,b {color:var(--ink);}
a,a:hover { color:var(--ocean); border-bottom-color:var(--ocean); }
#header {border-bottom:solid 3px var(--ocean);padding-top:3.2em;padding-bottom:1.8em;}
#header .logo {border:0;display:inline-flex;align-items:center;gap:.85em;letter-spacing:0;line-height:1.2;min-width:0}
.desk-brand-mark {display:inline-flex;align-items:center;justify-content:center;flex:none;background:var(--ocean-deep);color:white;border-radius:12px;height:47px;width:47px;font-family:'Roboto Slab',Georgia,serif;font-size:1.45em;font-weight:700;letter-spacing:-.1em;}
.desk-brand-mark span {color:#7fd4df;margin-left:.01em}
.desk-brand-copy {display:flex;flex-direction:column;gap:3px;}
#header .desk-brand-copy strong {font-size:1.16em;letter-spacing:-.035em}
.desk-brand-copy small {font-weight:700;letter-spacing:.17em;font-size:.59em;color:#688998}
.desk-header-actions {display:flex;align-items:center;justify-content:flex-end;gap:.8em;}
#header .desk-small-link {padding:.4em .2em;border:0;font-weight:700;color:var(--ink)}
.desk-button, a.desk-button {display:inline-flex;justify-content:center;align-items:center;gap:.6em;border:0;border-radius:9px;background:var(--ocean);padding:.8em 1.3em;color:white!important;font-weight:700;line-height:1.4;box-shadow:0 5px 16px rgba(8,126,152,.14);transition:transform .2s,background .2s}
a.desk-button:hover {background:var(--ocean-deep);transform:translateY(-1px)}
.desk-button svg {width:16px;height:16px}
.desk-button-small {font-size:.84em;white-space:nowrap}
.desk-button-outline, a.desk-button-outline {background:transparent;color:var(--ocean)!important;border:1px solid #a6ced9;box-shadow:none}
a.desk-button-outline:hover {background:#e6f5f8}
.desk-breadcrumb {margin:1.75em 0 -.8em;font-size:.76em;color:#8196a0;letter-spacing:.04em}
.desk-breadcrumb ol {list-style:none;padding:0;margin:0}
#banner.desk-banner {padding-top:4em;padding-bottom:4.5em;align-items:center;border-bottom:1px solid var(--line)}
#banner.desk-banner .content {width:57%;margin-right:2em}
#banner.desk-banner .image {width:43%;min-height:375px;display:block;border-radius:18px;overflow:hidden;box-shadow:0 18px 55px rgba(13,68,84,.11);}
#banner.desk-banner .image img {width:100%;height:100%;object-fit:cover;aspect-ratio:1.14}
#banner.desk-banner h1 {font-size:3.45em;line-height:1.15;margin:0 0 .34em;letter-spacing:-.045em}
#banner.desk-banner h1 span {color:var(--ocean)}
#banner.desk-banner header p {text-transform:none;letter-spacing:0;color:#375d70;font-weight:600;font-size:1.08em;line-height:1.45}
#banner.desk-banner .content>p:not(.desk-eyebrow):not(.desk-inline-note) {font-size:1.02em;line-height:1.85}
.desk-eyebrow {color:var(--ocean);font-size:.72em;letter-spacing:.17em;font-weight:800;line-height:1.5;margin-bottom:1.15em;text-transform:uppercase;}
.desk-dot {display:inline-block;background:var(--sea);width:7px;height:7px;border-radius:50%;vertical-align:middle;margin-right:.65em}
.desk-hero-actions {margin-top:2em;display:flex;flex-wrap:wrap;gap:10px}
.desk-hero-actions li {padding:0!important;margin:0!important;}
.button,.button:hover,.button:active {color:var(--ocean)!important;box-shadow:inset 0 0 0 2px var(--ocean);border-radius:8px;letter-spacing:.05em;}
.button.primary,.button.primary:hover,.button.primary:active {background:var(--ocean);color:white!important;box-shadow:none}
.desk-inline-note {font-size:.82em!important;color:#728b97;margin-top:1.65em!important;line-height:1.6}
section.desk-overview,section.desk-directory,section.desk-identity-note,section.desk-faq {border-top:0;border-bottom:1px solid var(--line);padding:4.5em 0}
header.major > :last-child:after {background:var(--sea);height:3px;width:3.7em;}
header.major h2 {font-size:1.58em;letter-spacing:-.025em}
.desk-section-intro {max-width:65ch;margin:-.5em 0 2em;color:var(--muted)}
.features article .icon {border-color:var(--line);color:var(--ocean)}
.features article .icon:before,.features article .icon:after {border-color:var(--line)}
.features article h3 {font-size:1.13em;margin-bottom:.65em}
.features article p {line-height:1.7;margin-bottom:.65em}
.desk-feature-icon {border:2px solid #cfe7ed;border-radius:16px;height:77px;width:77px;display:flex;align-items:center;justify-content:center;color:var(--ocean);flex:0 0 77px;margin-right:2em;background:#eef8fa}
.desk-feature-icon svg {height:34px;width:34px;}
.desk-text-link {font-weight:700;font-size:.86em;border:0;display:inline-flex;gap:.6em;align-items:center;}
.posts article .image {border:0;}
.posts article .image img {border-radius:11px;aspect-ratio:1.47;object-fit:cover}
.posts article h3 a {border:0;color:var(--ink)}
.posts article h3 a:hover {color:var(--ocean)}
.posts article p {margin-bottom:1.1em;line-height:1.7;}
.posts article:before,.posts article:after {background:var(--line)}
.desk-identity-note {display:grid;grid-template-columns:1.3fr 1fr;gap:3em;align-items:center;background:linear-gradient(120deg,#f1f9fb,#e8f5f8);padding:3em!important;border-radius:17px;margin-top:4em;}
.desk-identity-note h2 {font-size:1.65em;line-height:1.3;letter-spacing:-.025em}
.desk-identity-note p:not(.desk-eyebrow) {margin:0;line-height:1.8}
.desk-relation-flow {display:grid;gap:.8em;justify-items:center}
.desk-relation-flow div {background:white;border:1px solid #c5e3eb;border-radius:9px;padding:1.1em;display:flex;flex-direction:column;align-items:center;gap:.25em;width:100%;text-align:center}
.desk-relation-flow small {font-size:.65em;color:#638594;font-weight:800;letter-spacing:.12em}
.desk-relation-flow strong {font-size:1.1em;color:var(--ink)}
.desk-relation-flow>span {color:var(--ocean);font-size:.82em;font-weight:700}
.desk-relation-flow b {color:var(--ocean);font-size:1.4em;margin-left:.3em}
.desk-faq-list {display:grid;grid-template-columns:1fr 1fr;gap:1em}
.desk-faq-item {border:1px solid var(--line);border-radius:12px;padding:1.25em 1.45em;background:#fbfdfe;align-self:start}
.desk-faq-item[open] {background:#f0f8fa;border-color:#b1d8e3}
.desk-faq-item summary {cursor:pointer;list-style:none;font-weight:700;color:var(--ink);line-height:1.45;padding-right:1.7em;position:relative}
.desk-faq-item summary::-webkit-details-marker {display:none}
.desk-faq-item summary:after {content:'+';position:absolute;right:0;top:0;color:var(--ocean);font-size:1.45em;font-weight:400;line-height:.8}
.desk-faq-item[open] summary:after {content:'−'}
.desk-faq-item p {font-size:.91em;margin:.9em 0 0;color:#526f7c;line-height:1.65}
.desk-last-section {margin:4em 0 1em;padding:2.5em 3em;border-radius:15px;background:#073b5a;color:#d0eaf1;display:flex;align-items:center;justify-content:space-between;gap:2em}
.desk-last-section h2,.desk-last-section h3 {color:#fff;margin-bottom:.55em}
.desk-last-section p:not(.desk-eyebrow) {margin:0;max-width:58ch;line-height:1.7}
.desk-last-section .desk-eyebrow {color:#7fd4df}
.desk-last-section a.desk-button {flex:none;background:#27a5bb;color:white!important;white-space:nowrap}
.desk-main-footer {display:flex;justify-content:space-between;gap:2em;padding:2em 0 4em;color:#8ba0aa;font-size:.78em;border:0}
.desk-main-footer p {margin:0}
.desk-main-footer p:last-child {white-space:nowrap}
.desk-main-footer span {margin:0 .75em}
#sidebar {background:#edf6f8;}
#sidebar .inner {padding-top:2.7em}
#sidebar > .inner > :last-child {padding-bottom:0}
.desk-side-overline {color:var(--ocean);font-size:.68em;font-weight:800;letter-spacing:.17em;margin-bottom:1.2em}
.desk-side-brand {border-bottom:1px solid #d0e2e9;padding-bottom:2em;margin-bottom:2em}
.desk-side-brand h2 {color:var(--ocean-deep);font-size:2.2em;line-height:1.16;margin-bottom:.5em;letter-spacing:-.03em}
.desk-side-brand h2 span {color:var(--ocean)}
.desk-side-brand p:last-child {font-size:.83em;line-height:1.65;margin:0}
#menu ul a, #menu ul span {border-bottom:0;font-weight:600;color:#395969;font-size:.94em}
#menu ul a:hover {color:var(--ocean)}
#menu ul a[aria-current=page] {color:var(--ocean);font-weight:800}
#menu ul a:before,#menu ul a:after {display:none}
#menu ul li {border-top:1px solid #dbe9ee}
#menu ul li:first-child {border-top:0}
.desk-sidebar-access,.desk-sidebar-info {border-top:1px solid #d0e2e9;padding-top:2em!important;margin-top:2em!important}
#sidebar header.major h2 {font-size:1.14em}
.desk-sidebar-buttons {display:grid;gap:.65em}
.desk-sidebar-buttons a.desk-button {width:100%;font-size:.83em}
.desk-sidebar-info p,.desk-sidebar-access p {font-size:.82em;line-height:1.7}
#footer .copyright {font-size:.78em;line-height:1.65}
/* Sidebar open icon, independent of optional font files. */
#sidebar .toggle {text-indent:-9999px;}
#sidebar .toggle:before {content:'☰'!important;font-family:Arial,sans-serif!important;color:var(--ocean)!important;text-indent:0;font-size:20px;position:absolute;top:0;left:0;line-height:48px}
#sidebar .toggle:after {background:none!important}
@media (max-width:1280px){#banner.desk-banner h1 {font-size:3em} .desk-header-actions{gap:.45em}}
@media (max-width:980px){.desk-identity-note {grid-template-columns:1fr} .desk-relation-flow {grid-template-columns:1fr auto 1fr;align-items:center} #banner.desk-banner .content{width:57%} #banner.desk-banner .image{width:43%;min-height:280px}}
@media (max-width:736px){
 #header {padding-top:2.25em;padding-bottom:1.25em;flex-wrap:wrap;gap:1em}
 #header .desk-brand-copy strong {font-size:1em}
 #header .desk-brand-mark {height:40px;width:40px;font-size:1.25em}
 .desk-brand-copy small {font-size:.5em}
 .desk-header-actions {width:100%;justify-content:flex-start;gap:1em;padding-left:0}
 #banner.desk-banner {padding-top:2.5em;padding-bottom:3em;flex-direction:column-reverse}
 #banner.desk-banner .content {width:100%;margin:1.8em 0 0}
 #banner.desk-banner .image {width:100%;max-height:300px;min-height:240px}
 #banner.desk-banner .image img {height:100%;aspect-ratio:1.8}
 #banner.desk-banner h1 {font-size:2.58em}
 #banner.desk-banner header p {font-size:1em}
 section.desk-overview,section.desk-directory,section.desk-identity-note,section.desk-faq {padding-top:3em;padding-bottom:3em}
 .desk-feature-icon {height:61px;width:61px;flex-basis:61px;margin-right:1.25em}
 .desk-feature-icon svg {height:26px;width:26px}
 .desk-faq-list {grid-template-columns:1fr}
 .desk-relation-flow {grid-template-columns:1fr}
 .desk-identity-note {padding:2.1em!important}
 .desk-last-section {flex-direction:column;align-items:flex-start;padding:2em}
 .desk-main-footer {flex-direction:column;gap:.9em;padding-bottom:3em}
}
@media(max-width:420px){#banner.desk-banner h1{font-size:2.27em} .desk-header-actions .desk-small-link{font-size:.87em}.desk-header-actions .desk-button-small{font-size:.75em}.desk-last-section a.desk-button{white-space:normal}}

@media (max-width:736px) { body, input, select, textarea {font-size:16px; line-height:1.65;} }


/* V2 — visible APK evidence and platform context section */
section.desk-source-facts {padding:3.8em 0 4.2em;border-bottom:1px solid var(--line)}
.desk-source-facts .desk-section-intro {margin-bottom:1.7em}
.desk-fact-layout {display:grid;grid-template-columns:1fr 1.1fr;gap:1.25em;align-items:stretch}
.desk-fact-card,.desk-service-card {border:1px solid #cfe4eb;border-radius:16px;padding:2em 2.1em;background:#f5fbfd}
.desk-service-card {background:#eaf5f8}
.desk-file-facts {margin:0 0 .8em}
.desk-file-facts>div {display:grid;grid-template-columns:minmax(120px,42%) minmax(0,1fr);gap:1em;border-bottom:1px solid #d5e8ef;padding:.7em 0;align-items:start}
.desk-file-facts dt {font-weight:700;color:#557786;font-size:.84em}
.desk-file-facts dd {margin:0;font-weight:700;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.desk-file-facts code {font-size:.84em;color:#135b70;background:#e3f3f6;border-radius:4px;padding:.25em .4em;overflow-wrap:anywhere}
.desk-facts-note {margin:1.2em 0 0;font-size:.82em;color:#64808b;line-height:1.65}
.desk-service-card h3 {font-size:1.19em;line-height:1.4;margin:0 0 .7em}
.desk-service-card p {line-height:1.75;margin-bottom:1.05em}
.desk-service-card p:last-of-type {font-size:.9em;color:#5d7886}
@media(max-width:980px){.desk-fact-layout{grid-template-columns:1fr}}
@media(max-width:736px){section.desk-source-facts{padding:2.7em 0}.desk-fact-card,.desk-service-card{padding:1.55em}.desk-file-facts>div{grid-template-columns:1fr;gap:.2em}}


/* ===== V3 · evidence-driven homepage, preserves Editorial DOM & JS ===== */
#header.desk-header .desk-real-logo {display:inline-flex;max-width:240px;max-height:80px;min-width:0;align-items:center;border:0;padding:0}
#header .desk-real-logo img{width:100%;max-width:230px;max-height:75px;height:auto;object-fit:contain;object-position:left center;display:block}
.desk-side-logo{display:block;border:0;margin:0 0 1.15em;max-width:190px}
.desk-side-logo img{display:block;width:100%;height:auto;max-height:78px;object-fit:contain;object-position:left}
.desk-side-brand{padding-top:.1em}
#sidebar .desk-side-brand h2{display:none}
.desk-footer-branded {display:flex;align-items:center;justify-content:space-between;gap:2.2em;border-top:1px solid var(--line);padding-top:2.1em}
.desk-footer-logo{display:block;width:180px;flex:0 0 180px;border:0}
.desk-footer-logo img{width:100%;max-height:80px;height:auto;object-fit:contain;object-position:left}
.desk-footer-branded > div{flex:1;min-width:0}
.desk-footer-branded p + p{margin-top:.45em}
#banner.desk-banner h1{font-size:3em}
#banner.desk-banner h1 span{font-size:.77em;line-height:1.2;display:inline-block;margin-top:.2em}
.desk-home-data .desk-metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1em;margin:1.7em 0 2em}
.desk-metric{padding:1.4em 1.3em;border:1px solid #cee5ec;border-radius:12px;background:#f6fbfd;min-width:0}
.desk-metric>span{color:#557887;font-size:.72em;font-weight:800;text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:.5em}
.desk-metric>strong{font-size:1.98em;color:var(--ocean-deep);line-height:1.18;display:block;margin-bottom:.36em;letter-spacing:-.035em}
.desk-metric>strong small{font-size:.45em;color:var(--ocean)}
.desk-metric p{font-size:.78em;line-height:1.5;margin:0}
.desk-fact-layout-v3{grid-template-columns:1.25fr 1fr}
.desk-fact-card h3{margin-top:0}
.desk-download-card>img{width:100%;height:175px;object-fit:cover;border-radius:8px;margin-bottom:1.1em}
.desk-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85em;margin-bottom:2.25em}
.desk-service-grid article{border:1px solid var(--line);border-radius:11px;padding:1.4em;background:#fbfdfe;min-width:0}
.desk-service-grid article h3{font-size:1.05em;line-height:1.35;margin:.3em 0 .55em}
.desk-service-grid article p{font-size:.87em;line-height:1.65;margin:0}
.desk-service-num{font-weight:800;font-size:.69em;letter-spacing:.1em;color:var(--ocean);text-transform:uppercase}
.desk-catalogue,.desk-contact-section{padding:4em 0;border-bottom:1px solid var(--line)}
.desk-horizontal-figure{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:2em;padding:1.5em;border-radius:14px;background:linear-gradient(115deg,#e7f6f9,#f7fcfd);align-items:center}
.desk-horizontal-figure>img{width:100%;max-height:275px;object-fit:cover;border-radius:9px}
.desk-horizontal-figure h3{font-size:1.22em}
.desk-horizontal-figure p:not(.desk-eyebrow){line-height:1.7;font-size:.9em}
.desk-dual-feature{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4em}
.desk-reference-card{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#fff;min-width:0}
.desk-reference-card>img{display:block;width:100%;height:210px;object-fit:cover}
.desk-reference-card>div{padding:1.65em}
.desk-reference-card h3{font-size:1.1em;line-height:1.45}
.desk-reference-card p:not(.desk-eyebrow){font-size:.87em;line-height:1.75}
.desk-contact-layout{display:grid;grid-template-columns:1.35fr 1fr;gap:1.6em;align-items:start}
.desk-contact-list{background:#f6fbfd;border:1px solid var(--line);border-radius:12px;padding:1em 1.6em;margin:0}
.desk-contact-row{display:grid;grid-template-columns:minmax(90px,30%) 1fr;gap:.65em 1.3em;padding:.98em 0;border-bottom:1px solid var(--line)}
.desk-contact-row:last-child{border-bottom:0}
.desk-contact-row dt{font-size:.85em;color:#547583;font-weight:700}
.desk-contact-row dd{margin:0;overflow-wrap:anywhere}
.desk-contact-row dd strong{font-size:.9em;display:block;color:var(--ink)}
.desk-contact-row dd small{font-size:.75em;line-height:1.5;color:#6b8792;display:block;margin-top:.25em}
.desk-contact-photo{margin:0;padding:0}
.desk-contact-photo img{width:100%;height:315px;object-fit:cover;border-radius:12px;display:block}
.desk-contact-photo figcaption{font-size:.78em;color:#728b98;margin-top:.7em;line-height:1.5}
.desk-slim-cta{margin-top:1.3em;background:#eaf7fa;border-left:4px solid var(--ocean);border-radius:7px;padding:1.05em 1.35em;display:flex;justify-content:space-between;align-items:center;gap:1.5em}
.desk-slim-cta p{margin:0;font-weight:600;font-size:.88em}
.desk-directory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1em}
.desk-directory-grid article{padding:1.35em 1.4em;background:#fbfdfe;border:1px solid var(--line);border-radius:11px;min-height:155px}
.desk-directory-grid article b{color:var(--sea);display:block;font-size:.78em;margin-bottom:.55em;letter-spacing:.08em}
.desk-directory-grid article h3{font-size:.98em;margin:0 0 .5em}
.desk-directory-grid article h3 a{border:0;color:var(--ink)}
.desk-directory-grid article h3 a:hover{color:var(--ocean)}
.desk-directory-grid article p{margin:0;font-size:.8em;line-height:1.6}
.desk-final-buttons{flex:0 0 auto;display:flex;gap:.55em;flex-direction:column;min-width:130px}
.desk-last-section .desk-final-buttons a.desk-button{white-space:nowrap;font-size:.8em;width:100%}
.desk-last-section .desk-final-buttons .desk-button-outline{border:1px solid #9ed5e2;color:white!important;background:transparent}
.desk-last-section .desk-final-buttons .desk-button-outline:hover{background:#165978}
#menu .desk-nav-category>strong{display:block;padding:1.25em 0 .6em;color:#557584;font-size:.69em;text-transform:uppercase;letter-spacing:.12em}
/* ============================================
   FIX MENU OPENER — Ubah indikator kotak
   menjadi toggle bulat dengan animasi.
   ============================================ */

#menu .desk-nav-category > .opener {
  position: relative;
  padding-right: 34px;
}

#menu .desk-nav-category > .opener::before {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(8, 126, 152, 0.1);
  border: 1px solid rgba(8, 126, 152, 0.4);
  color: #087e98;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  transition: all 0.3s ease;
}

#menu .desk-nav-category > .opener:hover::before {
  background: rgba(8, 126, 152, 0.2);
  border-color: #087e98;
  transform: translateY(-50%) scale(1.1);
}

#menu .desk-nav-category > .opener.active::before {
  content: "−";
  background: #087e98;
  border-color: #087e98;
  color: #ffffff;
}

/* Sembunyikan ikon default template */
#menu .desk-nav-category > .opener::after {
  display: none;
}
#menu .desk-nav-category ul{margin:0 0 .4em;padding-left:.85em}
#menu .desk-nav-category li{border-top:0}
#menu .desk-nav-category li a{padding:.45em .5em;font-size:.86em;color:#425f70}
#menu .desk-nav-category>ul>li>a:hover{color:var(--ocean)}
@media(max-width:1280px){#banner.desk-banner h1{font-size:2.55em}}
@media(max-width:980px){.desk-home-data .desk-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.desk-contact-layout{grid-template-columns:1fr}.desk-contact-photo img{height:230px}}
@media(max-width:736px){
 #header.desk-header .desk-real-logo{max-width:205px}
 #header .desk-real-logo img{max-width:200px;max-height:70px}
 #banner.desk-banner h1{font-size:2.3em}
 #banner.desk-banner h1 span{font-size:.83em}
 .desk-service-grid,.desk-directory-grid{grid-template-columns:1fr 1fr}
 .desk-horizontal-figure,.desk-dual-feature,.desk-fact-layout-v3{grid-template-columns:1fr}
 .desk-contact-row{grid-template-columns:1fr;gap:.15em}
 .desk-footer-branded{flex-direction:column;align-items:flex-start}
 .desk-footer-logo{flex:auto;width:155px}
 .desk-slim-cta{flex-direction:column;align-items:flex-start}
 .desk-final-buttons{width:100%;flex-direction:row;flex-wrap:wrap}
 .desk-last-section .desk-final-buttons a.desk-button{width:auto;flex:1}
}
@media(max-width:480px){
 #banner.desk-banner h1{font-size:2.05em}
 .desk-home-data .desk-metric-grid{gap:.65em}
 .desk-metric{padding:1.15em .9em}
 .desk-metric>strong{font-size:1.6em}
 .desk-service-grid,.desk-directory-grid{grid-template-columns:1fr}
 .desk-last-section .desk-final-buttons a.desk-button{min-width:90px}
}