: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; }  .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; }