:root {
--udt-accent: #0b6b57;
--udt-bg: #f6f8f7;
--udt-text: #13201c;
--udt-muted: #56645f;
--udt-border: #e3e9e6;
--udt-dark: #0e1f1a;
--udt-radius: 14px;
--udt-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
}
body.udt {
margin: 0;
background: #e9eeec;
color: var(--udt-text);
font-family: var(--udt-font);
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
body.udt img {
max-width: 100%;
height: auto;
}
body.udt a {
color: var(--udt-accent);
}
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}
.udt-skip {
position: absolute;
left: -9999px;
top: 8px;
z-index: 100;
padding: 8px 12px;
background: #fff;
border-radius: 8px;
}
.udt-skip:focus {
left: 8px;
} .udt-app {
max-width: 480px;
min-height: 100vh;
margin: 0 auto;
background: var(--udt-bg);
padding-bottom: 72px;
box-shadow: 0 0 0 1px rgba(19, 32, 28, 0.04), 0 10px 40px rgba(19, 32, 28, 0.06);
}
.udt-main {
display: flex;
flex-direction: column;
gap: 8px;
} .udt-header {
position: sticky;
top: 0;
z-index: 30;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
background: #fff;
border-bottom: 1px solid var(--udt-border);
}
.udt-logo {
flex: 0 0 auto;
display: flex;
align-items: center;
max-width: 44%;
color: var(--udt-text) !important;
font-weight: 700;
text-decoration: none;
}
.udt-logo img {
display: block;
max-height: 36px;
width: auto;
}
.udt-search {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
height: 40px;
padding: 0 12px;
border-radius: 99px;
background: var(--udt-bg);
border: 1px solid var(--udt-border);
color: var(--udt-muted);
}
.udt-search:focus-within {
border-color: var(--udt-accent);
}
.udt-search input {
flex: 1;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
font: inherit;
font-size: 14px;
color: var(--udt-text);
} .udt-sec {
background: #fff;
padding: 18px 16px;
}
.udt-sec-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.udt-sec-head h2 {
margin: 0;
font-size: 17px;
font-weight: 700;
line-height: 1.3;
}
.udt-sec-head a {
flex: 0 0 auto;
font-size: 13px;
font-weight: 600;
text-decoration: none;
}
.udt-page-title {
margin: 0 0 12px;
font-size: 21px;
line-height: 1.3;
}
.udt-muted {
color: var(--udt-muted);
font-size: 13px;
font-style: normal;
}
.udt-center {
text-align: center;
} .udt-slider {
position: relative;
background: #fff;
padding: 12px 0 8px;
}
.udt-slides {
display: flex;
gap: 10px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding: 0 16px;
padding: 0 16px;
scrollbar-width: none;
}
.udt-slides::-webkit-scrollbar {
display: none;
}
.udt-slide {
position: relative;
flex: 0 0 100%;
scroll-snap-align: center;
border-radius: var(--udt-radius);
overflow: hidden;
aspect-ratio: 2 / 1;
background: var(--udt-border);
}
.udt-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.udt-slide-label {
position: absolute;
left: 12px;
top: 12px;
}
.udt-dots {
display: flex;
justify-content: center;
gap: 6px;
padding-top: 10px;
}
.udt-dots button {
width: 8px;
height: 8px;
padding: 0;
border: 0;
border-radius: 99px;
background: var(--udt-border);
cursor: pointer;
transition: width 0.2s;
}
.udt-dots button.is-on {
width: 20px;
background: var(--udt-accent);
} .udt-chips {
display: flex;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
margin: 0 -16px;
padding: 0 16px 2px;
}
.udt-chips::-webkit-scrollbar {
display: none;
}
.udt-chip {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 99px;
background: rgba(255, 255, 255, 0.94);
color: var(--udt-accent) !important;
font-size: 11px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.udt-chip-lg {
flex: 0 0 auto;
padding: 8px 16px;
border: 1px solid var(--udt-border);
background: #fff;
color: var(--udt-text) !important;
font-size: 13px;
font-weight: 500;
}
.udt-chip-lg.is-on,
.udt-chip-lg:hover {
border-color: var(--udt-accent);
background: var(--udt-accent);
color: #fff !important;
} .udt-cards {
display: flex;
flex-direction: column;
gap: 12px;
}
.udt-cards-geser {
flex-direction: row;
overflow-x: auto;
scroll-snap-type: x mandatory;
margin: 0 -16px;
padding: 2px 16px 6px;
scroll-padding: 0 16px;
scrollbar-width: none;
}
.udt-cards-geser::-webkit-scrollbar {
display: none;
}
.udt-cards-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.udt-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--udt-border);
border-radius: var(--udt-radius);
overflow: hidden;
color: var(--udt-text) !important;
text-decoration: none;
transition: box-shadow 0.15s, transform 0.15s;
}
.udt-card:hover {
box-shadow: 0 6px 18px rgba(19, 32, 28, 0.08);
}
.udt-card:focus-visible {
outline: 2px solid var(--udt-accent);
outline-offset: 2px;
}
.udt-card-img {
position: relative;
display: block;
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, #d7e6e0, #b9d3c9) center / cover no-repeat;
}
.udt-card-img .udt-chip {
position: absolute;
left: 10px;
top: 10px;
}
.udt-card-body {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
flex: 1;
}
.udt-card-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
}
.udt-bar {
display: block;
height: 6px;
border-radius: 99px;
background: var(--udt-border);
overflow: hidden;
}
.udt-bar span {
display: block;
height: 100%;
border-radius: inherit;
background: var(--udt-accent);
}
.udt-card-meta {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 8px;
margin-top: auto;
}
.udt-card-meta > span {
display: flex;
flex-direction: column;
min-width: 0;
}
.udt-card-meta em {
color: var(--udt-muted);
font-size: 11px;
font-style: normal;
}
.udt-card-meta b {
color: var(--udt-accent);
font-size: 14px;
}
.udt-right {
text-align: right;
align-items: flex-end;
}
.udt-card-geser {
flex: 0 0 72%;
scroll-snap-align: start;
}
.udt-card-grid .udt-card-title {
font-size: 13px;
}
.udt-card-grid .udt-card-meta {
flex-direction: column;
align-items: flex-start;
}
.udt-card-grid .udt-right {
text-align: left;
align-items: flex-start;
}
.udt-card-daftar {
flex-direction: row;
align-items: center;
gap: 12px;
padding: 10px;
} .udt-card-daftar .udt-card-img {
flex: 0 0 38%;
align-self: center;
aspect-ratio: 16 / 9;
min-height: 0;
border-radius: calc(var(--udt-radius) - 4px);
overflow: hidden;
}
.udt-card-daftar .udt-card-body {
padding: 0;
gap: 6px;
min-width: 0;
}
.udt-card-besar .udt-card-title {
font-size: 16px;
}
.udt-card-besar .udt-card-meta b {
font-size: 16px;
} .udt-prayer {
flex: 0 0 78%;
scroll-snap-align: start;
padding: 14px;
border-radius: var(--udt-radius);
background: var(--udt-bg);
border: 1px solid var(--udt-border);
}
.udt-prayer-head {
display: flex;
align-items: center;
gap: 10px;
}
.udt-prayer-head > span:last-child {
display: flex;
flex-direction: column;
min-width: 0;
}
.udt-prayer-head em {
color: var(--udt-muted);
font-size: 11px;
font-style: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.udt-prayer p {
margin: 10px 0 0;
font-size: 14px;
}
.udt-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 36px;
height: 36px;
border-radius: 50%;
background: #fff;
color: var(--udt-accent);
font-size: 13px;
font-weight: 600;
} .udt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 20px;
border-radius: 12px;
border: 1px solid var(--udt-accent);
background: var(--udt-accent);
color: #fff !important;
font-weight: 600;
text-decoration: none;
}
.udt-btn-ghost {
background: #fff;
color: var(--udt-accent) !important;
}
.udt-about p {
margin: 0 0 12px;
color: #33413c;
} .udt-filter {
margin-bottom: 12px;
}
.udt-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.udt-toolbar select {
height: 36px;
padding: 0 10px;
border: 1px solid var(--udt-border);
border-radius: 10px;
background: #fff;
font: inherit;
font-size: 13px;
} .udt-article-img {
margin: -18px -16px 16px;
}
.udt-article-img img {
display: block;
width: 100%;
}
.udt-content {
overflow-wrap: anywhere;
}
.udt-content img {
border-radius: 10px;
}
.udt-pager .nav-links {
display: flex;
gap: 6px;
justify-content: center;
margin-top: 16px;
}
.udt-pager .page-numbers {
padding: 6px 12px;
border: 1px solid var(--udt-border);
border-radius: 8px;
text-decoration: none;
}
.udt-pager .current {
background: var(--udt-accent);
border-color: var(--udt-accent);
color: #fff;
} .udt-footer {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 8px;
padding: 24px 16px;
background: var(--udt-dark);
color: #c8d3cf;
font-size: 13px;
}
body.udt .udt-footer a {
color: #fff;
text-decoration: none;
}
.udt-foot-brand {
display: flex;
flex-direction: column;
gap: 4px;
}
.udt-foot-brand strong {
color: #fff;
font-size: 16px;
}
.udt-foot-menu ul {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 16px;
margin: 0;
padding: 0;
list-style: none;
}
.udt-social {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.udt-copy {
margin: 0;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
color: #8fa19a;
font-size: 12px;
} .udt-bottom {
position: fixed;
left: 50%;
bottom: 0;
z-index: 40;
display: flex;
width: 100%;
max-width: 480px;
transform: translateX(-50%);
background: #fff;
border-top: 1px solid var(--udt-border);
padding-bottom: env(safe-area-inset-bottom);
}
.udt-bottom a {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 8px 0 10px;
color: var(--udt-muted) !important;
font-size: 11px;
font-weight: 500;
text-decoration: none;
}
.udt-bottom a.is-on {
color: var(--udt-accent) !important;
} body.udt .udn-float-wa {
bottom: 84px !important;
right: max(16px, calc(50% - 224px)) !important;
} .udt-article .udn-app.udn-embed {
max-width: none;
}
@media (min-width: 720px) {
body.udt {
background: #e3e9e6;
}
.udt-app {
margin-top: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.udt-card,
.udt-dots button {
transition: none;
}
} .udt-spacer {
flex: 1;
}
.udt-burger,
.udt-drawer-close {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 40px;
width: 40px;
height: 40px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--udt-text);
cursor: pointer;
}
.udt-burger:hover,
.udt-drawer-close:hover {
background: var(--udt-bg);
}
.udt-drawer {
position: fixed;
inset: 0;
z-index: 60;
background: rgba(14, 31, 26, 0.45);
}
.udt-drawer-panel {
position: absolute;
top: 0;
right: max(0px, calc(50% - 240px));
width: min(320px, 86%);
height: 100%;
overflow-y: auto;
background: #fff;
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
}
.udt-drawer-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px 10px 16px;
border-bottom: 1px solid var(--udt-border);
}
.udt-drawer-menu ul {
margin: 0;
padding: 8px 0;
list-style: none;
}
.udt-drawer-menu a {
display: block;
padding: 12px 16px;
color: var(--udt-text) !important;
font-weight: 500;
text-decoration: none;
}
.udt-drawer-menu a:hover {
background: var(--udt-bg);
}
.udt-drawer-menu .sub-menu a {
padding-left: 32px;
font-weight: 400;
font-size: 14px;
} .udt-foot-logo {
display: block;
max-height: 44px;
width: auto;
margin-bottom: 4px;
}
.udt-foot-brand p {
margin: 4px 0;
}
.udt-foot-cols {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.udt-foot-col h3 {
margin: 0 0 8px;
color: #fff;
font-size: 14px;
}
.udt-foot-col ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
} .udt-hscroll {
position: relative;
}
.udt-arrow {
position: absolute;
top: 50%;
z-index: 5;
display: none;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
margin-top: -18px;
padding: 0 0 3px;
border: 1px solid var(--udt-border);
border-radius: 50%;
background: #fff;
color: var(--udt-text);
font-size: 24px;
line-height: 1;
box-shadow: 0 4px 12px rgba(19, 32, 28, 0.15);
cursor: pointer;
}
.udt-arrow-prev {
left: -6px;
}
.udt-arrow-next {
right: -6px;
}
.udt-hscroll.at-start .udt-arrow-prev,
.udt-hscroll.at-end .udt-arrow-next {
display: none !important;
}
@media (hover: hover) and (pointer: fine) {
.udt-arrow {
display: inline-flex;
}
.udt-cards-geser,
.udt-chips {
cursor: grab;
}
.udt-cards-geser.is-dragging,
.udt-chips.is-dragging {
cursor: grabbing;
scroll-snap-type: none;
user-select: none;
}
} .udt-nav-inline { display: none; } .udt-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 6px; list-style: none; margin: 0 0 12px; padding: 0; font-size: 12px; color: var(--udt-muted); }
.udt-crumbs li + li::before { content: "›"; margin-right: 6px; color: #9aa7a2; }
.udt-crumbs a { color: var(--udt-muted) !important; text-decoration: none; }
.udt-crumbs a:hover { color: var(--udt-accent) !important; } .udt-single { padding: 20px 16px 24px; }
.udt-post-cat { display: inline-block; padding: 3px 10px; border-radius: 99px; background: color-mix(in srgb, var(--udt-accent) 10%, #fff); color: var(--udt-accent) !important; font-size: 12px; font-weight: 600; text-decoration: none; }
.udt-post-title { margin: 10px 0 8px; font-size: 24px; line-height: 1.28; letter-spacing: -0.01em; }
.udt-post-meta { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 0 16px; color: var(--udt-muted); font-size: 13px; }
.udt-post-meta span + span::before { content: "•"; margin: 0 8px; color: #b5c0bc; }
.udt-post-img { margin: 0 0 18px; }
.udt-post-img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; }
.udt-toc { margin: 0 0 20px; padding: 12px 16px; border: 1px solid var(--udt-border); border-radius: 12px; background: var(--udt-bg); }
.udt-toc summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.udt-toc ol { margin: 10px 0 2px; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.udt-toc a { text-decoration: none; color: var(--udt-text) !important; }
.udt-toc a:hover { color: var(--udt-accent) !important; }
.udt-toc-l3 { margin-left: 14px; font-size: 13px; list-style: circle; }
.udt-prose, .udt-page .udt-content { font-size: 16px; line-height: 1.75; }
.udt-prose > *:first-child { margin-top: 0; }
.udt-prose h2, .udt-page .udt-content h2 { margin: 1.7em 0 .6em; font-size: 21px; line-height: 1.35; scroll-margin-top: 84px; }
.udt-prose h3, .udt-page .udt-content h3 { margin: 1.4em 0 .5em; font-size: 18px; line-height: 1.4; scroll-margin-top: 84px; }
.udt-prose p, .udt-page .udt-content p { margin: 0 0 1.1em; }
.udt-prose ul, .udt-prose ol, .udt-page .udt-content ul, .udt-page .udt-content ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.udt-prose li { margin-bottom: .35em; }
.udt-prose a, .udt-page .udt-content a { text-decoration: underline; text-underline-offset: 2px; }
.udt-prose blockquote, .udt-page .udt-content blockquote { margin: 1.4em 0; padding: 12px 16px; border-left: 4px solid var(--udt-accent); background: var(--udt-bg); border-radius: 0 10px 10px 0; font-style: italic; }
.udt-prose figure, .udt-page .udt-content figure { margin: 1.4em 0; }
.udt-prose figcaption, .udt-page .udt-content figcaption { margin-top: 6px; color: var(--udt-muted); font-size: 13px; text-align: center; }
.udt-prose img, .udt-page .udt-content img { border-radius: 10px; height: auto; }
.udt-prose table, .udt-page .udt-content table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 14px; display: block; overflow-x: auto; }
.udt-prose th, .udt-prose td, .udt-page .udt-content th, .udt-page .udt-content td { padding: 8px 10px; border: 1px solid var(--udt-border); text-align: left; }
.udt-prose th, .udt-page .udt-content th { background: var(--udt-bg); }
.udt-content details { margin: 0 0 10px; padding: 12px 16px; border: 1px solid var(--udt-border); border-radius: 12px; background: #fff; }
.udt-content details summary { cursor: pointer; font-weight: 600; }
.udt-content details[open] summary { margin-bottom: 8px; }
.udt-page { padding: 20px 16px 28px; }
.udt-page .udt-article-img { margin: 0 0 16px; }
.udt-page .udt-article-img img { border-radius: 14px; }
.udt-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 0; }
.udt-tags a { padding: 4px 10px; border-radius: 99px; background: var(--udt-bg); border: 1px solid var(--udt-border); color: var(--udt-muted) !important; font-size: 12px; text-decoration: none; }
.udt-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--udt-border); }
.udt-share span { margin-right: 4px; color: var(--udt-muted); font-size: 13px; font-weight: 600; }
.udt-share a, .udt-share button { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--udt-border); background: #fff; color: var(--udt-text) !important; font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; }
.udt-share .udt-share-wa { background: #1fa855; border-color: #1fa855; color: #fff !important; }
.udt-share .udt-share-fb { background: #1877f2; border-color: #1877f2; color: #fff !important; }
.udt-below { margin-top: 24px; }
.udt-related { margin-top: 28px; }
.udt-related h2 { margin: 0 0 12px; font-size: 18px; } .udt-postcards { display: grid; gap: 12px; }
.udt-postcard { display: flex; gap: 12px; overflow: hidden; background: #fff; border: 1px solid var(--udt-border); border-radius: 12px; color: var(--udt-text) !important; text-decoration: none; transition: box-shadow .15s, transform .15s; }
.udt-postcard:hover { box-shadow: 0 8px 22px rgba(19, 32, 28, .08); transform: translateY(-1px); }
.udt-postcard-img { flex: 0 0 34%; min-height: 92px; background: var(--udt-border) center / cover no-repeat; }
.udt-postcard-body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 10px 0; min-width: 0; }
.udt-postcard-cat { color: var(--udt-accent); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.udt-postcard strong { font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.udt-postcard em { color: var(--udt-muted); font-size: 12px; font-style: normal; } .udt-aside { padding: 0 16px 16px; }
.udt-widget { margin: 0 0 14px; padding: 16px; background: #fff; border: 1px solid var(--udt-border); border-radius: 14px; }
.udt-widget-title { margin: 0 0 12px; font-size: 15px; }
.udt-widget ul { margin: 0; padding-left: 18px; }
.udt-widget .udn-w { margin-bottom: 0; }
.udt-below .udt-widget { margin-bottom: 14px; } @media (min-width: 720px) {
body.udt-layout-frame {
background: radial-gradient(1200px 600px at 20% 0%, color-mix(in srgb, var(--udt-accent) 22%, transparent), transparent 70%), radial-gradient(900px 500px at 90% 100%, color-mix(in srgb, var(--udt-accent) 16%, transparent), transparent 70%), var(--udt-frame, #dfe9e5);
background-attachment: fixed;
}
body.udt-layout-frame .udt-app,
body.udt-layout-frame .udn-app {
margin: 28px auto;
min-height: calc(100vh - 56px);
border-radius: 28px;
overflow: clip;
box-shadow: 0 30px 80px rgba(10, 40, 30, .2), 0 0 0 1px rgba(10, 40, 30, .05);
}
body.udt-layout-frame .udt-bottom,
body.udt-layout-frame .udn-cta {
bottom: 16px;
width: calc(100% - 32px);
max-width: 456px;
border: 1px solid var(--udt-border);
border-radius: 18px;
box-shadow: 0 12px 32px rgba(10, 40, 30, .18);
overflow: hidden;
}
body.udt-layout-frame .udt-app { padding-bottom: 96px; }
} @media (min-width: 1024px) {
body.udt-layout-wide { background: #f3f6f5; }
.udt-layout-wide .udt-app { max-width: none; padding-bottom: 0; background: transparent; box-shadow: none; } .udt-layout-wide .udt-header { gap: 20px; padding: 12px max(24px, calc((100% - 1200px) / 2)); box-shadow: 0 1px 0 var(--udt-border); border-bottom: 0; }
.udt-layout-wide .udt-logo { max-width: 220px; }
.udt-layout-wide .udt-logo img { max-height: 44px; }
.udt-layout-wide .udt-search { flex: 0 1 340px; }
.udt-layout-wide .udt-spacer { display: none; }
.udt-layout-wide .udt-nav-inline { display: block; flex: 1; }
.udt-layout-wide .udt-nav-inline > ul { display: flex; justify-content: flex-end; gap: 2px; margin: 0; padding: 0; list-style: none; }
.udt-layout-wide .udt-nav-inline li { position: relative; }
.udt-layout-wide .udt-nav-inline a { display: block; padding: 9px 14px; border-radius: 10px; color: var(--udt-text) !important; font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.udt-layout-wide .udt-nav-inline a:hover,
.udt-layout-wide .udt-nav-inline .current-menu-item > a { background: var(--udt-bg); color: var(--udt-accent) !important; }
.udt-layout-wide .udt-nav-inline .sub-menu { position: absolute; right: 0; top: 100%; z-index: 40; min-width: 220px; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--udt-border); border-radius: 12px; box-shadow: 0 14px 36px rgba(19, 32, 28, .12); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .15s; }
.udt-layout-wide .udt-nav-inline li:hover > .sub-menu,
.udt-layout-wide .udt-nav-inline li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.udt-layout-wide .udt-burger { display: none; }
.udt-layout-wide .udt-search + .udt-burger { display: none; } .udt-layout-wide .udt-main { max-width: 1248px; margin: 0 auto; padding: 24px; gap: 20px; }
.udt-layout-wide .udt-sec { padding: 24px; border-radius: 18px; border: 1px solid var(--udt-border); }
.udt-layout-wide .udt-sec-head h2 { font-size: 20px; }
.udt-layout-wide .udt-page-title { font-size: 28px; } .udt-layout-wide .udt-hscroll .udt-arrow { display: none; }
.udt-layout-wide .udt-cards-geser { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; overflow: visible; }
.udt-layout-wide .udt-cards-geser > * { flex: none; width: auto; }
.udt-layout-wide .udt-cards-geser .udt-prayer { flex: none; }
.udt-layout-wide .udt-cards-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.udt-layout-wide .udt-cards-daftar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.udt-layout-wide .udt-cards-besar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.udt-layout-wide .udt-chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; } .udt-layout-wide .udt-slider { padding: 0; background: transparent; }
.udt-layout-wide .udt-slides { padding: 0; scroll-padding: 0; }
.udt-layout-wide .udt-slide { flex: 0 0 calc(50% - 5px); scroll-snap-align: start; border-radius: 18px; }
.udt-layout-wide .udt-slider.is-single .udt-slide { flex-basis: 100%; aspect-ratio: 3 / 1; isolation: isolate; }
.udt-layout-wide .udt-slider.is-single .udt-slide::before { content: ""; position: absolute; inset: -30px; z-index: -1; background: var(--udt-slide-bg) center / cover; filter: blur(28px) brightness(.92) saturate(1.1); }
.udt-layout-wide .udt-slider.is-single .udt-slide img { width: auto; max-width: 100%; height: 100%; margin: 0 auto; object-fit: contain; } .udt-layout-wide .udt-post-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.udt-layout-wide .udt-post-wrap.has-aside { grid-template-columns: minmax(0, 1fr) 340px; }
.udt-layout-wide .udt-post-wrap:not(.has-aside) .udt-single,
.udt-layout-wide .udt-page { width: 100%; max-width: 860px; margin: 0 auto; }
.udt-layout-wide .udt-single { padding: 32px 40px 36px; }
.udt-layout-wide .udt-page { padding: 32px 40px; }
.udt-layout-wide .udt-post-title { font-size: 34px; }
.udt-layout-wide .udt-prose { font-size: 17px; }
.udt-layout-wide .udt-aside { padding: 0; }
.udt-layout-wide .udt-aside-inner { position: sticky; top: 92px; }
.udt-layout-wide .udt-related .udt-postcards,
.udt-layout-wide .udt-postcards-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.udt-layout-wide .has-aside .udt-postcards-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.udt-layout-wide .udt-postcards .udt-postcard { flex-direction: column; gap: 0; }
.udt-layout-wide .udt-postcards .udt-postcard-img { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
.udt-layout-wide .udt-postcards .udt-postcard-body { padding: 12px 14px 14px; } .udt-layout-wide .udt-footer { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: 32px 48px; padding: 48px max(24px, calc((100% - 1200px) / 2)) 28px; }
.udt-layout-wide .udt-foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.udt-layout-wide .udt-social,
.udt-layout-wide .udt-copy { grid-column: 1 / -1; }
.udt-layout-wide .udt-bottom { display: none; } body.udt-layout-wide.udn-body { background: #f3f6f5; }
.udt-layout-wide .udn-app { max-width: 1248px; min-height: 0; margin: 0 auto; padding: 0 24px 56px; background: transparent; }
.udt-layout-wide .udn-foot { display: none; }
.udt-layout-wide .udt-wide-topbar { position: static; max-width: 640px; margin: 20px auto 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.udt-layout-wide .udn-main { max-width: 640px; margin: 0 auto; padding: 12px 0 0; }
.udt-layout-wide .udn-cta,
.udt-layout-wide .udn-cta-stack { max-width: 640px; border-radius: 16px 16px 0 0; }
.udt-layout-wide.udn-view-campaign .udt-wide-topbar { display: none; }
.udt-layout-wide.udn-view-campaign .udn-main { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 28px; row-gap: 0; align-items: start; max-width: none; margin: 24px 0 0; padding: 0; }
.udt-layout-wide.udn-view-campaign .udn-main > * { grid-column: 1; margin-bottom: 16px; }
.udt-layout-wide.udn-view-campaign .udn-summary { grid-column: 2; grid-row: 1 / span 40; position: sticky; top: 92px; margin: 0; padding: 22px; border-radius: 18px; box-shadow: 0 16px 40px rgba(19, 32, 28, .08); }
.udt-layout-wide.udn-view-campaign .udn-summary .udn-title { font-size: 22px; }
.udt-layout-wide.udn-view-campaign .udn-summary-cta { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.udt-layout-wide.udn-view-campaign .udn-hero { border-radius: 18px; overflow: hidden; }
.udt-layout-wide.udn-view-campaign .udn-hero-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.udt-layout-wide.udn-view-campaign .udn-card { border-radius: 18px; padding: 22px 24px; }
.udt-layout-wide.udn-view-campaign .udn-cta { display: none; }
.udt-layout-wide.udn-view-campaign .udn-app { padding-bottom: 56px; }
}
@media (min-width: 1024px) {
body.udt.udt-layout-wide .udn-float-wa { bottom: 24px !important; right: 24px !important; }
}
@media (min-width: 720px) {
body.udt.udt-layout-frame .udn-float-wa { bottom: 100px !important; }
}
.udt-prose .udn-w a, .udt-page .udt-content .udn-w a { text-decoration: none; }
.udt-toc ol { list-style: none; padding-left: 0; counter-reset: udt-toc; }
.udt-toc-l2 { counter-increment: udt-toc; }
.udt-toc-l2::before { content: counter(udt-toc) ". "; color: var(--udt-muted); }
.udt-toc .udt-toc-l3 { margin-left: 0; padding-left: 20px; list-style: none; }
.udt-toc-l3::before { content: "– "; color: var(--udt-muted); }
@media (min-width: 1024px) {
.udt-layout-wide.udn-view-campaign .udn-hero { margin: 0 0 16px; }
.udt-layout-wide.udn-view-campaign .udn-summary { margin: 0; }
}
@media (min-width: 1024px) {
.udt-layout-wide .udt-app { display: flex; flex-direction: column; min-height: 100vh; }
.udt-layout-wide .udt-footer { margin-top: auto; }
.udt-layout-wide .udt-app > .udt-main, .udt-layout-wide .udt-app > .udn-app { width: 100%; }
} @media (max-width: 1023px) {
.udt-wide-plugin .udt-header,
.udt-wide-plugin .udt-drawer,
.udt-wide-plugin .udt-footer { display: none; }
.udt-wide-plugin .udt-app { padding-bottom: 0; }
}
@media (min-width: 1024px) {
.udt-mobile-only { display: none !important; }
} .udt-pin {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 99px;
background: color-mix(in srgb, var(--udt-accent) 12%, #fff);
color: var(--udt-accent);
font-size: 11px;
font-weight: 600;
line-height: 1.6;
}
.udt-pin::before { content: "\2605"; font-size: 10px; }