:root {
    --brand: #1d4ed8;
    --brand-dark: #1e40af;
    --leaf: #2f9e44;
    --ink: #1f2430;
    --soft: #f0f7ff;
    --bs-link-color: var(--brand);
    --bs-link-color-rgb: 29, 78, 216;
    --bs-link-hover-color: var(--brand-dark);
    --bs-link-hover-color-rgb: 212, 85, 12;
}
body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--ink); }
.text-brand { color: var(--brand) !important; }
.bg-soft { background: var(--soft); }
.btn-brand { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.btn-brand:hover, .btn-brand:focus, .btn-brand:disabled { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-outline-brand { border: 2px solid var(--brand); color: var(--brand); font-weight: 600; }
.btn-outline-brand:hover { background: var(--brand); color: #fff; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: #93c5fd; box-shadow: 0 0 0 .25rem rgba(29, 78, 216,.18); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.pagination { --bs-pagination-color: var(--ink); --bs-pagination-active-bg: var(--brand); --bs-pagination-active-border-color: var(--brand); --bs-pagination-hover-color: var(--brand); --bs-pagination-focus-color: var(--brand); --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(29, 78, 216,.18); }

.site-nav { background: #fff; box-shadow: 0 2px 18px rgba(0,0,0,.06); }
.site-nav .nav-link { font-weight: 600; color: var(--ink); }
.site-nav .nav-link.active, .site-nav .nav-link:hover { color: var(--brand); }
.site-nav .dropdown-item:active, .site-nav .dropdown-item.active { background: var(--brand); color: #fff; }
.brand-mark { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand), #3b82f6); color: #fff; font-size: 1.2rem; }
.brand-name { font-weight: 800; color: var(--ink); }

.hero-slide { min-height: 640px; display: flex; align-items: center; background-color: var(--ink); background-size: cover; background-position: center; position: relative; }
.hero-slide::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,22,30,.88) 0%, rgba(20,22,30,.55) 60%, rgba(20,22,30,.2) 100%); }
.hero-slide .container { position: relative; }
.hero-kicker, .section-kicker { display: inline-block; padding: .35rem 1rem; border-radius: 999px; background: rgba(29, 78, 216,.12); color: var(--brand); font-weight: 700; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; }
.hero-kicker { background: rgba(29, 78, 216,.9); color: #fff; }

.features-strip { margin-top: -80px; position: relative; z-index: 2; }
.feature-card, .testimonial-card, .form-card { background: #fff; border-radius: 20px; padding: 2rem; box-shadow: 0 10px 40px rgba(31,36,48,.08); display: flex; flex-direction: column; }
.feature-icon { width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; font-size: 1.6rem; color: #fff; background: linear-gradient(135deg, var(--brand), #3b82f6); }
.feature-image { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; background: var(--soft); overflow: hidden; }
.feature-image img { max-width: 44px; max-height: 44px; object-fit: contain; }

.package-tabs .nav-link { color: var(--ink); font-weight: 600; background: #fff; margin: 0 .25rem; }
.package-tabs .nav-link.active { background: var(--brand); color: #fff; }
.package-card { position: relative; background: #fff; border-radius: 24px; padding: 2.25rem 2rem; border: 2px solid #f1f1f4; display: flex; flex-direction: column; width: 100%; transition: transform .2s, box-shadow .2s; }
.package-card:hover { transform: translateY(-6px); box-shadow: 0 18px 50px rgba(31,36,48,.1); }
.package-card.featured { border-color: var(--brand); box-shadow: 0 18px 50px rgba(29, 78, 216,.18); }
.package-ribbon { position: absolute; top: 18px; right: 18px; background: var(--leaf); color: #fff; font-size: .75rem; font-weight: 700; padding: .3rem .8rem; border-radius: 999px; }
.package-speed { display: inline-block; background: var(--soft); color: var(--brand-dark); font-weight: 700; border-radius: 10px; padding: .35rem .8rem; }
.package-price { font-size: 2rem; font-weight: 800; }
.package-price small { font-size: .95rem; font-weight: 500; color: #7a7f8c; }
label.package-card { cursor: pointer; }
label.package-card:has(input:checked) { border-color: var(--brand); box-shadow: 0 18px 50px rgba(29, 78, 216,.18); }

.avatar-initial { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 700; flex: none; }
.post-card { display: block; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 40px rgba(31,36,48,.07); transition: transform .2s; }
.post-card:hover { transform: translateY(-4px); }
.post-thumb { height: 210px; background-color: var(--soft); background-size: cover; background-position: center; display: grid; place-items: center; color: #93c5fd; font-size: 3rem; }
.client-logos img { max-height: 56px; max-width: 150px; filter: grayscale(1); opacity: .7; transition: .2s; }
.client-logos img:hover { filter: none; opacity: 1; }

.cta { background: linear-gradient(120deg, var(--brand), #3b82f6); }
.page-header { padding: 4.5rem 0 3.5rem; background: linear-gradient(120deg, var(--ink), #343a4a); color: #fff; }
.page-header .lead { color: #c9ccd3; max-width: 720px; }
.page-header .breadcrumb a { color: #93c5fd; text-decoration: none; }
.page-header .breadcrumb-item.active, .page-header .breadcrumb-item + .breadcrumb-item::before { color: #c9ccd3; }
.contact-item { display: flex; gap: 1rem; }
.contact-item > i { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--soft); color: var(--brand); font-size: 1.2rem; }
.rich-text img { max-width: 100%; height: auto; border-radius: 12px; }
.rich-text { line-height: 1.8; }
.about-visual { min-height: 320px; border-radius: 1.5rem; background: linear-gradient(135deg, var(--brand), #3b82f6); background-size: cover; background-position: center; box-shadow: 0 10px 40px rgba(31,36,48,.12); }
.step-number { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 800; }
.faq .accordion-button:not(.collapsed) { background: var(--soft); color: var(--brand-dark); box-shadow: none; }
.faq .accordion-button:focus { box-shadow: 0 0 0 .25rem rgba(29, 78, 216,.18); }

/* Formulir pendaftaran */
.registration-map { height: 360px; border-radius: 16px; overflow: hidden; background: #f1f1f4; }
.section-number { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--soft); color: var(--brand); font-weight: 800; }
.package-summary { background: linear-gradient(135deg, var(--ink), #343a4a); color: #fff; border-radius: 20px; padding: 2rem; }
.location-dialog { border: 0; border-radius: 20px; padding: 0; max-width: 440px; width: calc(100% - 2rem); box-shadow: 0 18px 50px rgba(31,36,48,.25); }
.location-dialog::backdrop { background: rgba(15,23,42,.65); backdrop-filter: blur(3px); }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
altcha-widget { --altcha-max-width: 100%; --altcha-color-border-focus: var(--brand); --altcha-color-active: var(--brand); }

/* Popup promo */
.promo-modal .modal-content { border: 0; border-radius: 24px; overflow: hidden; }
.promo-modal img { width: 100%; height: 100%; max-height: 80vh; object-fit: cover; }
.promo-line { display: flex; justify-content: space-between; gap: 1rem; background: var(--soft); border-radius: 12px; padding: .75rem 1rem; }

.site-footer { background: var(--ink); color: #aeb3bf; }
.site-footer a { color: #aeb3bf; text-decoration: none; }
.site-footer a:hover { color: var(--brand); }
.wa-float { position: fixed; right: 22px; bottom: 22px; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; font-size: 1.8rem; box-shadow: 0 8px 24px rgba(0,0,0,.2); z-index: 1050; }
.wa-float:hover { color: #fff; transform: scale(1.06); }
@media (max-width: 991px) { .hero-slide { min-height: 520px; } .features-strip { margin-top: 0; } }
.promo-option { cursor: pointer; border-color: #e5e7eb; transition: border-color .2s, box-shadow .2s; }
.btn-check:checked + .promo-option { border-color: var(--brand); box-shadow: 0 0 0 .25rem rgba(29, 78, 216,.18); }