:root {
        --titik: radial-gradient(rgba(20,66,112,.14) 1.5px, transparent 1.5px);

        --surface: #F2FBFF;
        --surface-pattern: none;
        --surface-pattern-size: 22px 22px;

        --nav-hover: #EAF4FF;

        --pil: #EAF4FF;
      }

      .bg-surface {
        background-image: var(--surface-pattern);
        background-size: var(--surface-pattern-size);
      }

      * { box-sizing: border-box; }
      body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
      ::selection { background: #1A1A1A; color: #fff; }

      .tile { border: 2px solid #144270; border-radius: 16px; box-shadow: 6px 6px 0 0 #144270; }
      .tile-lift { transition: transform .16s ease, box-shadow .16s ease; }
      .tile-lift:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 0 #144270; }

      .tile-dark { border: 2px solid #0d2f50; border-radius: 16px; box-shadow: 0 14px 30px rgba(6,20,38,.5); }

      .btn { display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
             border-radius:9999px; font-weight:700; padding:1rem 2rem; border:2px solid #144270;
             box-shadow: 4px 4px 0 0 #144270;
             transition: transform .12s ease, box-shadow .12s ease; }
      .btn:hover:not(:active) { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 0 #144270; }
      .btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 0 #144270; }
      .btn-accent { background:#FFC013; color:#144270; }   

      .band-navy .btn, .tile-dark .btn { box-shadow: 4px 4px 0 0 #08243f; }
      .band-navy .btn:hover:not(:active),
      .tile-dark .btn:hover:not(:active) { box-shadow: 6px 6px 0 0 #08243f; }
      .band-navy .btn:active,
      .tile-dark .btn:active { box-shadow: 1px 1px 0 0 #08243f; }
      .btn-dark { background:#144270; color:#fff; }
      .btn-light { background:#fff; color:#144270; }
      .btn svg { width:22px; height:22px; }

      a:hover, a:focus, a:active {
        color: #0d2f50;
        text-decoration-color: #FFC013;
        text-decoration-thickness: 3px;
        text-underline-offset: 3px;
      }

      .btn-accent:hover, .btn-accent:focus, .btn-accent:active,
      .btn-light:hover, .btn-light:focus, .btn-light:active,
      .bio-tombol:hover, .bio-tombol:focus, .bio-tombol:active {
        color: #144270;
        text-decoration: none;
      }
      .btn-dark:hover, .btn-dark:focus, .btn-dark:active {
        color: #fff;
        text-decoration: none;
      }

      .pcard-exit:hover, .pcard-exit:focus {
        color: #FFC013;
        text-decoration: none;
      }

      .tile h2 a:hover, .tile h2 a:focus {
        color: #0d2f50;
        text-decoration: underline;
        text-decoration-color: #FFC013;
        text-decoration-thickness: 3px;
        text-underline-offset: 3px;
      }

      .chip { border:2px solid #144270; border-radius:9999px; padding:.4rem .95rem;
              font-size:.875rem; font-weight:600;
              background:#fff; color:#144270; cursor:pointer; transition: all .12s ease; }

      .chip:hover { background:#fff !important; color:#144270 !important; box-shadow: 3px 3px 0 0 #144270; transform: translate(-1px,-1px); }
      .chip.active { background:#144270; color:#fff; box-shadow: 3px 3px 0 0 #144270; }
      .chip.active:hover { background:#144270 !important; color:#fff !important; }

      .nav-punya-menu { position: relative; }

      .nav-panel {
        position: absolute; top: 100%; left: 50%; z-index: 60;
        transform: translateX(-50%) translateY(6px);
        opacity: 0; visibility: hidden; pointer-events: none;
        transition: opacity .16s ease, transform .16s ease;
      }

      .nav-punya-menu:hover .nav-panel,
      .nav-punya-menu:focus-within .nav-panel {
        opacity: 1; visibility: visible; pointer-events: auto;
        transform: translateX(-50%) translateY(0);
      }

      .nav-kait { transition: transform .16s ease; }
      .nav-punya-menu:hover .nav-kait,
      .nav-punya-menu:focus-within .nav-kait { transform: rotate(180deg); }

      .nav-baris {
        display: block; border-radius: 10px; padding: .5rem .7rem;
        color: #144270 !important; transition: background .12s ease;
      }
      .nav-baris:hover { background: var(--nav-hover) !important; color: #144270 !important; }

      .nav-grup > summary {
        display: flex; align-items: center; justify-content: space-between; gap: .5rem;
        list-style: none; cursor: pointer;
        border-radius: 10px; padding: .5rem .7rem;
        color: #144270; transition: background .12s ease;
      }

      .nav-grup > summary::-webkit-details-marker { display: none; }
      .nav-grup > summary::marker { content: ''; }
      .nav-grup > summary:hover { background: var(--nav-hover); }
      .nav-grup > summary .nav-kait { transition: transform .16s ease; }
      .nav-grup[open] > summary .nav-kait { transform: rotate(180deg); }

      .nav-grup > .nav-isi { padding-left: .55rem; margin-top: .15rem;
                             border-left: 2px solid var(--nav-hover); }

      .nav-label {
        font-size: .6875rem; font-weight: 800; text-transform: uppercase;
        letter-spacing: .14em; color: #5E6B78;
      }

      .faq-answer { max-height:0; overflow:hidden; transition:max-height .3s ease; }
      .faq-item.active .faq-answer { max-height:320px; }
      .faq-icon { transition: transform .3s ease; }
      .faq-item.active .faq-icon { transform: rotate(180deg); }

      .faq-question { background:#fff !important; color:#144270 !important; }
      .faq-question:hover { background:#fff !important; color:#144270 !important; }

      .faq-pattern {
        background-color: #f7f7f7;
        background-image: var(--titik);
        background-size: 22px 22px;
      }

      .band-navy {
        background:
          radial-gradient(130% 130% at 0% 100%, rgba(56,150,214,.40) 0%, rgba(20,66,112,0) 48%),
          radial-gradient(130% 130% at 100% 0%, rgba(56,150,214,.40) 0%, rgba(20,66,112,0) 48%),
          #144270;
      }

      #trustBadge { transition: transform .25s cubic-bezier(.2,.8,.2,1); will-change: transform; }

      .logo-jalur { overflow:hidden; }

      .logo-jalur {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
                mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
      }
      .logo-rel { display:flex; width:max-content; animation: logo-geser 60s linear infinite; }
      .logo-set { display:flex; align-items:center; gap:2.5rem; padding-right:2.5rem; }

      @keyframes logo-geser {
        from { transform: translateX(-50%); }
        to   { transform: translateX(0); }
      }

      .logo-jalur:hover .logo-rel { animation-play-state: paused; }

      @media (prefers-reduced-motion: reduce) {
        .logo-rel { animation:none; transform:none; }
        .logo-jalur { overflow-x:auto; }
      }

      .logo-slot {
        display:flex; align-items:center; justify-content:center;
        flex:0 0 auto; width:150px;
        height:60px; padding:0 .5rem; text-align:center;
      }

      .logo-slot img {
        max-height:100%; width:auto; object-fit:contain;
        filter:grayscale(1); opacity:.62; transition:filter .18s ease, opacity .18s ease;
      }
      .logo-slot:hover img { filter:grayscale(0); opacity:1; }

      .logo-nama {
        display:flex; align-items:center; justify-content:center;
        width:100%; height:100%;
        border:2px dashed rgba(20,66,112,.28); border-radius:8px;
        color:#5E6B78; font-size:.78rem; font-weight:800; line-height:1.15;
        letter-spacing:.01em;
      }

      .logo-nama-gelap {
        width:150px; height:52px;
        border-color:rgba(255,255,255,.35); color:#E7ECF3;
      }

      .gcard { transition: transform .2s ease, box-shadow .2s ease; }
      .gcard:hover { transform: translateY(-6px); box-shadow: 10px 10px 0 0 #144270; position: relative; z-index: 2; }

      .gcard[hidden] { display: none !important; }

      #content.site-content {
        max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important;
        padding-left: 1.5rem; padding-right: 1.5rem;
      }
      @media (max-width: 640px) {

        #content.site-content { padding-left: 0; padding-right: 0; }

        #primary.content-area,
        #right-sidebar.widget-area {
          width: 100% !important; max-width: 100% !important;
          float: none !important;
        }
      }

      .entry-title {
        font-family: 'Inter', system-ui, sans-serif;
        font-weight: 800 !important; color: #144270 !important;
        font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem) !important;
        line-height: 1.15 !important; letter-spacing: -0.01em;
        margin: 1.75rem 0 .5rem;
      }
      .entry-meta { font-size: .875rem; color: #5E6B78; font-weight: 600; }
      .entry-meta a { color: #5E6B78; }
      .entry-meta a:hover { color: #144270; }

      .entry-content, .entry-summary, .entry-meta, .entry-title, .page-header {
        max-width: 760px !important; margin-left: auto; margin-right: auto;
        padding-left: 1.5rem; padding-right: 1.5rem;
      }
      @media (max-width: 640px) {

        .entry-content, .entry-summary, .entry-meta, .entry-title, .page-header {
          padding-left: 1rem; padding-right: 1rem;
        }
      }

      .entry-content, .entry-summary { font-size: 1.0625rem; line-height: 1.75; color: #24313F; }
      .entry-content > * + *, .entry-summary > * + * { margin-top: 1.25rem; }
      .entry-content h2 {
        font-family: 'Inter', system-ui, sans-serif;
        font-weight: 800; color: #144270; font-size: 1.5rem; line-height: 1.3;
        margin-top: 2.25rem;
      }
      .entry-content h3 {
        font-family: 'Inter', system-ui, sans-serif;
        font-weight: 700; color: #144270; font-size: 1.1875rem; line-height: 1.4;
        margin-top: 1.75rem;
      }
      .entry-content a {
        color: #144270; text-decoration: underline; text-decoration-color: #FFC013;
        text-underline-offset: 2px; text-decoration-thickness: 2px;
      }
      .entry-content a:hover { color: #0d2f50; }
      .entry-content strong { color: #144270; }
      .entry-content ul, .entry-content ol { padding-left: 1.25rem; }
      .entry-content li + li { margin-top: .35rem; }
      .entry-content blockquote {
        border-left: 3px solid #FFC013; padding: .25rem 0 .25rem 1.25rem;
        font-style: italic; color: #5E6B78;
      }
      .entry-content img { border-radius: 12px; height: auto; max-width: 100%; }
      .entry-content figure { margin: 0; }
      .entry-content figcaption { font-size: .8125rem; color: #5E6B78; text-align: center; margin-top: .5rem; }

      .featured-image { border-radius: 16px; overflow: hidden; margin-top: 1.75rem; }

      .comments-area, #respond, #comments { display: none !important; }

      #right-sidebar .widget {
        background: #fff; border: 1px solid #E3EAF3; border-radius: 16px;
        padding: 1.5rem; margin-bottom: 1.25rem;
        box-shadow: 0 1px 2px rgba(20, 66, 112, .05);
      }

      @media (max-width: 640px) {
        #right-sidebar { padding-left: 1rem; padding-right: 1rem; }
      }
      #right-sidebar .widget-title {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: .75rem; font-weight: 800; text-transform: uppercase;
        letter-spacing: .14em; color: #5E6B78; margin-bottom: 1rem;
      }
      #right-sidebar ul { list-style: none; margin: 0; padding: 0; }
      #right-sidebar li + li { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--nav-hover); }
      #right-sidebar a { color: #144270 !important; font-weight: 600; }
      #right-sidebar a:hover { color: #0d2f50 !important; }
      #right-sidebar form[role="search"], #right-sidebar .wp-block-search__inside-wrapper {
        display: flex; gap: .5rem;
      }

      #right-sidebar input[type="search"] {
        flex: 1; min-width: 0; border: 1px solid #E3EAF3; border-radius: 9999px;
        background: var(--surface); color: #24313F;
        padding: .6rem 1rem; font-family: 'Inter', system-ui, sans-serif;
      }
      #right-sidebar input[type="search"]:focus {
        outline: none; border-color: #144270; background: #fff;
      }
      #right-sidebar button[type="submit"] {
        border: 1px solid #E3EAF3; border-radius: 9999px; padding: .6rem .9rem;
        background: var(--surface); color: #144270; cursor: pointer;
        flex-shrink: 0;
      }
      #right-sidebar button[type="submit"]:hover {
        border-color: #144270; background: #fff;
      }

      .blog .site-main > article, .archive .site-main > article {
        max-width: 760px; margin: 0 auto 2.5rem; padding: 0 1.5rem 2.5rem;
        border-bottom: 1px solid var(--nav-hover);
      }
      .blog .entry-title, .archive .entry-title { font-size: 1.5rem; }
      .blog .entry-title a, .archive .entry-title a { color: #144270 !important; }

      .cmwa { position:fixed; right:10px; bottom:10px; z-index:9998;
              font-family:inherit; }

      .cmwa-bulat {
        width:60px; height:60px; border-radius:9999px; border:0; cursor:pointer;
        background:#2db742; color:#fff; display:flex; align-items:center;
        justify-content:center; padding:0;
        box-shadow:0 4px 14px rgba(0,0,0,.28);
        transition: transform .16s ease, box-shadow .16s ease;
      }
      .cmwa-bulat:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.32); }

      .cmwa-bulat, .cmwa-bulat:hover, .cmwa-bulat:focus, .cmwa-bulat:active {
        color:#fff; text-decoration:none;
      }
      .cmwa-bulat svg { width:34px; height:34px; display:block; }

      .cmwa-titik {
        position:absolute; top:2px; right:2px; width:14px; height:14px;
        border-radius:9999px; background:#4ade80; border:2px solid #fff;
      }

      .cmwa-panel {
        position:absolute; right:0; bottom:74px; width:300px; max-width:calc(100vw - 20px);
        background:#fff; border-radius:14px; overflow:hidden;
        box-shadow:0 10px 40px rgba(0,0,0,.25);
      }
      .cmwa-panel[hidden] { display:none; }

      .cmwa-kepala { background:#2db742; color:#fff; padding:1rem 1.1rem; }
      .cmwa-judul { font-size:18px; font-weight:800; line-height:1.3; }
      .cmwa-sub   { font-size:12px; opacity:.9; margin-top:.25rem; line-height:1.4; }

      .cmwa-tutup {
        position:absolute; top:.6rem; right:.7rem; background:none; border:0;
        color:#fff; font-size:22px; line-height:1; cursor:pointer; padding:.2rem .4rem;
      }

      .cmwa-cs {
        display:flex; align-items:center; gap:.8rem; padding:1rem 1.1rem;
        text-decoration:none; color:#144270; background:#fff;
      }
      .cmwa-cs:hover { background:#f2fbff; }

      .cmwa-foto {
        width:48px; height:48px; border-radius:9999px; flex-shrink:0;
        background:#EDEDED; object-fit:contain;
      }

      .cmwa-nama  { display:block; font-size:14px; font-weight:800; line-height:1.3; }
      .cmwa-peran { display:block; font-size:11px; color:#5E6B78; margin-top:.15rem; line-height:1.4; }

      @media (max-width: 480px) {
        .cmwa { right:12px; bottom:12px; }
        .cmwa-bulat { width:56px; height:56px; }
        .cmwa-bulat svg { width:31px; height:31px; }
      }