/*
Theme Name: UMBJM 2026
Theme URI: https://umbjm.ac.id
Author: PDPSIP & HUMAS UMBJM
Author URI: https://umbjm.ac.id
Description: Custom WordPress theme for Universitas Muhammadiyah Banjarmasin. Built without ACF dependency using native custom fields and Customizer.
Version: 1.7.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: umbjm
Tags: custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* Base variables (used until Tailwind is built) */
:root {
    --color-primary: #02356C;
    --color-secondary: #07569B;
    --color-accent: #009DFF;
    --color-gold: #F5B400;
    --color-text: #2B2B2B;
    --color-muted: #6B7280;
    --color-border: #E5E7EB;
    --color-bg: #F7F9FC;

    /* Tailwind semantic theme vars referenced by tailwind.css */
    --background: #ffffff;
    --foreground: #2b2b2b;
    --border: #dbdee1;
    --radius: 0.5rem;
    --muted: #f7f9fc;
    --muted-foreground: #6b7280;
    --card: #ffffff;
    --popover: #ffffff;
    --primary: #02356C;
    --secondary: #f7f9fc;
    --accent: #f7f9fc;
    --destructive: #e70044;
    --input: #e5e7eb;
}

/* Missing utility classes not present in the compiled tailwind.css */
.border-gray-200 { border-color: #e5e7eb; }
.text-gray-500    { color: #6b7280; }
.text-gray-600    { color: #4b5563; }
.bg-gray-50       { background-color: #f9fafb; }
.bg-gray-400      { background-color: #9ca3af; }
.focus\:outline-none:focus { outline: none; }
.hover\:bg-white\/20:hover { background-color: rgba(255,255,255,0.2); }
.hover\:bg-white\/5:hover  { background-color: rgba(255,255,255,0.05); }
.hover\:border-\[#009DFF\]:hover { border-color: #009DFF; }
.hover\:border-\[#9ed1ff\]:hover { border-color: #9ed1ff; }
.hover\:gap-5:hover { gap: 1.25rem; }
.hover\:shadow-lg:hover {
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
}
.hover\:shadow-md:hover {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
}
.hover\:text-\[#009DFF\]:hover { color: #009DFF; }
.hover\:text-\[#02356C\]:hover { color: #02356C; }
.hover\:text-\[#9ed1ff\]:hover { color: #9ed1ff; }
.focus\:border-\[#009DFF\]:focus { border-color: #009DFF; }

/* Opacity utilities (critical for slider) */
.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }

/* Transition utilities (critical for slider & hover effects) */
.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: .15s; }
.duration-\[1200ms\] { transition-duration: 1200ms; }
.duration-100 { transition-duration: 100ms; }
.ease-linear { transition-timing-function: linear; }

/* Group hover dropdown (critical for menu) */
.group:hover .group-hover\:block { display: block; }

/* Menu missing utilities */
.text-\[13\.5px\] { font-size: 13.5px; }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); }
.min-w-\[260px\] { min-width: 260px; }
.hover\:bg-\[#02356C\]:hover { background-color: #02356C; }
.hover\:text-white:hover { color: #ffffff; }
.hover\:bg-\[#f0f4f8\]:hover { background-color: #f0f4f8; }
.rounded-full { border-radius: 9999px; }

/* Sub-menu link active state */
.active { color: #009DFF; }

/* Opacity utilities missing from compiled CSS */
.text-white\/60  { color: rgba(255,255,255,0.6); }
.text-white\/75  { color: rgba(255,255,255,0.75); }
.text-white\/80  { color: rgba(255,255,255,0.8); }
.text-white\/85  { color: rgba(255,255,255,0.85); }
.bg-white\/10    { background-color: rgba(255,255,255,0.1); }
.border-white\/10 { border-color: rgba(255,255,255,0.1); }
.border-white\/15 { border-color: rgba(255,255,255,0.15); }

/* Responsive utilities missing from compiled CSS */
@media (min-width: 640px) {
    .sm\:flex-initial { flex: 0 1 auto; }
    .sm\:inline { display: inline; }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
    .sm\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
    .sm\:text-\[15px\] { font-size: 15px; }
    .sm\:h-\[600px\] { height: 600px; }
    .sm\:w-\[55\%\] { width: 55%; }
    .sm\:w-\[58\%\] { width: 58%; }
    .sm\:hidden { display: none; }
    .sm\:w-32 { width: 8rem; }
    .sm\:w-44 { width: 11rem; }
}
@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .md\:hidden { display: none; }
    .md\:max-w-none { max-width: none; }
}
@media (min-width: 1024px) {
    .lg\:block { display: block; }
    .lg\:flex { display: flex; }
    .lg\:grid { display: grid; }
    .lg\:hidden { display: none; }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .lg\:grid-cols-\[1fr_2fr\] { grid-template-columns: 1fr 2fr; }
    .lg\:h-\[640px\] { height: 640px; }
    .lg\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
    .lg\:pr-20 { padding-right: 5rem; }
    .lg\:text-\[44px\] { font-size: 44px; }
    .lg\:w-\[46\%\] { width: 46%; }
    .lg\:w-\[48\%\] { width: 48%; }
    .lg\:w-48 { width: 12rem; }
}
@media (min-width: 1280px) {
    .xl\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
}

/* Arbitrary value utilities missing from compiled CSS */
.tracking-\[0\.25em\] { letter-spacing: 0.25em; }
.leading-\[1\.15\] { line-height: 1.15; }
.-mb-px { margin-bottom: -1px; }
.top-1\/2 { top: 50%; }
.-translate-y-1\/2 { transform: translateY(-50%); }
.max-w-\[1400px\] { max-width: 1400px; }
.max-w-full { max-width: 100%; }
.max-w-\[70px\] { max-width: 70px; }
.transition-\[width\] { transition-property: width; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: .15s; }
.z-\[60\] { z-index: 60; }

/* Spacing / sizing utilities */
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.h-3\.5 { height: 0.875rem; }
.right-6 { right: 1.5rem; }
.top-6 { top: 1.5rem; }
.capitalize { text-transform: capitalize; }
.border-4 { border-width: 4px; }
.min-w-0 { min-width: 0; }
.shrink-0 { flex-shrink: 0; }
.object-contain { object-fit: contain; }
.w-24 { width: 6rem; }
.w-36 { width: 9rem; }
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Post thumbnail loading placeholder — branded backdrop shown behind every
   the_post_thumbnail() output until the real image paints (also acts as a
   graceful fallback if the image fails to load). See
   umbjm_thumbnail_loading_placeholder() in inc/template-tags.php. */
.umbjm-thumb-loading {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #07569B;
}
.umbjm-thumb-loading > img {
    position: relative;
    display: block;
}

/* shadcn/ui semantic utilities */
.text-muted-foreground { color: #6b7280; }
.border-border { border-color: #dbdee1; }
.divide-y > * + * {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #dbdee1;
}

/* SDG badge colors */
.sdg-1  { background-color: #E5243B; }
.sdg-2  { background-color: #DDA63A; }
.sdg-3  { background-color: #4C9F38; }
.sdg-4  { background-color: #C5192D; }
.sdg-5  { background-color: #FF3A21; }
.sdg-6  { background-color: #26BDE2; }
.sdg-7  { background-color: #FCC30B; }
.sdg-8  { background-color: #A21942; }
.sdg-9  { background-color: #FD6925; }
.sdg-10 { background-color: #DD1367; }
.sdg-11 { background-color: #FD9D24; }
.sdg-12 { background-color: #BF8B2E; }
.sdg-13 { background-color: #3F7E44; }
.sdg-14 { background-color: #0A97D9; }
.sdg-15 { background-color: #56C02B; }
.sdg-16 { background-color: #00689D; }
.sdg-17 { background-color: #19486A; }

/* Hero progress bar animation */
@keyframes hero-progress {
    from { width: 0%; }
    to { width: 100%; }
}
.hero-progress-anim {
    animation: hero-progress 6s linear forwards;
}
.hero-progress-paused {
    animation-play-state: paused;
}

/* Gradient / color arbitrary values */
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
.from-\[#02356C\] { --tw-gradient-from: #02356C; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(2,53,108,0)); }
.to-\[#009DFF\] { --tw-gradient-to: #009DFF; }
.to-\[#07569B\] { --tw-gradient-to: #07569B; }
.group-hover\:text-\[#07569B\]:is(:where(.group):hover *) { color: #07569B; }
.hover\:bg-\[#07569B\]:hover { background-color: #07569B; }
.group-hover\:bg-white:is(:where(.group):hover *) { background-color: #fff; }
.group-hover\:border-white:is(:where(.group):hover *) { border-color: #fff; }
.group-hover\:rotate-45:is(:where(.group):hover *) { transform: rotate(45deg); }
.group-hover\:-rotate-45:is(:where(.group):hover *) { transform: rotate(-45deg); }

/* Text arbitrary colors & sizes */
.text-\[#009DFF\] { color: #009DFF; }
.text-\[#02356C\] { color: #02356C; }
.text-\[#07569B\] { color: #07569B; }
.text-\[#2B2B2B\] { color: #2B2B2B; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-\[14px\] { font-size: 14px; }
.text-\[15px\] { font-size: 15px; }

/* Height arbitrary values */
.h-\[3px\] { height: 3px; }
.h-\[560px\] { height: 560px; }

/* WordPress / Gutenberg buttons (.wp-element-button, .wp-block-button__link) */
:root :where(.wp-element-button, .wp-block-button__link),
.wp-element-button,
.wp-block-button__link,
.wp-block-buttons .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65em 1.75em;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    text-align: center;
    white-space: normal;
    color: #ffffff;
    background-color: var(--color-primary);
    border: 2px solid var(--color-primary);
    box-shadow: 0 4px 6px -1px rgba(2, 53, 108, 0.2), 0 2px 4px -2px rgba(2, 53, 108, 0.15);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    cursor: pointer;
    gap: 0.5em;
}

:root :where(.wp-element-button, .wp-block-button__link):hover,
:root :where(.wp-element-button, .wp-block-button__link):focus,
.wp-element-button:hover,
.wp-element-button:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-block-buttons .wp-block-button__link:hover,
.wp-block-buttons .wp-block-button__link:focus {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: #ffffff;
    box-shadow: 0 10px 15px -3px rgba(2, 53, 108, 0.25), 0 4px 6px -4px rgba(2, 53, 108, 0.15);
    transform: translateY(-1px);
    text-decoration: none;
}

:root :where(.wp-element-button, .wp-block-button__link):focus-visible,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-buttons .wp-block-button__link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

:root :where(.wp-element-button, .wp-block-button__link):active,
.wp-element-button:active,
.wp-block-button__link:active,
.wp-block-buttons .wp-block-button__link:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px -1px rgba(2, 53, 108, 0.2);
}

/* Outline button variant */
:root :where(.wp-element-button, .wp-block-button__link).is-style-outline,
.is-style-outline .wp-block-button__link,
.wp-element-button.is-style-outline {
    color: var(--color-primary);
    background-color: transparent;
    border-color: var(--color-primary);
    box-shadow: none;
}

:root :where(.wp-element-button, .wp-block-button__link).is-style-outline:hover,
:root :where(.wp-element-button, .wp-block-button__link).is-style-outline:focus,
.is-style-outline .wp-block-button__link:hover,
.is-style-outline .wp-block-button__link:focus,
.wp-element-button.is-style-outline:hover,
.wp-element-button.is-style-outline:focus {
    color: #ffffff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 6px 10px -2px rgba(2, 53, 108, 0.2);
}

/* Secondary / subtle style */
:root :where(.wp-element-button, .wp-block-button__link).is-style-secondary,
.wp-element-button.is-style-secondary,
.wp-block-button__link.is-style-secondary {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}

:root :where(.wp-element-button, .wp-block-button__link).is-style-secondary:hover,
:root :where(.wp-element-button, .wp-block-button__link).is-style-secondary:focus,
.wp-element-button.is-style-secondary:hover,
.wp-element-button.is-style-secondary:focus,
.wp-block-button__link.is-style-secondary:hover,
.wp-block-button__link.is-style-secondary:focus {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* UMBJM Gallery with lightbox */
.umbjm-gallery {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.umbjm-gallery-item {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    overflow: hidden;
    border-radius: 0.5rem;
    aspect-ratio: 4 / 3;
}

.umbjm-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    border-radius: 0.5rem;
    cursor: zoom-in;
}

.umbjm-gallery-item:hover img {
    transform: scale(1.05);
}

.umbjm-gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: #ffffff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    text-align: left;
    line-height: 1.3;
}

.umbjm-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background-color: rgba(0, 0, 0, 0.9);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.umbjm-lightbox.is-active {
    opacity: 1;
    visibility: visible;
}

.umbjm-lightbox__inner {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.umbjm-lightbox__image {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 0.375rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25);
}

.umbjm-lightbox__caption {
    color: #ffffff;
    font-size: 0.9375rem;
    text-align: center;
    max-width: 90%;
    line-height: 1.5;
    padding: 0 1rem;
}

.umbjm-lightbox__alt {
    color: #cbd5e1;
    font-size: 0.8125rem;
    text-align: center;
}

.umbjm-lightbox__close,
.umbjm-lightbox__prev,
.umbjm-lightbox__next {
    position: absolute;
    background: rgba(255, 255, 255, 0.15);
    border: 0;
    color: #ffffff;
    cursor: pointer;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: background 0.2s ease;
}

.umbjm-lightbox__close:hover,
.umbjm-lightbox__prev:hover,
.umbjm-lightbox__next:hover {
    background: rgba(255, 255, 255, 0.3);
}

.umbjm-lightbox__close {
    top: 1rem;
    right: 1rem;
}

.umbjm-lightbox__prev {
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
}

.umbjm-lightbox__next {
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 768px) {
    .umbjm-lightbox__prev,
    .umbjm-lightbox__next {
        display: none;
    }
}

/* Count badge for Topics section tabs and headings */
.umbjm-count-badge {
    position: absolute !important;
    top: -0.5rem;
    right: -0.5rem;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    padding: 0.125rem 0.375rem !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    line-height: 1;
    border-radius: 0.25rem;
    z-index: 10;
}

/* Pengumuman badge — brand style (soft brand bg, strong brand text) */
.umbjm-count-badge--pengumuman {
    color: #07569B;
    background-color: rgba(7, 86, 155, 0.14);
}

/* Agenda badge — neutral/alternative style (soft neutral bg, heading text) */
.umbjm-count-badge--agenda {
    color: #02356C;
    background-color: rgba(2, 53, 108, 0.10);
}

/* Berita badge — subtle gray style */
.umbjm-count-badge--berita {
    color: #6b7280;
    background-color: rgba(107, 114, 128, 0.12);
}

/* Dark mode badge colors */
[data-theme="dark"] .umbjm-count-badge--pengumuman {
    color: #7bb3f0;
    background-color: rgba(123, 179, 240, 0.18);
}
[data-theme="dark"] .umbjm-count-badge--agenda {
    color: #9bb8d8;
    background-color: rgba(155, 184, 216, 0.15);
}
[data-theme="dark"] .umbjm-count-badge--berita {
    color: #9ca3af;
    background-color: rgba(156, 163, 175, 0.15);
}



/* ── Page body — UMBJM pattern system ──────────────────────────
   ::before → UMBJM RIPPLE: busur konsentris memancar dari pojok
              kiri atas, skala besar, garis tipis (overlay 8%)
   ::after  → circular dots kecil bergradasi di bagian bawah      */
.umbjm-page-body {
    position: relative;
    isolation: isolate;
}
.umbjm-page-body::before {
    content: "";
    position: absolute;
    top: -60px;
    left: -60px;
    width: min(720px, 60vw);
    height: min(720px, 60vw);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720' viewBox='0 0 720 720'%3E%3Cg fill='none' stroke='%2302356C' stroke-width='1.5'%3E%3Ccircle cx='60' cy='60' r='90'/%3E%3Ccircle cx='60' cy='60' r='160'/%3E%3Ccircle cx='60' cy='60' r='230'/%3E%3Ccircle cx='60' cy='60' r='300'/%3E%3Ccircle cx='60' cy='60' r='370'/%3E%3Ccircle cx='60' cy='60' r='440'/%3E%3Ccircle cx='60' cy='60' r='510'/%3E%3Ccircle cx='60' cy='60' r='580'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: top left;
    background-size: contain;
    opacity: var(--umbjm-pattern-opacity, 0.08);
    -webkit-mask-image: var(--umbjm-pattern-mask, radial-gradient(circle at 0% 0%, #000 0%, transparent 78%));
    mask-image: var(--umbjm-pattern-mask, radial-gradient(circle at 0% 0%, #000 0%, transparent 78%));
    pointer-events: none;
    z-index: 0;
}
.umbjm-page-body::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30%;
    background-image: radial-gradient(circle, rgba(2, 53, 108, 0.9) 1.5px, transparent 1.5px);
    background-size: 20px 20px;
    -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 90%);
    mask-image: linear-gradient(to top, #000 0%, transparent 90%);
    opacity: 0.2;
    pointer-events: none;
    z-index: 0;
}
.umbjm-page-body > * {
    position: relative;
    z-index: 1;
}
[data-theme="dark"] .umbjm-page-body::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720' viewBox='0 0 720 720'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Ccircle cx='60' cy='60' r='90'/%3E%3Ccircle cx='60' cy='60' r='160'/%3E%3Ccircle cx='60' cy='60' r='230'/%3E%3Ccircle cx='60' cy='60' r='300'/%3E%3Ccircle cx='60' cy='60' r='370'/%3E%3Ccircle cx='60' cy='60' r='440'/%3E%3Ccircle cx='60' cy='60' r='510'/%3E%3Ccircle cx='60' cy='60' r='580'/%3E%3C/g%3E%3C/svg%3E");
    opacity: var(--umbjm-pattern-opacity, 0.1);
}
[data-theme="dark"] .umbjm-page-body::after {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.8) 1.5px, transparent 1.5px);
    opacity: 0.15;
}

/* ── Footer — gradient + pola ripple halus ─────────────────────
   Busur konsentris di pojok kanan bawah, opacity sangat rendah   */
.umbjm-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(135deg, #02356C 0%, #02407e 50%, #07569B 100%);
}
.umbjm-footer::before {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -120px;
    width: 560px;
    height: 560px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Ccircle cx='500' cy='500' r='80'/%3E%3Ccircle cx='500' cy='500' r='150'/%3E%3Ccircle cx='500' cy='500' r='220'/%3E%3Ccircle cx='500' cy='500' r='290'/%3E%3Ccircle cx='500' cy='500' r='360'/%3E%3Ccircle cx='500' cy='500' r='430'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
    opacity: var(--umbjm-pattern-opacity, 0.06);
    -webkit-mask-image: var(--umbjm-pattern-mask, radial-gradient(circle at 100% 100%, #000 0%, transparent 75%));
    mask-image: var(--umbjm-pattern-mask, radial-gradient(circle at 100% 100%, #000 0%, transparent 75%));
    pointer-events: none;
    z-index: 0;
}
.umbjm-footer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.5) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}
.umbjm-footer > * {
    position: relative;
    z-index: 1;
}

/* ── Pattern variants — dipilih via Customizer ─────────────────
   umbjm-pattern-* mengganti background-image ::before di
   .umbjm-page-body (biru, kiri atas) dan .umbjm-footer
   (putih, kanan bawah). Tile SVG diulang + mask fade.          */

/* 1. Banua Flow — garis organik mengalir */
.umbjm-page-body.umbjm-pattern-banua-flow::before,
.umbjm-deco-dark.umbjm-pattern-banua-flow::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='64' viewBox='0 0 280 64'%3E%3Cg fill='none' stroke='%2302356C' stroke-width='1.5'%3E%3Cpath d='M0 10 Q 70 -15 140 10 T 280 10'/%3E%3Cpath d='M0 38 Q 70 13 140 38 T 280 38'/%3E%3Cpath d='M0 62 Q 70 37 140 62 T 280 62'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 280px 64px;
}
.umbjm-footer.umbjm-pattern-banua-flow::before,
.umbjm-hero.umbjm-pattern-banua-flow::before,
.umbjm-deco-light.umbjm-pattern-banua-flow::before,
[data-theme="dark"] .umbjm-page-body.umbjm-pattern-banua-flow::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='64' viewBox='0 0 280 64'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Cpath d='M0 10 Q 70 -15 140 10 T 280 10'/%3E%3Cpath d='M0 38 Q 70 13 140 38 T 280 38'/%3E%3Cpath d='M0 62 Q 70 37 140 62 T 280 62'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 280px 64px;
}

/* 2. Sasirangan Geometry — diamond + garis */
.umbjm-page-body.umbjm-pattern-sasirangan::before,
.umbjm-deco-dark.umbjm-pattern-sasirangan::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%2302356C' stroke-width='1.5'%3E%3Cpath d='M36 8 L64 36 L36 64 L8 36 Z'/%3E%3Cpath d='M36 22 L50 36 L36 50 L22 36 Z'/%3E%3Cpath d='M0 36 h8 M64 36 h8 M36 0 v8 M36 64 v8'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 72px 72px;
}
.umbjm-footer.umbjm-pattern-sasirangan::before,
.umbjm-hero.umbjm-pattern-sasirangan::before,
.umbjm-deco-light.umbjm-pattern-sasirangan::before,
[data-theme="dark"] .umbjm-page-body.umbjm-pattern-sasirangan::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Cpath d='M36 8 L64 36 L36 64 L8 36 Z'/%3E%3Cpath d='M36 22 L50 36 L36 50 L22 36 Z'/%3E%3Cpath d='M0 36 h8 M64 36 h8 M36 0 v8 M36 64 v8'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 72px 72px;
}

/* 3. Jukung Line — lengkung badan jukung berulang */
.umbjm-page-body.umbjm-pattern-jukung::before,
.umbjm-deco-dark.umbjm-pattern-jukung::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48' viewBox='0 0 96 48'%3E%3Cg fill='none' stroke='%2302356C' stroke-width='1.5'%3E%3Cpath d='M-24 36 Q 0 8 24 36'/%3E%3Cpath d='M24 36 Q 48 8 72 36'/%3E%3Cpath d='M72 36 Q 96 8 120 36'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 96px 48px;
}
.umbjm-footer.umbjm-pattern-jukung::before,
.umbjm-hero.umbjm-pattern-jukung::before,
.umbjm-deco-light.umbjm-pattern-jukung::before,
[data-theme="dark"] .umbjm-page-body.umbjm-pattern-jukung::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48' viewBox='0 0 96 48'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Cpath d='M-24 36 Q 0 8 24 36'/%3E%3Cpath d='M24 36 Q 48 8 72 36'/%3E%3Cpath d='M72 36 Q 96 8 120 36'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 96px 48px;
}

/* 4. River Mesh — garis bercabang membentuk jaringan */
.umbjm-page-body.umbjm-pattern-river-mesh::before,
.umbjm-deco-dark.umbjm-pattern-river-mesh::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='160' viewBox='0 0 200 160'%3E%3Cg fill='none' stroke='%2302356C' stroke-width='1.5'%3E%3Cpath d='M-10 40 H110 Q140 40 140 70 V170'/%3E%3Cpath d='M-10 100 H50 Q80 100 80 130 V170'/%3E%3Cpath d='M210 20 H180 Q150 20 150 -10'/%3E%3Cpath d='M210 130 H140'/%3E%3Ccircle cx='110' cy='40' r='3'/%3E%3Ccircle cx='50' cy='100' r='3'/%3E%3Ccircle cx='180' cy='20' r='3'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 160px;
}
.umbjm-footer.umbjm-pattern-river-mesh::before,
.umbjm-hero.umbjm-pattern-river-mesh::before,
.umbjm-deco-light.umbjm-pattern-river-mesh::before,
[data-theme="dark"] .umbjm-page-body.umbjm-pattern-river-mesh::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='160' viewBox='0 0 200 160'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Cpath d='M-10 40 H110 Q140 40 140 70 V170'/%3E%3Cpath d='M-10 100 H50 Q80 100 80 130 V170'/%3E%3Cpath d='M210 20 H180 Q150 20 150 -10'/%3E%3Cpath d='M210 130 H140'/%3E%3Ccircle cx='110' cy='40' r='3'/%3E%3Ccircle cx='50' cy='100' r='3'/%3E%3Ccircle cx='180' cy='20' r='3'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 160px;
}

/* 5. Banua Lattice — anyaman minimal (diamond crossing) */
.umbjm-page-body.umbjm-pattern-lattice::before,
.umbjm-deco-dark.umbjm-pattern-lattice::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%2302356C' stroke-width='1.5'%3E%3Cpath d='M28 0 L56 28 L28 56 L0 28 Z'/%3E%3Cpath d='M28 14 L42 28 L28 42 L14 28 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 56px 56px;
}
.umbjm-footer.umbjm-pattern-lattice::before,
.umbjm-hero.umbjm-pattern-lattice::before,
.umbjm-deco-light.umbjm-pattern-lattice::before,
[data-theme="dark"] .umbjm-page-body.umbjm-pattern-lattice::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Cpath d='M28 0 L56 28 L28 56 L0 28 Z'/%3E%3Cpath d='M28 14 L42 28 L28 42 L14 28 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 56px 56px;
}

/* 6. Flora Borneo — outline daun diabstraksikan */
.umbjm-page-body.umbjm-pattern-flora::before,
.umbjm-deco-dark.umbjm-pattern-flora::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%2302356C' stroke-width='1.5'%3E%3Cpath d='M45 12 Q60 32 45 52 Q30 32 45 12 Z'/%3E%3Cpath d='M45 16 V48'/%3E%3Cpath d='M45 38 Q60 58 45 78 Q30 58 45 38 Z' transform='rotate(90 45 45)'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 90px 90px;
}
.umbjm-footer.umbjm-pattern-flora::before,
.umbjm-hero.umbjm-pattern-flora::before,
.umbjm-deco-light.umbjm-pattern-flora::before,
[data-theme="dark"] .umbjm-page-body.umbjm-pattern-flora::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Cpath d='M45 12 Q60 32 45 52 Q30 32 45 12 Z'/%3E%3Cpath d='M45 16 V48'/%3E%3Cpath d='M45 38 Q60 58 45 78 Q30 58 45 38 Z' transform='rotate(90 45 45)'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 90px 90px;
}

/* ── Hero — pattern di pojok kiri atas ─────────────────────────
   Mengikuti pilihan pattern yang sama (umbjm-pattern-*), stroke
   putih karena hero selalu berlatar gelap.                     */
.umbjm-hero::before {
    content: "";
    position: absolute;
    top: -40px;
    left: -40px;
    width: min(480px, 45%);
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720' viewBox='0 0 720 720'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Ccircle cx='60' cy='60' r='90'/%3E%3Ccircle cx='60' cy='60' r='160'/%3E%3Ccircle cx='60' cy='60' r='230'/%3E%3Ccircle cx='60' cy='60' r='300'/%3E%3Ccircle cx='60' cy='60' r='370'/%3E%3Ccircle cx='60' cy='60' r='440'/%3E%3Ccircle cx='60' cy='60' r='510'/%3E%3Ccircle cx='60' cy='60' r='580'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: top left;
    background-size: contain;
    opacity: var(--umbjm-pattern-opacity, 0.1);
    -webkit-mask-image: var(--umbjm-pattern-mask, radial-gradient(circle at 0% 0%, #000 0%, transparent 75%));
    mask-image: var(--umbjm-pattern-mask, radial-gradient(circle at 0% 0%, #000 0%, transparent 75%));
    pointer-events: none;
    z-index: 2;
}

/* ── Section decoration — pattern + bg dari Customizer ─────────
   .umbjm-deco = wrapper section; tone ditentukan otomatis dari
   luminance bg: -dark = stroke biru (bg terang), -light = stroke
   putih (bg gelap).                                            */
.umbjm-deco {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.umbjm-deco::before {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: repeat;
    opacity: var(--umbjm-pattern-opacity, 0.06);
    -webkit-mask-image: var(--umbjm-pattern-mask, none);
    mask-image: var(--umbjm-pattern-mask, none);
    pointer-events: none;
    z-index: 0;
}
/* Background image layer (di bawah pattern, di atas warna bg).
   --umbjm-bg-grad = overlay gradasi warna latar di atas gambar,
   membuat gambar berbaur ke warna dasar ke arah yang dipilih. */
.umbjm-deco::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--umbjm-bg-grad, none), var(--umbjm-bg-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}
.umbjm-deco > * {
    position: relative;
    z-index: 1;
}
/* Ripple = grafik pojok, bukan tile */
.umbjm-deco-dark.umbjm-pattern-ripple::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720' viewBox='0 0 720 720'%3E%3Cg fill='none' stroke='%2302356C' stroke-width='1.5'%3E%3Ccircle cx='60' cy='60' r='90'/%3E%3Ccircle cx='60' cy='60' r='160'/%3E%3Ccircle cx='60' cy='60' r='230'/%3E%3Ccircle cx='60' cy='60' r='300'/%3E%3Ccircle cx='60' cy='60' r='370'/%3E%3Ccircle cx='60' cy='60' r='440'/%3E%3Ccircle cx='60' cy='60' r='510'/%3E%3Ccircle cx='60' cy='60' r='580'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: top left;
    background-size: min(560px, 60%);
    opacity: var(--umbjm-pattern-opacity, 0.1);
    -webkit-mask-image: var(--umbjm-pattern-mask, radial-gradient(circle at 0% 0%, #000 0%, transparent 78%));
    mask-image: var(--umbjm-pattern-mask, radial-gradient(circle at 0% 0%, #000 0%, transparent 78%));
}
.umbjm-deco-light.umbjm-pattern-ripple::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720' viewBox='0 0 720 720'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Ccircle cx='60' cy='60' r='90'/%3E%3Ccircle cx='60' cy='60' r='160'/%3E%3Ccircle cx='60' cy='60' r='230'/%3E%3Ccircle cx='60' cy='60' r='300'/%3E%3Ccircle cx='60' cy='60' r='370'/%3E%3Ccircle cx='60' cy='60' r='440'/%3E%3Ccircle cx='60' cy='60' r='510'/%3E%3Ccircle cx='60' cy='60' r='580'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: top left;
    background-size: min(560px, 60%);
    opacity: var(--umbjm-pattern-opacity, 0.1);
    -webkit-mask-image: var(--umbjm-pattern-mask, radial-gradient(circle at 0% 0%, #000 0%, transparent 78%));
    mask-image: var(--umbjm-pattern-mask, radial-gradient(circle at 0% 0%, #000 0%, transparent 78%));
}
/* Teks mengikuti tone bg gelap */
.umbjm-deco-light h2,
.umbjm-deco-light h3 {
    color: #ffffff;
}
.umbjm-deco-light .text-center > .text-xs,
.umbjm-deco-light .text-xs.uppercase {
    color: #9ed1ff;
}

/* 7. Dots — grid titik halus */
.umbjm-page-body.umbjm-pattern-dots::before,
.umbjm-deco-dark.umbjm-pattern-dots::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%2302356C'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 24px 24px;
}
.umbjm-footer.umbjm-pattern-dots::before,
.umbjm-hero.umbjm-pattern-dots::before,
.umbjm-deco-light.umbjm-pattern-dots::before,
[data-theme="dark"] .umbjm-page-body.umbjm-pattern-dots::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%23ffffff'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 24px 24px;
}