:root { --navy: #011c39; --yellow: #ffd550; --teal: #186265; --teal-dark: #0f4547; --heading: #0d3b45; --text: #60666c; --soft: #eef4f4; }
body { font-family: 'Krub', sans-serif; color: var(--text); background: #fff; font-size: 16px; }
h1, h2, h3, h4, h5, .rubik { font-family: 'Rubik', sans-serif; color: var(--heading); }
a { color: var(--teal); }
a:hover, a:focus, .btn:hover, .btn:focus { text-decoration: none; }
.btn { border-radius: 0; }
.btn-yellow { background: var(--yellow); color: var(--heading); font-weight: 600; border: 0; padding: .8rem 1.6rem; border-radius: 0; }
.btn-yellow:hover { background: #ffcb2b; color: var(--heading); }
.btn-teal { background: var(--teal); color: #fff; font-weight: 600; border: 0; padding: .8rem 1.6rem; border-radius: 0; }
.btn-teal:hover { background: var(--teal-dark); color: var(--yellow); }

/* ---------------- header */
.hdr { position: sticky; top: 0; z-index: 50; display: flex; box-shadow: 0 2px 12px rgba(0, 0, 0, .08); }
.hdr-logo { background: var(--navy); width: 270px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0 1rem; }
.hdr-logo a { color: #fff; font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 1.6rem; text-decoration: none; white-space: nowrap; }
.hdr-logo i { color: var(--yellow); }
.hdr-main { flex: 1; min-width: 0; }
.hdr-top { background: var(--navy); color: #fff; font-size: .9rem; padding: .7rem 2rem; display: flex; gap: 1.75rem; align-items: center; }
.hdr-top i { color: var(--yellow); margin-right: .35rem; }
.hdr-top a { color: #fff; }
.hdr-nav { background: var(--yellow); display: flex; align-items: center; padding: 0 1rem 0 2rem; min-height: 78px; }
.hdr-nav .nav-links { display: flex; gap: 2rem; flex-wrap: wrap; }
.hdr-nav .nav-links a { color: var(--heading); font-weight: 500; font-size: 1.05rem; text-decoration: none; padding: .5rem 0; border-bottom: 3px solid transparent; }
.hdr-nav .nav-links a:hover, .hdr-nav .nav-links a.active { border-bottom-color: var(--teal); }
.hdr-nav .hdr-btn { margin-left: auto; background: #fff; color: var(--heading); font-weight: 600; padding: .9rem 1.6rem; text-decoration: none; white-space: nowrap; }
.hdr-nav .hdr-btn:hover { background: var(--navy); color: #fff; }
.hdr-toggle { display: none; margin-left: .75rem; background: none; border: 0; font-size: 1.75rem; color: var(--heading); }

/* ---------------- hero slider */
.hero { position: relative; height: 82vh; min-height: 520px; overflow: hidden; background: var(--navy); }
.slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1s ease; display: flex; align-items: center; }
.slide.active { opacity: 1; z-index: 1; }
.slide::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(1, 28, 57, .92) 0%, rgba(24, 98, 101, .7) 45%, rgba(24, 98, 101, .15) 100%); }
.slide-body { position: relative; max-width: 720px; padding-left: 210px; color: #fff; transform: translateY(20px); transition: transform 1s ease; }
.slide.active .slide-body { transform: none; }
.slide-label { color: var(--yellow); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; font-size: .95rem; }
.slide-label::before { content: '\21B3'; margin-right: .5rem; }
.slide h1 { color: #fff; font-size: 3.4rem; font-weight: 700; line-height: 1.15; margin: .6rem 0 1rem; }
.slide p { font-size: 1.2rem; margin-bottom: 2rem; color: rgba(255, 255, 255, .9); }
.dots { position: absolute; z-index: 5; left: 60px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.dots::before, .dots::after { content: ''; width: 1px; height: 110px; background: rgba(255, 255, 255, .5); }
.dots button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .7); background: transparent; color: #fff; font-weight: 600; font-family: 'Rubik', sans-serif; }
.dots button.active { background: var(--yellow); border-color: var(--yellow); color: var(--heading); }

/* ---------------- section umum */
.sec { padding: 90px 0; }
.sec-label { color: #d9a600; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; font-size: .95rem; }
.sec-label::before { content: '\2198'; margin-right: .4rem; }
.sec-title { font-size: 2.6rem; font-weight: 700; margin: .4rem 0 0; }

/* ---------------- personal */
.personal-wrap { position: relative; z-index: 3; margin-top: -70px; }
.personal-box { background: #fff; box-shadow: 0 10px 40px rgba(1, 28, 57, .12); padding: 1.75rem 1.75rem .75rem; }
.p-card { border-left: 4px solid var(--yellow); background: var(--soft); padding: 1.1rem 1.25rem; height: 100%; display: flex; flex-direction: column; }
.p-card.teal { border-left-color: var(--teal); }
.p-card.navy { border-left-color: var(--navy); }
.p-card .p-title { font-family: 'Rubik', sans-serif; font-weight: 600; color: var(--heading); font-size: 1.05rem; margin-bottom: .25rem; }
.p-card .big { font-family: 'Rubik', sans-serif; font-size: 1.9rem; font-weight: 700; color: var(--heading); line-height: 1.1; }
.p-card small { margin-top: .25rem; }
.p-card .btn { align-self: flex-start; margin-top: .75rem; padding: .45rem 1rem; font-size: .9rem; }

/* ---------------- kartu layanan */
.svc { position: relative; margin: 0 14px 34px 0; height: calc(100% - 34px); }
.svc::after { content: ''; position: absolute; left: 20px; top: 20px; right: -14px; bottom: -20px; background: var(--soft); z-index: 0; transition: background .3s; }
.svc:hover::after { background: var(--teal); }
.svc-in { position: relative; z-index: 1; background: #fff; border: 1px solid #e3eaea; border-left: 3px solid var(--yellow); height: 100%; display: flex; flex-direction: column; }
.svc-img { background: linear-gradient(135deg, var(--soft), #dfe9e9); height: 190px; display: flex; align-items: center; justify-content: center; position: relative; }
.svc-img img { max-height: 120px; max-width: 70%; object-fit: contain; }
.svc-img .svc-icon { position: absolute; right: 18px; bottom: -22px; width: 48px; height: 48px; background: var(--yellow); color: var(--heading); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.svc-body { padding: 1.9rem 1.75rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
.svc-body h3 { font-size: 1.45rem; font-weight: 600; margin-bottom: .6rem; }
.svc-body p { flex: 1; }
.svc-body .svc-btn { align-self: flex-start; border: 1px solid #d5dfdf; color: var(--heading); font-weight: 600; padding: .55rem 1.2rem; text-decoration: none; }
.svc:hover .svc-btn { background: var(--teal); border-color: var(--teal); color: #fff; }
.svc a.svc-link { color: inherit; text-decoration: none; display: block; height: 100%; }

/* ---------------- langkah & banner */
.steps { background: var(--teal); color: rgba(255, 255, 255, .85); padding: 90px 0 170px; position: relative; overflow: hidden; }
.steps::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 22px); }
.steps .sec-title { color: #fff; }
.step { position: relative; padding-right: 2rem; }
.step-no { font-family: 'Rubik', sans-serif; font-size: 4rem; font-weight: 700; color: transparent; -webkit-text-stroke: 1px rgba(255, 213, 80, .7); line-height: 1; }
.step h4 { color: #fff; font-size: 1.35rem; margin: .5rem 0 .6rem; }
.banner-wrap { margin-top: -110px; position: relative; z-index: 2; }
.banner { background: var(--yellow); padding: 3rem 4rem; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; position: relative; overflow: hidden; }
.banner::before, .banner::after { content: ''; position: absolute; width: 140px; height: 140px; background: rgba(255, 255, 255, .25); transform: rotate(45deg); }
.banner::before { left: -70px; bottom: -70px; }
.banner::after { right: -70px; top: -70px; }
.banner h2 { font-size: 2.2rem; font-weight: 700; margin: 0; flex: 1; min-width: 260px; position: relative; }
.banner .btn-teal { position: relative; }

/* ---------------- footer */
.ftr { background: var(--teal-dark); color: rgba(255, 255, 255, .75); padding: 80px 0 0; margin-top: 90px; }
.ftr h5 { color: #fff; font-size: 1.25rem; margin-bottom: 1.25rem; }
.ftr a { color: rgba(255, 255, 255, .8); }
.ftr a:hover { color: var(--yellow); text-decoration: none; }
.ftr ul { list-style: none; padding: 0; }
.ftr li { margin-bottom: .6rem; }
.ftr li::before { content: '\203A'; color: var(--yellow); margin-right: .5rem; }
.ftr-brand { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 1.6rem; color: #fff; }
.ftr-bottom { background: rgba(0, 0, 0, .2); margin-top: 50px; padding: 1.1rem 0; font-size: .9rem; }

@media (max-width: 991.98px) {
	.hdr-logo { width: auto; padding: 0 1.25rem; }
	.hdr-top { display: none; }
	.hdr-nav { padding: 0 1rem; min-height: 64px; flex-wrap: wrap; }
	.hdr-toggle { display: block; }
	.hdr-nav .nav-links { display: none; width: 100%; order: 3; flex-direction: column; gap: 0; padding: .5rem 0 1rem; }
	.hdr-nav.open .nav-links { display: flex; }
	.hdr-nav .hdr-btn { padding: .6rem 1rem; }
	.slide-body { padding-left: 90px; padding-right: 20px; }
	.slide h1 { font-size: 2.4rem; }
	.dots { left: 24px; }
	.sec-title { font-size: 2rem; }
	.banner { padding: 2rem; }
}
@media (max-width: 575.98px) {
	.hdr-logo a { font-size: 1.2rem; }
	.hdr-nav .hdr-btn span { display: none; }
	.hero { height: 72vh; min-height: 460px; }
	.slide-body { padding-left: 70px; }
	.slide h1 { font-size: 1.9rem; }
	.slide p { font-size: 1rem; }
	.dots::before, .dots::after { height: 50px; }
	.dots button { width: 32px; height: 32px; font-size: .85rem; }
	.sec { padding: 60px 0; }
}

/* ---------------- halaman dalam (Info Family Day, Majalah) */
.page-banner { position: relative; padding: 90px 0 80px; color: #fff; background: var(--navy) url('../img/portal/bg.jpg') center/cover; overflow: hidden; }
.page-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(1, 28, 57, .94) 0%, rgba(24, 98, 101, .8) 60%, rgba(24, 98, 101, .45) 100%); }
.page-banner .container { position: relative; }
.page-banner h1 { color: #fff; font-size: 3rem; font-weight: 700; margin: .5rem 0 1rem; }
.crumb { display: inline-flex; gap: .6rem; background: rgba(255, 255, 255, .1); padding: .55rem 1.2rem; font-weight: 500; }
.crumb a { color: #fff; }
.crumb a:hover { color: var(--yellow); }
.crumb span { color: var(--yellow); }
.box { background: #fff; border: 1px solid #e3eaea; border-left: 4px solid var(--yellow); padding: 2rem; position: relative; }
.box + .box { margin-top: 2rem; }
.box-teal { background: var(--teal); color: rgba(255, 255, 255, .88); border: 0; }
.box-teal h3, .box-teal h4 { color: #fff; }
.facts { list-style: none; padding: 0; margin: 0; }
.facts li { display: flex; gap: 1rem; align-items: center; padding: .85rem 0; border-bottom: 1px dashed rgba(255, 255, 255, .25); }
.facts li:last-child { border-bottom: 0; }
.facts .ic { width: 46px; height: 46px; flex-shrink: 0; background: var(--yellow); color: var(--heading); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; }
.facts small { display: block; color: rgba(255, 255, 255, .7); }
.facts b { color: #fff; font-family: 'Rubik', sans-serif; font-weight: 500; font-size: 1.1rem; }
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { padding: .45rem 0 .45rem 2rem; position: relative; }
.check-list li::before { content: '\2713'; position: absolute; left: 0; top: .4rem; width: 1.4rem; height: 1.4rem; background: var(--yellow); color: var(--heading); font-weight: 700; font-size: .8rem; display: flex; align-items: center; justify-content: center; }
.doc .svc-img { height: 150px; }
.doc .svc-img i { font-size: 64px; color: var(--teal); }
.status-pill { display: inline-block; padding: .4rem 1rem; font-weight: 600; background: rgba(255, 255, 255, .15); color: #fff; }
.status-pill.open { background: var(--yellow); color: var(--heading); }
.mj .svc-img { height: auto; padding: 0; background: var(--soft); }
.mj .svc-img img { max-height: none; max-width: 100%; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.mj .svc-img .ph { aspect-ratio: 3 / 4; width: 100%; display: flex; align-items: center; justify-content: center; font-size: 72px; color: #b8caca; }
.mj-new { position: absolute; left: 0; top: 18px; z-index: 2; background: var(--yellow); color: var(--heading); font-weight: 600; font-size: .85rem; padding: .35rem .9rem; }
.reader { background: #fff; border: 1px solid #e3eaea; border-top: 4px solid var(--yellow); }
.reader iframe { width: 100%; height: 82vh; border: 0; display: block; }
@media (max-width: 575.98px) {
	.page-banner { padding: 60px 0 50px; }
	.page-banner h1 { font-size: 2rem; }
	.box { padding: 1.4rem; }
	.reader iframe { height: 70vh; }
}