:root {
    --bg: #f6f8fb;
    --surface: #ffffff;
    --surface-soft: #eef6f3;
    --ink: #17202a;
    --muted: #637083;
    --line: #dce3ea;
    --brand: #0f766e;
    --brand-dark: #115e59;
    --accent: #f59e0b;
    --info: #2563eb;
    --danger-soft: #fff4df;
    --danger-text: #8a4b04;
    --shadow: 0 18px 45px rgba(31, 41, 55, .08);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    line-height: 1.55;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

.public-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 72px;
    padding: 12px clamp(18px, 4vw, 56px);
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(16px);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.brand-mark {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 8px;
    background: var(--brand);
    color: #fff;
    font-weight: 800;
}

.brand-mark-image {
    background: #ffffff;
    border: 1px solid var(--line);
    overflow: hidden;
}

.brand-mark-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
}

.brand strong,
.brand small {
    display: block;
}

.brand small {
    color: var(--muted);
    font-size: .8rem;
}

.public-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.public-nav a {
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--muted);
    font-weight: 700;
    font-size: .92rem;
}

/* desktop: sembunyikan tombol hamburger */
.public-nav-toggle {
    display: none;
}

.public-nav a.active,
.public-nav a:hover {
    background: var(--surface-soft);
    color: var(--brand-dark);
}

.hero,
.tracking-hero,
.detail-hero {
    background:
        linear-gradient(135deg, rgba(15, 118, 110, .95), rgba(37, 99, 235, .86)),
        linear-gradient(0deg, #0f766e, #0f766e);
    color: #fff;
}

.hero-inner,
.tracking-inner,
.content-wrap {
    width: min(1160px, calc(100% - 36px));
    margin: 0 auto;
}

.hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr);
    gap: 36px;
    align-items: end;
    padding: 64px 0 48px;
}

.hero-copy h1,
.tracking-inner h1,
.detail-title h1 {
    max-width: 780px;
    margin: 0;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.08;
}

.hero-copy p:not(.eyebrow),
.tracking-inner p:not(.eyebrow),
.detail-title p:not(.eyebrow) {
    max-width: 640px;
    margin: 18px 0 0;
    color: rgba(255, 255, 255, .85);
    font-size: 1.06rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.hero-primary,
.hero-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 8px;
    font-weight: 900;
}

.hero-primary {
    background: #ffffff;
    color: var(--brand-dark);
}

.hero-primary:hover {
    background: #e9fbf6;
}

.hero-secondary {
    border: 1px solid rgba(255, 255, 255, .44);
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
}

.hero-secondary:hover {
    background: rgba(255, 255, 255, .22);
}

.eyebrow {
    margin: 0 0 10px;
    color: var(--brand);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hero .eyebrow,
.tracking-hero .eyebrow,
.detail-hero .eyebrow {
    color: #d1fae5;
}

.hero-search,
.tracking-form {
    padding: 18px;
    background: rgba(255, 255, 255, .96);
    color: var(--ink);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.hero-search label,
.tracking-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 800;
}

.search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

input,
select,
button {
    min-height: 46px;
    border-radius: 8px;
    font: inherit;
}

input,
select {
    width: 100%;
    padding: 0 13px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
}

button,
.primary-action,
.card-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: var(--brand);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

button:hover,
.primary-action:hover,
.card-action:hover {
    background: var(--brand-dark);
}

.filter-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
}

.filter-row a,
.secondary-link,
.back-link,
.precheck-panel a,
.empty-state a {
    color: var(--brand-dark);
    font-weight: 800;
}

.stats-band {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(980px, calc(100% - 36px));
    margin: -28px auto 0;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.stats-band div {
    padding: 20px;
    border-right: 1px solid var(--line);
}

.stats-band div:last-child {
    border-right: 0;
}

.stats-band strong {
    display: block;
    font-size: 1.7rem;
}

.stats-band span,
dt,
.tracking-form small {
    color: var(--muted);
}

.content-wrap {
    padding: 44px 0 58px;
}

.access-section {
    padding-top: 30px;
    padding-bottom: 28px;
}

.section-heading {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: end;
    margin-bottom: 22px;
}

.section-heading.compact {
    margin-bottom: 14px;
}

.section-heading h2,
.detail-section h2,
.info-panel h2,
.precheck-panel h2 {
    margin: 0;
    font-size: 1.55rem;
}

.section-lead {
    max-width: 620px;
    margin: 8px 0 0;
    color: var(--muted);
}

.hotline-panel {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr);
    gap: 32px;
    align-items: center;
    padding: 36px;
    margin-bottom: 20px;
    border: 1px solid rgba(20, 184, 166, .36);
    border-radius: 18px;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(20, 184, 166, .28), transparent 55%),
        linear-gradient(135deg, rgba(20, 184, 166, .18), rgba(37, 99, 235, .16)),
        #0b1220;
    color: #ffffff;
    box-shadow: 0 30px 70px rgba(8, 15, 30, .45);
}

.hotline-glow {
    position: absolute;
    top: -120px;
    right: -120px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(94, 234, 212, .35), transparent 70%);
    filter: blur(20px);
    pointer-events: none;
}

.hotline-copy {
    position: relative;
    z-index: 1;
}

.hotline-copy h2 {
    margin: 14px 0 0;
    font-size: 1.85rem;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.hotline-copy p:not(.eyebrow) {
    max-width: 650px;
    margin: 12px 0 0;
    color: #cbd5e1;
    line-height: 1.6;
}

.hotline-note {
    display: inline-flex;
    margin-top: 16px !important;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(148, 163, 184, .14);
    border: 1px solid rgba(148, 163, 184, .26);
    font-size: .85rem;
    color: #e2e8f0 !important;
}

.hotline-panel .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #5eead4;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: .78rem;
}

.eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5eead4;
    box-shadow: 0 0 0 4px rgba(94, 234, 212, .22);
}

.hotline-actions {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
    align-self: center;
}

.hotline-button,
.hotline-empty {
    box-sizing: border-box;
    border-radius: 14px;
}

.hotline-button {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid rgba(148, 163, 184, .35);
    background: rgba(30, 41, 59, .85);
    color: #ffffff;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.hotline-button:hover {
    border-color: #5eead4;
    background: rgba(40, 53, 73, .95);
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(8, 15, 30, .4);
}

.hotline-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: rgba(148, 163, 184, .16);
}

.hotline-icon svg {
    width: 22px;
    height: 22px;
}

.hotline-button-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.hotline-button-label {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #94a3b8;
}

.hotline-button-value {
    font-size: 1.02rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hotline-whatsapp {
    border-color: transparent;
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: #ffffff;
    box-shadow: 0 14px 30px rgba(20, 184, 166, .35);
}

.hotline-whatsapp:hover {
    background: linear-gradient(135deg, #2dd4bf, #14b8a6);
    border-color: transparent;
}

.hotline-whatsapp .hotline-icon {
    background: rgba(255, 255, 255, .22);
}

.hotline-whatsapp .hotline-button-label {
    color: rgba(236, 254, 255, .85);
}

.hotline-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 18px;
    border: 1px dashed rgba(203, 213, 225, .38);
    background: rgba(255, 255, 255, .06);
    color: #cbd5e1;
    text-align: center;
    font-weight: 600;
}

.access-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.access-card {
    display: grid;
    min-height: 184px;
    align-content: space-between;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.access-card:hover {
    border-color: rgba(15, 118, 110, .34);
    box-shadow: 0 24px 52px rgba(31, 41, 55, .11);
    transform: translateY(-2px);
}

.access-card-primary {
    background: #f0fdfa;
    border-color: rgba(15, 118, 110, .22);
}

.access-kicker {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 8px;
    background: var(--brand);
    color: #ffffff;
    font-size: .82rem;
    font-weight: 900;
}

.access-card strong,
.access-card small {
    display: block;
}

.access-card strong {
    font-size: 1.02rem;
}

.access-card small {
    color: var(--muted);
    font-size: .9rem;
}

.guide-band {
    background: #ffffff;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.guide-inner {
    display: grid;
    grid-template-columns: minmax(280px, .7fr) minmax(0, 1fr);
    gap: 34px;
    align-items: start;
    width: min(1160px, calc(100% - 36px));
    margin: 0 auto;
    padding: 46px 0;
}

.guide-copy h2,
.preflight-panel h2 {
    margin: 0;
    font-size: 1.55rem;
}

.guide-copy p:not(.eyebrow),
.preflight-panel p:not(.eyebrow) {
    margin: 10px 0 0;
    color: var(--muted);
}

.guide-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.guide-step {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    min-height: 144px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfe;
}

.guide-step span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 8px;
    background: #eef6ff;
    color: #1d4ed8;
    font-weight: 900;
}

.guide-step h3 {
    margin: 0 0 6px;
    font-size: 1rem;
}

.guide-step p {
    margin: 0;
    color: var(--muted);
}

.preflight-section {
    padding-top: 36px;
    padding-bottom: 32px;
}

.preflight-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 18px;
}

.preflight-panel {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.check-list {
    display: grid;
    gap: 12px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.check-list li {
    position: relative;
    padding-left: 34px;
    color: var(--ink);
}

.check-list li::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 0;
    width: 22px;
    height: 22px;
    border-radius: 8px;
    background: var(--surface-soft);
    border: 1px solid rgba(15, 118, 110, .22);
}

.check-list li::after {
    content: "";
    position: absolute;
    top: 9px;
    left: 7px;
    width: 8px;
    height: 5px;
    border-left: 2px solid var(--brand-dark);
    border-bottom: 2px solid var(--brand-dark);
    transform: rotate(-45deg);
}

.status-note-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.status-note-grid div {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfe;
}

.status-note-grid strong,
.status-note-grid span {
    display: block;
}

.status-note-grid strong {
    color: var(--brand-dark);
}

.status-note-grid span {
    margin-top: 4px;
    color: var(--muted);
    font-size: .9rem;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 20px;
}

.service-card,
.tracking-card,
.info-panel,
.detail-section,
.empty-state,
.precheck-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.service-card {
    display: flex;
    flex-direction: column;
    min-height: 318px;
    overflow: hidden;
    padding: 0;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.service-card:hover {
    border-color: rgba(15, 118, 110, .34);
    box-shadow: 0 24px 52px rgba(31, 41, 55, .11);
    transform: translateY(-2px);
}

.card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 0;
}

.card-head span,
.status-pill {
    display: inline-flex;
    align-items: center;
    max-width: 58%;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--brand-dark);
    font-size: .78rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.service-card-body {
    padding: 18px 18px 8px;
}

.service-card h3 {
    margin: 0 0 10px;
    font-size: 1.02rem;
    line-height: 1.3;
}

.service-card p {
    margin: 0 0 16px;
    color: var(--muted);
    min-height: 74px;
}

.service-card-footer {
    margin-top: auto;
    padding: 0 18px 18px;
}

.service-card dl,
.info-panel dl,
.tracking-summary dl {
    display: grid;
    gap: 10px;
    margin: auto 0 18px;
}

.service-card dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 14px 0;
    border-top: 1px solid var(--line);
}

.service-card .metric {
    padding: 8px 9px;
    border-radius: 8px;
}

.metric-requirement {
    background: #eef6ff;
}

.metric-recommendation {
    background: #eefbf4;
}

.metric-duration {
    background: #fff7e6;
}

dt {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.metric-requirement dt,
.metric-requirement dd {
    color: #1d4ed8;
}

.metric-recommendation dt,
.metric-recommendation dd {
    color: #047857;
}

.metric-duration dt,
.metric-duration dd {
    color: #b45309;
}

dd {
    margin: 2px 0 0;
    font-weight: 800;
    font-size: .86rem;
}

.card-action {
    width: 100%;
    min-height: 42px;
    background: #eef6f3;
    color: var(--brand-dark);
}

.card-action:hover {
    background: var(--brand);
    color: #fff;
}

.pagination-wrap {
    display: grid;
    gap: 10px;
    justify-items: center;
    margin-top: 26px;
}

.public-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.page-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.page-control,
.page-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--brand-dark);
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(31, 41, 55, .05);
}

.page-control {
    min-width: 112px;
}

.page-control:hover,
.page-number:hover,
.page-number.active {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
}

.page-control.disabled {
    color: var(--muted);
    opacity: .55;
    pointer-events: none;
}

.pagination-summary {
    margin: 0;
    color: var(--muted);
    font-size: .92rem;
    text-align: center;
}

.pagination-wrap svg {
    width: 18px;
    height: 18px;
}

.empty-state {
    grid-column: 1 / -1;
}

.detail-hero-inner {
    padding-top: 34px;
    padding-bottom: 42px;
}

.detail-title {
    display: flex;
    justify-content: space-between;
    gap: 28px;
    align-items: end;
    margin-top: 20px;
}

.back-link {
    color: #d1fae5;
}

.primary-action {
    flex: 0 0 auto;
    background: #fff;
    color: var(--brand-dark);
}

.primary-action:hover {
    background: #e9fbf6;
}

.detail-grid {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    gap: 22px;
}

.info-panel,
.detail-section,
.tracking-card,
.empty-state,
.precheck-panel {
    padding: 22px;
}

.info-panel {
    align-self: start;
    position: sticky;
    top: 94px;
}

.detail-main {
    display: grid;
    gap: 18px;
}

.requirement-list,
.timeline,
.text-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.requirement-list {
    display: grid;
    gap: 10px;
}

.requirement-list li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfe;
}

.requirement-list span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 8px;
    background: var(--brand);
    color: #fff;
    font-weight: 900;
}

.requirement-list p,
.detail-section p {
    margin: 0;
}

.text-list {
    counter-reset: public-list;
    display: grid;
    gap: 10px;
}

.text-list li {
    counter-increment: public-list;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    color: var(--ink);
    line-height: 1.5;
}

.text-list li::before {
    content: counter(public-list) ".";
    color: var(--brand-dark);
    font-weight: 900;
}

.content-html {
    color: var(--ink);
    line-height: 1.6;
}

.content-html p {
    margin: 0 0 10px;
}

.content-html ol,
.content-html ul {
    margin: 0;
    padding-left: 22px;
}

.content-html li {
    margin-bottom: 8px;
}

.content-html a {
    color: var(--brand-dark);
    font-weight: 800;
}

.simple-list {
    display: grid;
    gap: 10px;
}

.simple-list div,
.history-list div {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfe;
}

.simple-list strong,
.simple-list span,
.history-list strong,
.history-list span {
    display: block;
}

.simple-list span,
.history-list span,
.history-list p {
    color: var(--muted);
}

.two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.tracking-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 470px);
    gap: 36px;
    align-items: center;
    padding: 58px 0;
}

.notice {
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #eef6ff;
    color: #17417c;
}

.notice.warning {
    background: var(--danger-soft);
    color: var(--danger-text);
    border-color: #f7d38a;
}

.tracking-results {
    display: grid;
    gap: 18px;
}

.tracking-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr);
    gap: 20px;
    align-items: start;
}

.tracking-summary h3 {
    margin: 12px 0 6px;
}

.tracking-summary p {
    margin: 0;
    color: var(--muted);
}

.legality-check {
    display: grid;
    gap: 14px;
    margin-top: 18px;
    padding: 16px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
}

.legality-check > div:first-child {
    display: grid;
    gap: 2px;
}

.legality-check strong {
    color: #1e3a8a;
    font-size: .98rem;
}

.legality-check span {
    color: #475569;
    font-size: .88rem;
}

.legality-check dl {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.legality-check dl div {
    min-width: 0;
    padding: 10px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #dbeafe;
}

.legality-check dd {
    overflow-wrap: anywhere;
}

.timeline {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 24px 0 4px;
}

.timeline li {
    position: relative;
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
}

.timeline li::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 20px;
    right: 0;
    height: 2px;
    background: var(--line);
}

.timeline li:last-child::before {
    display: none;
}

.timeline li span {
    position: relative;
    z-index: 1;
    display: block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--line);
    border-radius: 999px;
    background: #fff;
}

.timeline li.done,
.timeline li.current {
    color: var(--brand-dark);
}

.timeline li.done span,
.timeline li.current span {
    border-color: var(--brand);
    background: var(--brand);
}

.timeline li.done::before {
    background: var(--brand);
}

.history-detail {
    margin-top: 16px;
}

.history-detail summary {
    cursor: pointer;
    color: var(--brand-dark);
    font-weight: 800;
}

.history-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.empty-state,
.precheck-panel {
    text-align: center;
}

.empty-state h3,
.precheck-panel h2 {
    margin-top: 0;
}

.empty-state p,
.precheck-panel p {
    color: var(--muted);
}

.about-hero .detail-title {
    align-items: center;
    padding: 56px 0;
    margin-top: 0;
}

.about-hero-panel {
    max-width: 390px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .16);
}

.about-hero-panel strong,
.about-hero-panel span {
    display: block;
}

.about-hero-panel span {
    margin-top: 8px;
    color: rgba(255, 255, 255, .86);
}

.about-section {
    padding-bottom: 26px;
}

.about-feature-grid,
.benefit-grid,
.tech-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.about-feature-grid article,
.tech-feature-grid article,
.benefit-grid div,
.process-list li,
.about-cta {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.about-feature-grid article {
    padding: 22px;
}

.tech-feature-grid article {
    position: relative;
    overflow: hidden;
    padding: 20px;
}

.tech-feature-grid article::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--brand);
}

.tech-feature-grid article:nth-child(3n+2)::before {
    background: var(--info);
}

.tech-feature-grid article:nth-child(3n)::before {
    background: var(--accent);
}

.about-feature-grid article span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--brand-dark);
    font-size: .78rem;
    font-weight: 900;
}

.tech-feature-grid article span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    background: #f8fafc;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.about-feature-grid h3 {
    margin: 16px 0 8px;
    font-size: 1.02rem;
}

.tech-feature-grid h3 {
    margin: 14px 0 8px;
    font-size: 1rem;
}

.about-feature-grid p,
.tech-feature-grid p,
.benefit-grid span,
.process-list span,
.about-cta p {
    color: var(--muted);
}

.about-feature-grid p,
.tech-feature-grid p,
.benefit-grid span,
.process-list span {
    margin: 0;
}

.about-split {
    display: grid;
    grid-template-columns: minmax(280px, .75fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.process-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: process-step;
}

.process-list li {
    position: relative;
    padding: 16px 18px 16px 58px;
    counter-increment: process-step;
}

.process-list li::before {
    content: counter(process-step);
    position: absolute;
    top: 17px;
    left: 18px;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 999px;
    background: #eef6ff;
    color: #1d4ed8;
    font-size: .78rem;
    font-weight: 900;
}

.process-list strong,
.benefit-grid strong {
    display: block;
    margin-bottom: 4px;
}

.benefit-grid div {
    padding: 18px;
    border-left: 4px solid var(--brand);
}

.benefit-grid div:nth-child(2),
.benefit-grid div:nth-child(5) {
    border-left-color: var(--info);
}

.benefit-grid div:nth-child(3),
.benefit-grid div:nth-child(6) {
    border-left-color: var(--accent);
}

.about-cta {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    margin-bottom: 54px;
    padding: 24px;
}

.about-cta h2 {
    margin: 0;
}

.about-cta p {
    max-width: 650px;
    margin: 8px 0 0;
}

.about-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.about-actions .primary-action {
    background: var(--brand);
    color: #fff;
}

.about-actions .primary-action:hover {
    background: var(--brand-dark);
}

.secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--brand-dark);
    font-weight: 800;
}

.secondary-button:hover {
    border-color: var(--brand);
    background: var(--surface-soft);
}

.public-footer {
    padding: 0 clamp(18px, 4vw, 56px);
    border-top: 1px solid rgba(15, 118, 110, .36);
    background: #0f172a;
    color: #cbd5e1;
}

.footer-inner {
    display: grid;
    grid-template-columns: minmax(260px, 1.3fr) repeat(3, minmax(170px, .7fr));
    gap: 28px;
    width: min(1160px, 100%);
    margin: 0 auto;
    padding: 34px 0 28px;
}

.footer-brand p {
    max-width: 430px;
    margin: 14px 0 0;
}

.footer-links,
.footer-contact {
    display: grid;
    align-content: start;
    gap: 9px;
}

.footer-links strong,
.footer-contact strong {
    color: #ffffff;
    font-size: .95rem;
}

.footer-links a,
.footer-contact a {
    color: #cbd5e1;
    font-weight: 700;
}

.footer-links a:hover,
.footer-contact a:hover {
    color: #5eead4;
}

.footer-contact span {
    display: block;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    width: min(1160px, 100%);
    margin: 0 auto;
    padding: 16px 0 20px;
    border-top: 1px solid rgba(148, 163, 184, .22);
    font-size: .9rem;
}

.developer-credit {
    color: #94a3b8;
}

.public-footer .brand strong {
    color: #ffffff;
}

.public-footer .brand small,
.public-footer .footer-brand p {
    color: #cbd5e1;
}

.public-footer .brand-mark {
    background: #14b8a6;
}

.public-footer .brand-mark-image {
    background: #ffffff;
    border-color: rgba(255, 255, 255, .18);
}

@media (max-width: 900px) {
    .hero-inner,
    .tracking-inner,
    .detail-grid,
    .tracking-summary,
    .detail-title,
    .about-split,
    .guide-inner,
    .preflight-grid,
    .hotline-panel {
        grid-template-columns: 1fr;
    }

    .hotline-panel {
        padding: 24px;
        gap: 24px;
    }

    .hotline-copy h2 {
        font-size: 1.5rem;
    }

    .about-hero .detail-title,
    .about-cta {
        align-items: flex-start;
        flex-direction: column;
    }

    .about-hero-panel {
        max-width: none;
        width: 100%;
    }

    .service-grid,
    .stats-band,
    .legality-check dl,
    .access-grid,
    .guide-steps {
        grid-template-columns: 1fr;
    }

    .stats-band div {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .stats-band div:last-child {
        border-bottom: 0;
    }

    .info-panel {
        position: static;
    }

    .timeline {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .timeline li {
        grid-template-columns: 24px minmax(0, 1fr);
        align-items: start;
    }

    .timeline li::before {
        top: 20px;
        bottom: -15px;
        left: 9px;
        width: 2px;
        height: auto;
        right: auto;
    }
}

@media (max-width: 1024px) {
    .public-topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .public-nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 10px;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, .9);
        cursor: pointer;
        padding: 0;

        /* letakkan hamburger di kanan paling atas */
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 50;
    }

    .public-nav-toggle-lines {
        width: 20px;
        height: 14px;
        position: relative;
        display: block;
    }

    .public-nav-toggle-lines::before,
    .public-nav-toggle-lines::after {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background: var(--brand-dark);
        border-radius: 2px;
    }

    .public-nav-toggle-lines::before {
        top: 0;
    }

    .public-nav-toggle-lines::after {
        bottom: 0;
    }

    .public-nav-toggle-lines {
        background:
            linear-gradient(var(--brand-dark), var(--brand-dark)) center/100% 2px
            no-repeat;
    }

    .public-nav {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: nowrap;

        display: none;
        flex-direction: column;
        gap: 6px;
        padding-top: 6px;
    }

    .public-nav.is-open {
        display: flex;
    }

    .public-nav a {
        width: 100%;
        padding: 10px 12px;
        text-align: left;
    }

    .footer-inner {
        grid-template-columns: 1fr;
    }

    .public-footer {
        padding-top: 22px;
        padding-bottom: 28px;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 30px 0 12px;
    }

    .footer-links,
    .footer-contact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: row;

        /* rapatkan jarak baris untuk tablet & smartphone */
        row-gap: 4px;
        column-gap: 10px;
    }

    .footer-links strong,
    .footer-contact strong {
        grid-column: 1 / -1;
    }

    .footer-links a,
    .footer-contact a {
        display: block;
        width: 100%;
        padding: 6px 12px;
        border-radius: 10px;
    }

    .footer-links a:hover,
    .footer-contact a:hover {
        background: rgba(255, 255, 255, .08);
    }

    .footer-bottom {
        flex-direction: column;
        gap: 8px;
    }

    .search-row,
    .filter-row,
    .two-column,
    .service-card dl,
    .status-note-grid {
        grid-template-columns: 1fr;
    }

    .hero-actions a {
        width: 100%;
    }
}

/* desktop: hamburger disembunyikan; mobile: ditampilkan via media query */