.aa-hero { background: linear-gradient(135deg, #094990 0%, #0b5cb8 55%, #0a73c8 100%); position: relative; overflow: hidden; padding: 70px 0 75px; }
.aa-hero:before, .aa-hero:after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,0.08); }
.aa-hero:before { width: 300px; height: 300px; right: -80px; top: -80px; }
.aa-hero:after { width: 220px; height: 220px; left: -70px; bottom: -70px; }
.aa-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.6fr 1fr; gap: 30px; align-items: center; }
.aa-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; font-size: 0.9rem; color: #d8ecff; }
.aa-breadcrumb a { color: #ffffff; text-decoration: none; font-weight: 600; }
.aa-breadcrumb .current { color: #d8ecff; }
.aa-hero h1 { color: #ffffff; font-size: 2.4rem; line-height: 1.2; margin: 0 0 14px; }
.aa-hero p { color: #e7f3ff; font-size: 1.08rem; line-height: 1.85; margin: 0; }
.aa-hero-media { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.35); box-shadow: 0 14px 35px rgba(0,0,0,0.25); }
.aa-hero-media img { width: 100%; height: 280px; object-fit: cover; display: block; }

.aa-page { background: #f7f9fc; padding: 45px 0 80px; }
.aa-section { margin-bottom: 40px; }
.aa-title { color: #EA3516; font-size: 1.7rem; line-height: 1.3; margin: 0 0 14px; }
.aa-copy { color: #595959; font-size: 1.02rem; line-height: 1.9; margin: 0 0 10px; }

.aa-flow { border-top: 1px solid #dce6f4; margin-top: 8px; }
.aa-item { display: grid; grid-template-columns: 72px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid #dce6f4; }
.aa-index { width: 52px; height: 52px; border-radius: 50%; background: #094990; color: #fff; font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.aa-item:nth-child(even) .aa-index { background: #EF7B00; }
.aa-main h3 { color: #595959; margin: 0 0 8px; font-size: 1.25rem; line-height: 1.35; }
.aa-main > p { margin: 0 0 12px; color: #EF7B00; font-weight: 700; line-height: 1.7; }
.aa-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aa-detail { margin: 0; border-left: 3px solid #d7e4f5; background: #f8fbff; color: #595959; line-height: 1.8; padding: 10px 12px; }
.aa-label { color: #094990; font-weight: 700; }

.aa-workflow-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 24px; align-items: start; margin-top: 12px; }
.aa-workflow-media { margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid #dce6f4; box-shadow: 0 8px 24px rgba(13,35,67,0.12); }
.aa-workflow-media img { width: 100%; height: auto; max-height: 320px; object-fit: contain; display: block; background: #fff; }
.aa-workflow-list { border-top: 1px solid #dce6f4; margin-top: 0; }
.aa-workflow-item { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: start; border: 1px solid #dce6f4; border-left: 4px solid #094990; border-radius: 10px; background: #ffffff; box-shadow: 0 6px 14px rgba(13,35,67,0.06); margin-top: 12px; padding: 14px 16px; color: #595959; line-height: 1.8; }
.aa-workflow-item:nth-child(even) { border-left-color: #EF7B00; }
.aa-workflow-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #f2f6fd; border: 1px solid #d4e1f3; color: #094990; font-size: 0.85rem; margin-top: 2px; }
.aa-workflow-content span { color: #094990; font-weight: 700; }

.aa-section--cta { margin-bottom: 0; }
.aa-cta { max-width: 900px; margin: 0 auto; border-radius: 14px; padding: 34px; background: linear-gradient(135deg, #0f4b8e 0%, #094990 100%); color: #fff; }
.aa-cta h2 { font-size: 1.55rem; line-height: 1.25; margin: 0 0 12px; color: #fff; }
.aa-cta p { margin: 0; line-height: 1.65; color: #fff; font-size: 0.92rem; }
.aa-cta-links { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; }
.aa-cta-links .btn-oreng, .aa-btn-outline { display: inline-block; font-size: 14px; line-height: 1.2; padding: 9px 14px; }
.aa-btn-outline { border: 1px solid #ffffff; color: #fff; background: transparent; border-radius: 5px; font-weight: 600; text-decoration: none; }
.aa-btn-outline:hover, .aa-btn-outline:focus { background: rgba(255,255,255,0.14); color: #fff; text-decoration: none; }

@media (max-width: 991px) {
    .aa-hero-inner { grid-template-columns: 1fr; }
    .aa-hero-media img { height: 230px; }
    .aa-item { grid-template-columns: 1fr; gap: 12px; }
    .aa-detail-grid { grid-template-columns: 1fr; }
    .aa-workflow-layout { grid-template-columns: 1fr; gap: 16px; }
    .aa-workflow-item { grid-template-columns: 36px 1fr; }
}
@media (max-width: 576px) {
    .aa-hero h1 { font-size: 1.9rem; }
    .aa-title { font-size: 1.45rem; }
    .aa-cta { padding: 28px 20px; }
    .aa-cta h2 { font-size: 1.35rem; }
    .aa-cta p { font-size: 0.88rem; }
    .aa-cta-links .btn-oreng, .aa-btn-outline { font-size: 13px; padding: 8px 12px; }
}