:root {
  color-scheme: light;
  --navy: #142b50;
  --ink: #182a4a;
  --muted: #54627b;
  --pink: #a9125a;
  --pink-bright: #d22d79;
  --rose: #ffe6f1;
  --mint: #d8f5f0;
  --line: #e2e7f0;
  --paper: #fff;
  --radius: 26px;
  --shadow: 0 14px 40px #233c6e1a;
  --width: 1160px;
  font-family: "Segoe UI", system-ui, sans-serif;
  line-height: 1.6;
  background: var(--paper);
  color: var(--ink);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--pink); text-underline-offset: .19em; }
button, input { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #cd3285; outline-offset: 4px; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .7em; letter-spacing: -.028em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.7rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.7rem); }
h3 { font-size: 1.22rem; }
p { margin: 0 0 1em; }
.wrap { width: min(var(--width), calc(100% - 48px)); margin-inline: auto; }
.skip { position: fixed; z-index: 10; background: white; padding: .6rem 1rem; transform: translateY(-140%); }
.skip:focus { transform: none; }
.site-header { position: sticky; top: 0; z-index: 6; color: white; background: var(--navy); box-shadow: 0 5px 24px #12234522; }
.navbar { min-height: 76px; display: flex; align-items: center; gap: clamp(1rem, 3vw, 3rem); }
.brand { display: inline-flex; align-items: center; gap: .72rem; color: inherit; text-decoration: none; font-weight: 760; line-height: 1.15; }
.brand img { object-fit: contain; width: 55px; height: 50px; }
.nav-links { display: flex; align-items: center; gap: 1.5rem; flex: 1; }
.nav-links > a, .nav-links summary { color: white; font-weight: 620; font-size: .94rem; text-decoration: none; }
.nav-links details { position: relative; }
.nav-links summary { cursor: pointer; }
.dropdown { position: absolute; top: calc(100% + .8rem); width: max-content; min-width: 190px; display: grid; gap: .25rem; border-radius: 14px; padding: .5rem; background: white; box-shadow: var(--shadow); }
.dropdown a { border-radius: 8px; color: var(--ink); padding: .5rem .65rem; text-decoration: none; }
.dropdown a:hover, .dropdown a:focus-visible { background: var(--rose); }
.nav-toggle { display: none; color: white; background: transparent; border: 1px solid #ffffff70; border-radius: 12px; width: 44px; height: 44px; }
.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid transparent; padding: .5rem 1.15rem; color: white; background: var(--pink); text-decoration: none; font-weight: 730; transition: transform .2s, box-shadow .2s, background .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px #1b234133; }
.btn-white { color: var(--navy); background: white; }
.btn-outline { color: var(--pink); background: white; border-color: #e9b2cf; }
.hero { background: linear-gradient(166deg, #142b50 3%, #293e79 35%, #82477d 61%, #c597bc 81%, #dbf4ef 100%); padding: 48px 0 55px; color: white; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0,.93fr) minmax(0,1.07fr); align-items: center; gap: 38px; }
.hero h1 { max-width: 17ch; font-size: clamp(2.1rem, 4.4vw, 3.25rem); margin: .22em 0; }
.hero p { max-width: 46ch; margin-top: .9rem; }
.eyebrow { font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.hero-strips { overflow: hidden; display: grid; gap: .65rem; min-width: 0; mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); }
.strip { display: flex; width: max-content; gap: 12px; padding-right: 12px; animation: slide 38s linear infinite; }
.strip:nth-child(2) { animation-direction: reverse; animation-duration: 44s; }
.strip:nth-child(3) { animation-duration: 49s; }
.hero-strips:hover .strip, .hero-strips:focus-within .strip, .hero-strips[data-paused] .strip { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.strip-item { width: 206px; min-height: 75px; display: flex; align-items: center; gap: .65rem; border: 1px solid #ffffff46; border-radius: 16px; padding: .55rem; background: #ffffff20; font-size: .88rem; font-weight: 720; }
.strip-item img { flex: 0 0 54px; width: 54px; height: 52px; object-fit: cover; border-radius: 10px; background: #fff; }
.hero-motion { justify-self: end; margin-top: 12px; color: white; background: #152a50c9; border: 1px solid #ffffff80; border-radius: 999px; padding: .25rem .85rem; font-size: .82rem; }
.hero-panel { position: relative; max-width: 860px; margin: 44px auto 0; padding: 2.2rem 1.25rem 1.15rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-radius: var(--radius); background: #fff8fc; color: var(--navy); box-shadow: var(--shadow); }
.hero-panel .eyebrow { position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%); padding: .36rem .95rem; border-radius: 999px; background: linear-gradient(100deg, var(--navy), var(--pink)); color: white; white-space: nowrap; }
.hero-panel strong { font-size: clamp(1.05rem, 2vw, 1.3rem); }
.section { padding: clamp(45px, 7vw, 88px) 0; }
.section.soft { background: linear-gradient(150deg, var(--mint), #fdfbff 75%, var(--rose)); }
.section.rose { background: linear-gradient(#fff, #fcf0f8 56%, #fff); }
.section-title { text-align: center; margin-bottom: 2rem; }
.section-title p { color: var(--muted); }
.section-title .eyebrow, .split .eyebrow { color: var(--pink); }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.card { overflow: hidden; border: 1px solid var(--line); background: white; box-shadow: var(--shadow); border-radius: var(--radius); display: flex; flex-direction: column; }
.card > img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.card-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 1.25rem; }
.card-body .btn { margin-top: auto; }
.card-body p, .article-date { color: var(--muted); }
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(1.4rem, 5vw, 4rem); }
.feature-image { width: 100%; max-height: 420px; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--radius); scrollbar-width: thin; }
.gallery-track > * { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.gallery-track img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.gallery-controls { display: flex; align-items: center; justify-content: center; gap: .55rem; margin: .85rem 0 0; }
.gallery-controls button { border: 1px solid var(--line); border-radius: 999px; width: 42px; height: 42px; background: white; color: var(--navy); }
.gallery-controls button[aria-current="true"] { color: white; background: var(--pink); border-color: var(--pink); }
.faq { max-width: 820px; margin: auto; }
.faq details { padding: .9rem 1.2rem; margin-bottom: .65rem; border: 1px solid var(--line); border-radius: 15px; background: white; }
.faq summary { font-weight: 740; cursor: pointer; }
.faq details[open] > div { animation: emerge .24s ease-out; margin-top: .65rem; }
@keyframes emerge { from { opacity: .2; transform: translateY(-5px); } }
.js-motion [data-reveal] { opacity: 0; transform: translateY(19px); transition: opacity .55s, transform .55s; }
.js-motion [data-reveal].in-view { opacity: 1; transform: none; }
.page-heading { background: linear-gradient(120deg, #e9edf8, #f9dfed 60%, #e3f4ed); padding: clamp(2.1rem, 6vw, 4.3rem) 0; }
.breadcrumbs { font-size: .88rem; color: var(--muted); margin-bottom: .8rem; }
.reading { max-width: 850px; margin-inline: auto; }
.reading > :first-child { margin-top: 0; }
.reading li { margin-bottom: .25rem; }
.reading h2, .reading h3 { margin-top: 1.15em; }
.reading img { border-radius: 14px; }
.reading table { max-width: 100%; border-collapse: collapse; display: block; overflow: auto; }
.reading th, .reading td { padding: .5rem; border: 1px solid var(--line); }
.reading iframe { max-width: 100%; }
.pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.search-form { display: flex; gap: .5rem; flex-wrap: wrap; }
.search-form input { min-height: 44px; border: 1px solid #a4adbf; border-radius: 14px; padding: .55rem .85rem; min-width: 13ch; flex: 1; }
.footer { background: var(--navy); color: white; padding: 2.4rem 0 1.4rem; }
.footer a { color: white; }
.footer-grid { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1.4rem; margin-bottom: 1.4rem; }
.footer small { color: #e5eaf4; }
@media (max-width: 800px) {
  .wrap { width: min(var(--width), calc(100% - 32px)); }
  .navbar { min-height: 64px; gap: .6rem; justify-content: space-between; }
  .brand img { width: 42px; height: 42px; }
  .nav-toggle { display: inline-grid; place-items: center; flex: 0 0 44px; }
  .nav-links { position: absolute; display: none; top: 100%; right: 0; left: 0; padding: 1rem 1.2rem; background: var(--navy); }
  .nav-links[data-open] { display: grid; align-items: start; gap: .85rem; }
  .dropdown { position: static; margin-top: .5rem; }
  .hero { padding-top: 32px; }
  .hero-grid, .split { grid-template-columns: 1fr; gap: 22px; }
  .hero-intro { text-align: center; }
  .hero h1, .hero p { margin-left: auto; margin-right: auto; }
  .hero-panel { margin-top: 32px; flex-direction: column; text-align: center; }
  .card-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
}
@media (max-width: 440px) {
  .card-body { padding: .85rem; }
  .card-body .btn { font-size: .85rem; padding-inline: .7rem; }
  .brand span { max-width: 8ch; }
  .navbar > .btn { font-size: .85rem; padding-inline: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js-motion [data-reveal] { opacity: 1; transform: none; }
  .hero-motion { display: none; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.reading .et_pb_row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: start; }
.reading .et_pb_column { min-width: min(260px, 100%); flex: 1; }
.reading .et_pb_column_4_4 { flex-basis: 100%; }
.reading .et_pb_section, .reading .et_pb_module { margin-bottom: 1.4rem; }
.reading .et_pb_button { display: inline-block; padding: .55rem 1rem; border-radius: 999px; background: var(--pink); color: white; font-weight: 700; text-decoration: none; }
.reading .et_pb_toggle { padding: .75rem 1rem; border: 1px solid var(--line); border-radius: 12px; }
.reading .et_pb_gallery_items { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: .8rem; }
.comment-form { display: grid; gap: 1rem; max-width: 580px; margin: 1.4rem 0; }
.comment-form label:not([hidden]) { display: grid; gap: .35rem; font-weight: 690; }
.comment-form input, .comment-form textarea { padding: .6rem .8rem; border: 1px solid #a4adbf; border-radius: 12px; font: inherit; }
.comment-form .btn { justify-self: start; }
#search-results article { padding: .75rem 0; border-bottom: 1px solid var(--line); }
.service-note { border-radius: 16px; padding: 1rem 1.2rem; margin-bottom: 1.5rem; background: #eff8f8; border: 1px solid #c9e6e5; }
.service-note p { margin: .35rem 0 .7rem; }
.legacy-section { margin: 1.5rem 0; }
.legacy-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.card > img[src^="/assets/visual/"] { object-position: 50% 32%; }
.reading img.ai-archive { max-height: 370px; width: min(100%, 640px); object-fit: cover; }

.longform { max-width: 780px; }
.longform [data-page-body] { font-size: clamp(1rem, 1.6vw, 1.09rem); line-height: 1.9; overflow-wrap: anywhere; }
.longform [data-page-body] p { text-align: justify; hyphens: auto; }
.longform [data-page-body] h2, .longform [data-page-body] h3 { text-align: start; }
.article-cover { margin: 1.1rem 0 2rem; }
.article-cover img { width: 100%; max-height: 410px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.article-actions { display: flex; gap: .6rem; margin: 0 0 .7rem; }
.card-cover { display: block; }
.card-cover img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover { color: var(--pink); text-decoration: underline; }
.card-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; }
.share-button { gap: .4rem; }
.share-feedback { position: fixed; z-index: 9; bottom: 1.2rem; left: 50%; transform: translateX(-50%); background: var(--navy); color: white; border-radius: 14px; box-shadow: var(--shadow); padding: .7rem 1rem; }
.footer a { text-decoration: none; }
.footer a:hover { color: #f9a9d0; }
.brand img { background: transparent; filter: drop-shadow(0 2px 5px #f0b4da60); }
.journey { background: linear-gradient(155deg,#fff,#eff7fa 60%,#f8f0f9); }
.journey-grid .card { border-radius: 20px; }
.step-number { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1rem; border-radius: 15px; font-weight: 850; color: #8c2159; background: var(--rose); }
.mentors { background: linear-gradient(150deg,#e3f5ee,#fbf8ff 70%,#fff); }
.mentor-photos { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.mentor-photos img { width: 100%; aspect-ratio: 4/4.8; object-fit: cover; border-radius: 22px; box-shadow: var(--shadow); }
.mentor-photos img:nth-child(2) { margin-top: 1.4rem; }
.story { padding-block: 2.5rem; }
.story-panel { display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; padding: clamp(1.3rem,5vw,3.2rem); color: white; border-radius: var(--radius); background: linear-gradient(128deg,var(--navy),#654474 74%,#923d70); }
.story-panel p { margin-bottom: 0; }
.closing-panel { text-align: center; padding: clamp(1.6rem,5vw,3rem); border-radius: var(--radius); background: linear-gradient(135deg,#f9e0ee,#edf3fa 80%); }
@media (max-width: 600px) {
  .journey-grid { grid-template-columns: 1fr; }
  .story-panel { flex-direction: column; align-items: start; }
}
p { text-align: justify; hyphens: auto; }
.brand img { width: clamp(70px, 7vw, 105px); height: 50px; border-radius: 14px; }
.four-up { grid-template-columns: repeat(4,minmax(0,1fr)); }
.spotlights { background: linear-gradient(110deg,#fbe6f0,#f0eefc 66%,#e6f5f1); }
.spotlight-track { max-width: 800px; margin: auto; }
.spotlight-slide .card { display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,1fr); }
.spotlight-slide .card-cover img { height: 100%; max-height: 250px; }
.catalog-tools { display: flex; flex-wrap: wrap; gap: .7rem; align-items: end; justify-content: space-between; margin-bottom: 1.1rem; }
.catalog-filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.catalog-filters [aria-pressed="true"] { background: var(--pink); color: white; }
.catalog-search { display: grid; gap: .2rem; font-size: .85rem; font-weight: 700; }
.catalog-search input { min-height: 44px; border: 1px solid #a4adbf; border-radius: 13px; padding: .45rem .7rem; }
.catalog [data-program-card] > .card { height: 100%; }
.quick-contact { position: fixed; z-index: 5; bottom: 1rem; right: 1rem; display: inline-flex; align-items: center; gap: .45rem; padding: .68rem .9rem; border-radius: 999px; background: #116750; color: white; font-size: .89rem; font-weight: 760; text-decoration: none; box-shadow: var(--shadow); transition: transform .2s; }
.quick-contact:hover { transform: translateY(-3px); }
@media (max-width: 950px) { .four-up { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) {
  .spotlight-slide .card { display: flex; }
  .spotlight-slide .card-cover img { height: auto; }
  .brand img { width: 72px; }
  .navbar .brand span { display: none; }
  .quick-contact span { display: none; }
}
a, a:hover, a:focus { text-decoration: none; }
.reading a:hover, .card h3 a:hover { color: #8d1652; }
.card h3 a:hover { text-decoration: none; }
.section-title > p, .closing-panel > p { text-align: center; text-wrap: balance; }
/* Peralihan lembut dan ornamen beranda. */
.hero, .soft, .spotlights, .journey, .mentors, .rose { position: relative; isolation: isolate; overflow: hidden; }
.hero > .wrap, .soft > .wrap, .spotlights > .wrap, .journey > .wrap, .mentors > .wrap, .rose > .wrap { position: relative; z-index: 1; }
.hero, .soft, .spotlights, .journey, .mentors { padding-bottom: calc(clamp(45px, 7vw, 88px) + 25px); }
.hero::after, .soft::after, .spotlights::after, .journey::after, .mentors::after {
  position: absolute; inset: auto -1px -1px;
  height: clamp(28px, 5vw, 80px);
  content: "";
  pointer-events: none;
  background: var(--wave-color, white);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 88' preserveAspectRatio='none'%3E%3Cpath d='M0 35C190 90 366 87 564 51S905-6 1105 17 1333 67 1440 28V88H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.soft::after, .journey::after { transform: scaleX(-1); }
.journey { --wave-color: #e3f5ee; }
.hero::before, .soft::before, .spotlights::before, .mentors::before {
  content: "";
  pointer-events: none;
  position: absolute;
  width: min(300px, 36vw);
  aspect-ratio: 1;
  border: 1px solid currentColor;
  border-radius: 50%;
  inset: 8% auto auto -10%;
  color: #f6bde989;
  box-shadow: 0 0 0 24px #f6bde92a, 0 0 0 48px #f6bde917, 0 0 0 70px #f6bde910;
}
.soft::before, .mentors::before { color: #63bbae4d; box-shadow: 0 0 0 20px #64b8ae1c, 0 0 0 42px #64b8ae13; inset: 12% -10% auto auto; }
.spotlights::before { inset: 14% auto auto -9%; color: #b7569652; box-shadow: 0 0 0 20px #b756961c, 0 0 0 44px #b7569612; }
.hero {
  background: radial-gradient(ellipse at 8% 32%, #395c9a55, transparent 46%),
              radial-gradient(ellipse at 84% 59%, #e996c755, transparent 45%),
              linear-gradient(165deg,#142b50 5%,#253e75 35%,#814977 67%,#c392ba 88%,#ddf4ed 100%);
}
.soft { background: radial-gradient(ellipse at 90% 15%,#bcebe19a,transparent 44%), linear-gradient(158deg,#e5f8f4,#f9f2fc 74%,#fff); }
.spotlights { background: radial-gradient(ellipse at 93% 55%,#ccede3b0,transparent 48%), linear-gradient(122deg,#f9deec,#eeecfb 66%,#f0faf6); }
.hero-intro::after, .section-title::before {
  content: "";
  display: block;
  width: 37px;
  height: 21px;
  margin: .7rem auto;
  background: radial-gradient(circle at 30% 45%,currentColor 0 3px,transparent 4px),
              radial-gradient(circle at 75% 25%,currentColor 0 2px,transparent 3px),
              radial-gradient(circle at 63% 78%,currentColor 0 2px,transparent 3px);
  color: #cf5d9a;
  opacity: .7;
}
.hero-intro::after { margin: .7rem 0 0; color: #ffd2ed; animation: hero-ornament 6s ease-in-out infinite; }
@keyframes hero-ornament { 50% { transform: translateY(-5px) rotate(10deg); } }
.section-title::before { margin: 0 auto .35rem; }
@media (max-width: 800px) {
  .hero-intro::after { margin-inline: auto; }
  .hero::before, .soft::before, .spotlights::before, .mentors::before { opacity: .65; }
}
.testimonials { scroll-margin-top: 78px; position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 12% 32%,#f3c9e388,transparent 45%), linear-gradient(144deg,#fbebf7,#edf3fc 62%,#e4f4ef); }
.testimonials::after { position: absolute; content: ""; pointer-events: none; inset: auto -1px -1px; height: clamp(28px, 5vw, 78px); background: #e3f5ee; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 42C180 11 340 5 520 38S900 86 1100 47 1300 10 1440 33V80H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; z-index: -1; }
.testimonial-track { max-width: 820px; margin: auto; }
.testimonial-slide { padding: .6rem; }
.testimonial-card { position: relative; min-height: 230px; margin: 0; padding: clamp(1.35rem, 4vw, 2.35rem); display: grid; gap: .9rem; align-content: center; border: 1px solid #e2d4e6; border-radius: var(--radius); background: #ffffffed; box-shadow: 0 10px 24px #233c6e12; }
.testimonial-card blockquote { margin: 0; padding-inline-end: 1.5rem; font-size: clamp(1.05rem, 2.15vw, 1.25rem); }
.testimonial-card blockquote p { margin: 0; }
.quote-mark { position: absolute; top: .15rem; right: .65rem; color: #bb3572; opacity: .33; font: 5rem/.9 Georgia, serif; pointer-events: none; }
.testimonial-card figcaption { display: flex; align-items: center; gap: .75rem; }
.testimonial-card figcaption small { display: block; color: var(--muted); }
.testimonial-avatar { display: grid; place-items: center; flex: 0 0 45px; height: 45px; border-radius: 15px; color: #811d53; background: #f9d8eb; font-weight: 830; }

/* Identitas situs dan tata baca artikel. */
.site-header .brand, .footer .brand {
  display: inline-flex;
  flex: 0 0 auto;
  padding: .35rem .65rem;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 4px 16px #142b5036;
}
.site-header .brand img, .footer .brand img {
  width: clamp(82px, 8vw, 114px);
  height: auto;
  border-radius: 0;
  filter: none;
}
.longform [data-page-body] {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.03rem, 1.5vw, 1.16rem);
  line-height: 1.9;
  color: #23324c;
}
.longform [data-page-body] :is(h2,h3,h4,h5,h6,figcaption,table) {
  font-family: "Segoe UI", system-ui, sans-serif;
}
.longform [data-page-body] :is(h2,h3,h4,h5,h6) {
  color: var(--navy);
  margin-block: 1.5em .55em;
}
.longform [data-page-body] li { margin-block: .35em; }
.longform [data-page-body] img { max-width: 100%; height: auto; }
.longform [data-page-body] blockquote {
  margin: 1.5em 0;
  padding: .8em 1.1em;
  border-inline-start: 4px solid #c44083;
  border-radius: 0 15px 15px 0;
  background: #fcf1f8;
}
.longform [data-page-body] figcaption { color: var(--muted); font-size: .85rem; }

/* Testimoni dengan panggung, aksen cahaya, dan kartu berlapis. */
.testimonials {
  padding-block: clamp(54px, 8vw, 110px);
  background: radial-gradient(ellipse at 82% 25%,#a2387865,transparent 44%),
              radial-gradient(ellipse at 11% 70%,#5ac0b345,transparent 38%),
              linear-gradient(145deg,#142b50,#232e5a 66%,#4e3969);
  color: white;
}
.testimonials::before {
  content: "";
  position: absolute;
  inset: 12% auto auto -90px;
  width: 265px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid #a7dbed44;
  box-shadow: 0 0 0 22px #a7dbed17,0 0 0 45px #a7dbed0e;
  pointer-events: none;
}
.testimonials .section-title .eyebrow { color: #ffcce7; }
.testimonials .section-title > p { color: #e7ebfa; }
.testimonial-track { max-width: 940px; }
.testimonial-slide { padding: 1rem .8rem 1.45rem; }
.testimonial-card {
  min-height: clamp(250px,31vw,325px);
  padding: clamp(1.35rem,5vw,3.3rem);
  border: 1px solid #fff9;
  border-radius: 32px;
  background: linear-gradient(145deg,#fff 50%,#f9eaf6);
  color: #172a4d;
  box-shadow: 0 8px 0 -3px #e69ac0,0 18px 0 -7px #9479b6,0 23px 36px #090f3055;
}
.testimonial-card blockquote {
  max-width: 46ch;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.09rem,2.15vw,1.55rem);
  line-height: 1.58;
}
.testimonial-card .quote-mark { right: 5%; top: 2%; font-size: clamp(5rem,14vw,12rem); opacity: .16; }
.testimonial-avatar { background: linear-gradient(145deg,#f4c9e5,#eee5fb); }
.testimonials .gallery-controls button { background: #ffffff15; color: white; border-color: #ffffff65; }
.testimonials .gallery-controls button[aria-current="true"] { background: #fff; color: #7e2458; border-color: #fff; }

.article-social {
  margin-top: 2.4rem;
  padding: 1.15rem 0;
  border-block: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .8rem;
  color: var(--navy);
}
.article-social-links { display: flex; align-items: center; gap: .5rem; }
.share-icon {
  width: 44px; height: 44px; display: inline-grid; place-items: center;
  border: 1px solid #dce2ef; border-radius: 14px; background: #f5f7fd;
  color: var(--navy); transition: transform .15s, background .15s;
}
.share-icon:hover { background: #f6e5f1; transform: translateY(-2px); }
.share-icon.whatsapp { color: #087653; background: #e6f8ee; }
.share-icon.facebook { color: #125fc4; background: #eaf2ff; }
.share-icon.x { color: #172239; }
.comment-compose { margin-top: .9rem; }
.comment-compose summary { list-style: none; cursor: pointer; }
.comment-compose summary::-webkit-details-marker { display: none; }
.comment-compose[open] > p { margin-top: .7rem; color: var(--muted); }

.navbar-actions { display: flex; align-items: center; flex: 0 0 auto; gap: .45rem; }
.navbar-actions .btn { white-space: nowrap; }
.btn-contact { color: white; border: 1px solid #ffffff65; background: transparent; }
@media (max-width: 800px) {
  .navbar-actions { gap: .3rem; }
  .navbar-actions .btn { min-height: 40px; padding-inline: .63rem; font-size: .83rem; }
}
@media (max-width: 400px) { .navbar-actions .cbt-words { display: none; } }