/* ==========================================================================
   UNGGUL DIESEL INDUSTRIAL — design tokens
   Palette: Ink (near-black), Steel (gray), Signal Yellow (CAT-style accent),
            Alloy (warm light gray), Rust (secondary/CTA accent)
   Type: Oswald (display/condensed industrial), Inter (body),
         Roboto Mono (part numbers / spec data)
   Signature: "spec-plate" cards — rivet corners + mono part-number tag,
              like the ID plates riveted onto heavy machinery.
   ========================================================================== */

:root {
    --udp-yellow: #D6242A;
    --udp-yellow-dark: #E0A800;
    --udp-ink: #14171A;
    --udp-steel: #3D4247;
    --udp-steel-light: #5B6166;
    --udp-alloy: #EDEBE6;
    --udp-alloy-dark: #DCD8D0;
    --udp-rust: #C1440E;
    --udp-white: #FFFFFF;

    --udp-font-display: 'Oswald', 'Arial Narrow', sans-serif;
    --udp-font-body: 'Inter', -apple-system, Segoe UI, sans-serif;
    --udp-font-mono: 'Roboto Mono', 'Courier New', monospace;

    --udp-radius: 3px;
    --udp-shadow: 0 2px 10px rgba(20,23,26,0.08);
    --udp-shadow-lg: 0 12px 32px rgba(20,23,26,0.18);
    --udp-container: 1240px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.udp-site {
    margin: 0;
    font-family: var(--udp-font-body);
    color: var(--udp-steel);
    background: var(--udp-white);
    -webkit-font-smoothing: antialiased;
    line-height: 1.55;
}

.udp-container {
    max-width: var(--udp-container);
    margin: 0 auto;
    padding: 0 20px;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
    font-family: var(--udp-font-display);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--udp-ink);
    margin: 0 0 16px;
    line-height: 1.15;
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 3px solid var(--udp-yellow);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.udp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--udp-font-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 14px;
    font-weight: 600;
    padding: 13px 26px;
    border-radius: var(--udp-radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.udp-btn:hover { transform: translateY(-1px); }

.udp-btn-primary {
    background: var(--udp-ink);
    color: var(--udp-white);
}
.udp-btn-primary:hover { background: var(--udp-yellow); color: var(--udp-white); }

.udp-btn-outline {
    background: transparent;
    border-color: var(--udp-white);
    color: var(--udp-white);
}
.udp-btn-outline:hover { background: rgba(255,255,255,0.12); }

.udp-btn-dark {
    background: var(--udp-ink);
    color: var(--udp-white);
}
.udp-btn-dark:hover { background: var(--udp-steel); }

/* ==========================================================================
   Topbar
   ========================================================================== */

.udp-topbar {
    background: var(--udp-ink);
    color: var(--udp-alloy);
    font-size: 13px;
    border: none;
    box-shadow: none;
    outline: none;
}
.udp-topbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 20px;
    gap: 20px;
}
.udp-topbar-contact { display: flex; gap: 22px; flex-wrap: wrap; }
.udp-topbar-contact span { display: inline-flex; align-items: center; gap: 6px; }
.udp-topbar-contact a:hover { text-decoration: underline; }
.udp-ic { display: inline-block; font-style: normal; }
.udp-ic-phone::before { content: '\260E'; }
.udp-ic-mail::before { content: '\2709'; }
.udp-ic-pin::before { content: '\25C9'; }

/* ==========================================================================
   Header
   ========================================================================== */

.udp-header {
    background: var(--udp-white);
    position: relative;
    z-index: 40;
}
body.udp-sticky .udp-header {
    position: sticky;
    top: 0;
}
.udp-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    gap: 24px;
}

.udp-logo-fallback { display: flex; align-items: center; gap: 10px; }
.udp-logo-mark {
    font-family: var(--udp-font-display);
    font-weight: 700;
    background: var(--udp-ink);
    color: var(--udp-yellow);
    padding: 6px 10px;
    border-radius: var(--udp-radius);
    font-size: 20px;
    letter-spacing: 0.03em;
}
.udp-logo-text {
    font-family: var(--udp-font-display);
    font-weight: 600;
    font-size: 17px;
    color: var(--udp-ink);
    text-transform: uppercase;
}

.udp-mainnav { flex: 1; display: flex; justify-content: center; }
.udp-mainnav ul {
    list-style: none;
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}
.udp-mainnav li { position: relative; }
.udp-mainnav a, .udp-mainnav span.separator {
    display: block;
    font-family: var(--udp-font-display);
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--udp-steel);
    padding: 10px 14px;
    border-radius: var(--udp-radius);
}
.udp-mainnav a:hover, .udp-mainnav li.active > a {
    color: var(--udp-ink);
    background: var(--udp-alloy);
}
.udp-mainnav li.active > a { box-shadow: inset 0 -3px 0 var(--udp-yellow); }

/* dropdown */
.udp-mainnav li ul {
    display: none;
    position: absolute;
    top: 100%; left: 0;
    background: var(--udp-white);
    border-top: 3px solid var(--udp-yellow);
    box-shadow: var(--udp-shadow-lg);
    min-width: 200px;
    padding: 6px;
    margin: 0;
    list-style: none;
    z-index: 50;
}
.udp-mainnav li:hover > ul { display: block; }
.udp-mainnav li ul li { list-style: none; }
.udp-mainnav li ul a { color: var(--udp-steel); font-size: 13px; }
.udp-mainnav li ul a:hover { background: var(--udp-alloy); color: var(--udp-ink); }

/* Fix: item aktif di DALAM submenu jangan ikut pakai garis bawah kuning/merah
   yang dipakai untuk menu utama (level 1). Tanpa ini, halaman aktif di dalam
   dropdown (mis. "Hino", "Certificate") ikut kena box-shadow dari
   .udp-mainnav li.active > a, sehingga muncul garis merah di bawahnya.
   Berlaku untuk semua halaman, bukan cuma homepage. */
.udp-mainnav li ul li.active > a {
    box-shadow: none;
}

.udp-submenu-toggle {
    display: none;
    position: absolute;
    right: 6px;
    top: 6px;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
}
.udp-submenu-toggle::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin: 8px auto 0;
    transition: transform 0.15s ease;
}
.udp-mainnav li.is-submenu-open > .udp-submenu-toggle::after { transform: rotate(-135deg); margin-top: 12px; }


.udp-header-actions { display: flex; align-items: center; gap: 10px; }

.udp-search-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--udp-yellow);
    color: var(--udp-white);
    border: none;
    font-family: var(--udp-font-display);
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 11px 18px;
    border-radius: var(--udp-radius);
    cursor: pointer;
}
.udp-search-toggle:hover { background: var(--udp-rust); }
.udp-search-toggle-icon {
    width: 18px; height: 18px;
    border: 3px solid var(--udp-white);
    border-radius: 50%;
    position: relative;
    display: inline-block;
}
.udp-search-toggle-icon::after {
    content: '';
    position: absolute;
    width: 9px; height: 3px;
    background: var(--udp-white);
    right: -7px; bottom: -3px;
    transform: rotate(45deg);
}

.udp-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px; height: 40px;
    background: transparent;
    border: 2px solid var(--udp-ink);
    border-radius: var(--udp-radius);
    cursor: pointer;
}
.udp-nav-toggle span { display: block; height: 2px; background: var(--udp-ink); margin: 0 7px; }

.udp-search-panel {
    display: none;
    background: var(--udp-steel);
    padding: 22px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.udp-search-panel.is-open { display: block; }

/* ==========================================================================
   Hero
   ========================================================================== */

.udp-hero {
    position: relative;
    background: var(--udp-ink);
    overflow: hidden;
    min-height: 320px;
    display: flex;
    align-items: center;
}
.udp-hero-media {
    position: absolute;
    inset: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    object-fit: cover;
    z-index: 0;
}
.udp-hero {
    border: none;
    box-shadow: none;
    line-height: 0;
}

/* ---- Overlay gelap otomatis di atas foto hero ----
   Dulu class .udp-hero-overlay ada tapi tidak dipakai di HTML,
   jadi tidak pernah aktif. Sekarang overlay ini otomatis nempel
   ke SEMUA .udp-hero (tanpa perlu tambah div di konten Joomla).
   Mau lebih terang/gelap? tinggal ubah 3 angka opacity di bawah. */
.udp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(20,23,26,0.55) 0%,
        rgba(20,23,26,0.25) 45%,
        rgba(20,23,26,0) 75%
    );
    z-index: 1;
    pointer-events: none;
}

.udp-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 640px;
    padding: 56px 20px 44px;
    /* .udp-hero memakai line-height:0 (untuk menghilangkan celah putih di bawah foto).
       Nilai itu diwariskan ke semua teks di dalamnya, jadi tanpa ini paragraf yang
       melipat ke 2 baris (di HP) akan menumpuk satu sama lain. */
    line-height: 1.55;
}
.udp-hero-inner .udp-hero-desc { line-height: 1.55; margin: 0 0 4px; }
/* paragraf terakhir (berisi tombol "Cari Sparepart") diberi jarak sedikit dari teks di atasnya */
.udp-hero-inner .udp-hero-desc:last-child { margin: 18px 0 0; }
.udp-hero-eyebrow {
    font-family: var(--udp-font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--udp-yellow);
    margin-bottom: 10px;
}
.udp-hero-title {
    font-size: clamp(28px, 4vw, 42px);
    color: var(--udp-white);
    margin-bottom: 14px;
}
.udp-hero-desc {
    font-size: 15px;
    color: var(--udp-alloy-dark);
    margin-bottom: 22px;
    max-width: 520px;
}
/* Hazard stripe divider dihilangkan atas permintaan — transisi hero jadi mulus tanpa garis */

/* ==========================================================================
   Homepage: hero full-screen + topbar/header mengambang (fixed) di atasnya.
   Transparan saat di posisi paling atas, otomatis jadi solid begitu discroll
   (supaya teks tetap kebaca di atas konten putih di bawahnya).
   Khusus body.udp-homepage — halaman lain tidak terpengaruh sama sekali.
   ========================================================================== */

body.udp-homepage .udp-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: transparent;
    z-index: 46;
    transition: transform 0.25s ease, opacity 0.2s ease;
}
body.udp-homepage .udp-header {
    position: fixed;
    /* --udp-topbar-h diisi otomatis lewat sedikit JS di index.php, sesuai
       tinggi topbar yang SEBENARNYA dirender (bisa 1 atau 2 baris tergantung
       lebar layar) — supaya header tidak numpuk topbar di HP kalau topbar
       melipat jadi 2 baris karena menampilkan telepon+email+kota sekaligus. */
    top: var(--udp-topbar-h, 34px); left: 0; right: 0;
    background: transparent; /* benar-benar transparan sebelum discroll */
    border-bottom: none;
    z-index: 44;
    transition: top 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
body.udp-homepage .udp-header .udp-mainnav a,
body.udp-homepage .udp-header .udp-mainnav span.separator,
body.udp-homepage .udp-header .udp-logo-text {
    color: var(--udp-white);
    transition: color 0.25s ease;
}
body.udp-homepage .udp-header .udp-mainnav a:hover,
body.udp-homepage .udp-header .udp-mainnav li.active > a {
    background: rgba(255,255,255,0.12);
    color: var(--udp-white);
    box-shadow: none;
}
/* pastikan dropdown submenu (background putih) tetap teks gelap, tidak ikut jadi putih */
body.udp-homepage .udp-header .udp-mainnav li ul a {
    color: var(--udp-steel);
}
body.udp-homepage .udp-header .udp-mainnav li ul a:hover {
    background: var(--udp-alloy);
    color: var(--udp-ink);
}
body.udp-homepage .udp-search-toggle {
    background: rgba(255,255,255,0.15);
}
body.udp-homepage .udp-nav-toggle {
    border-color: var(--udp-white);
}
body.udp-homepage .udp-nav-toggle span {
    background: var(--udp-white);
}
body.udp-homepage .udp-hero {
    min-height: 100vh;
    margin-top: 0;
}
body.udp-homepage .udp-hero-inner {
    padding-bottom: 90px;
}

/* ---- Begitu discroll: topbar hilang halus, header jadi solid & pindah ke top:0 ---- */
body.udp-homepage.udp-scrolled .udp-topbar {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}
body.udp-homepage.udp-scrolled .udp-header {
    top: 0;
    background: var(--udp-white);
    box-shadow: 0 2px 10px rgba(20,23,26,0.08);
}
body.udp-homepage.udp-scrolled .udp-header .udp-mainnav a,
body.udp-homepage.udp-scrolled .udp-header .udp-mainnav span.separator {
    color: var(--udp-steel);
}
body.udp-homepage.udp-scrolled .udp-header .udp-mainnav a:hover,
body.udp-homepage.udp-scrolled .udp-header .udp-mainnav li.active > a {
    color: var(--udp-ink);
    background: var(--udp-alloy);
}
body.udp-homepage.udp-scrolled .udp-header .udp-logo-text {
    color: var(--udp-ink);
}
body.udp-homepage.udp-scrolled .udp-search-toggle {
    background: var(--udp-yellow);
}
body.udp-homepage.udp-scrolled .udp-search-toggle:hover {
    background: var(--udp-rust);
}
body.udp-homepage.udp-scrolled .udp-nav-toggle {
    border-color: var(--udp-ink);
}
body.udp-homepage.udp-scrolled .udp-nav-toggle span {
    background: var(--udp-ink);
}
/* pastikan dropdown submenu (background putih) tetap teks gelap, walau sedang di kondisi scrolled */
body.udp-homepage.udp-scrolled .udp-header .udp-mainnav li ul a {
    color: var(--udp-steel);
}
body.udp-homepage.udp-scrolled .udp-header .udp-mainnav li ul a:hover {
    background: var(--udp-alloy);
    color: var(--udp-ink);
}

@media (max-width: 860px) {
    body.udp-homepage.udp-scrolled .udp-header { top: 0; }
}

/* ==========================================================================
   Brand strip
   ========================================================================== */

.udp-brandstrip {
    background: var(--udp-alloy);
    padding: 22px 0;
    border-bottom: 1px solid var(--udp-alloy-dark);
}
.udp-brandstrip img { max-height: 40px; width: auto; filter: grayscale(1) opacity(0.65); transition: filter 0.2s ease; }
.udp-brandstrip img:hover { filter: grayscale(0) opacity(1); }

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.udp-breadcrumb-bar {
    background: var(--udp-white);
    border-bottom: 1px solid var(--udp-alloy-dark);
    padding: 12px 0;
    font-size: 13px;
    color: var(--udp-steel-light);
}
.udp-breadcrumb-bar a { color: var(--udp-steel-light); }
.udp-breadcrumb-bar a:hover { color: var(--udp-rust); }

/* ==========================================================================
   Main / content grid
   ========================================================================== */

.udp-main { padding: 0; }
.udp-main-grid { display: grid; grid-template-columns: 1fr; gap: 40px; padding: 0 20px; }
.udp-main-grid.has-sidebar { grid-template-columns: 2.4fr 1fr; }
.udp-main-grid.no-sidebar { padding: 0; }

.udp-component h2 { font-size: 26px; }
.udp-component p { margin: 0 0 16px; }

.udp-panel {
    background: var(--udp-alloy);
    border-left: 4px solid var(--udp-yellow);
    padding: 20px;
    border-radius: var(--udp-radius);
    margin-bottom: 20px;
}
.udp-panel h3 { font-size: 16px; margin-bottom: 10px; }

/* ==========================================================================
   Spec-plate cards (signature element) — used for spare-part cards,
   service cards, and promo cards: rivet corners + mono ID tag.
   ========================================================================== */

.udp-plate {
    position: relative;
    background: var(--udp-white);
    border: 1px solid var(--udp-alloy-dark);
    border-radius: var(--udp-radius);
    box-shadow: var(--udp-shadow);
    padding: 18px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.udp-plate:hover { box-shadow: var(--udp-shadow-lg); transform: translateY(-2px); }

.udp-plate::before, .udp-plate::after,
.udp-plate .udp-rivet-l, .udp-plate .udp-rivet-r {
    content: '';
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff, var(--udp-steel-light) 70%);
    top: 8px;
    box-shadow: 0 68px 0 0 rgba(0,0,0,0); /* overridden per-card height via inline if needed */
}
.udp-plate::before { left: 8px; }
.udp-plate::after { right: 8px; }

/* ==========================================================================
   Promo / Services sections
   ========================================================================== */

.udp-promo, .udp-services {
    padding: 52px 0;
}
.udp-promo { background: var(--udp-white); }
.udp-services { background: var(--udp-alloy); }

.udp-promo h2, .udp-services h2 {
    font-size: 24px;
    border-left: 6px solid var(--udp-yellow);
    padding-left: 14px;
    margin-bottom: 28px;
}

/* ==========================================================================
   Partner strip
   ========================================================================== */

.udp-partnerstrip {
    background: var(--udp-ink);
    padding: 36px 0;
    text-align: center;
}
.udp-partnerstrip-label {
    font-family: var(--udp-font-display);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 12px;
    color: var(--udp-yellow);
    margin-bottom: 18px;
}
.udp-partnerstrip img { max-height: 32px; filter: grayscale(1) invert(1) opacity(0.7); display: inline-block; }

/* ==========================================================================
   Footer
   ========================================================================== */

.udp-footer { background: #ffffff; color: var(--udp-steel); border-top: 1px solid var(--udp-alloy-dark); }
.udp-footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    padding: 48px 20px;
}
.udp-footer-grid.udp-footer-grid-single {
    grid-template-columns: 1fr;
}
.udp-footer-grid.udp-footer-grid-single .udp-footer-office {
    max-width: none;
}
.udp-footer a { color: var(--udp-steel); }
.udp-footer a:hover { color: var(--udp-rust); }
.udp-footer h3, .udp-footer strong {
    color: var(--udp-ink);
    font-family: var(--udp-font-display);
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.03em;
}
.udp-footer-bottom {
    background: var(--udp-alloy);
    border-top: 1px solid var(--udp-alloy-dark);
    padding: 16px 0;
    font-size: 13px;
}
.udp-footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--udp-steel);
}

/* ==========================================================================
   Error page
   ========================================================================== */

.udp-error-wrap { padding: 90px 0; background: var(--udp-alloy); }
.udp-error-plate {
    background: var(--udp-white);
    border-top: 6px solid var(--udp-yellow);
    box-shadow: var(--udp-shadow-lg);
    padding: 48px;
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    border-radius: var(--udp-radius);
}
.udp-error-code {
    font-family: var(--udp-font-mono);
    font-size: 15px;
    letter-spacing: 0.2em;
    color: var(--udp-rust);
    display: block;
    margin-bottom: 10px;
}
.udp-error-title { font-size: 26px; }
.udp-error-desc { color: var(--udp-steel-light); margin-bottom: 24px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 992px) {
    .udp-main-grid.has-sidebar { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .udp-nav-toggle { display: inline-flex; }
    .udp-mainnav {
        position: fixed;
        top: 0; right: -100%;
        width: min(320px, 88vw);
        height: 100vh;
        background: var(--udp-ink);
        flex-direction: column;
        justify-content: flex-start;
        padding: 90px 20px 20px;
        transition: right 0.25s ease;
        overflow-y: auto;
        z-index: 60;
    }
    .udp-mainnav.is-open { right: 0; }
    .udp-mainnav ul { flex-direction: column; width: 100%; }
    .udp-mainnav a, .udp-mainnav span.separator { color: var(--udp-alloy); padding: 12px 10px; }
    .udp-mainnav a:hover, .udp-mainnav li.active > a { background: rgba(255,195,0,0.12); color: var(--udp-yellow); }
    .udp-mainnav li ul {
        position: static;
        box-shadow: none;
        border-top: none;
        background: var(--udp-white);
        border-radius: 3px;
        padding: 6px;
        margin: 6px 0 10px;
        display: none;
    }
    .udp-mainnav li.is-submenu-open > ul { display: block; }
    .udp-mainnav li ul a { color: var(--udp-steel); padding: 10px 12px; }
    .udp-mainnav li ul a:hover { background: var(--udp-alloy); color: var(--udp-ink); }

    .udp-search-toggle-label { display: none; }
    .udp-header-inner { padding: 12px 16px; }
}

@media (max-width: 640px) {
    .udp-topbar-inner { padding: 8px 20px; }
    .udp-topbar-contact { gap: 10px 16px; font-size: 12px; }
    .udp-footer-grid { grid-template-columns: 1fr; }
    .udp-promo h2, .udp-services h2 { font-size: 20px; }
}

/* ===== Fix: hilangkan garis di bawah topbar (telepon, email, kota) ===== */
.udp-topbar,
.udp-topbar *,
.udp-topbar-contact,
.udp-topbar-contact span,
.udp-topbar-contact a,
.udp-topbar-contact i {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ===== Fix: custom logo bikin header jadi terlalu tinggi ===== */
.udp-logo,
.udp-logo-fallback,
.udp-logo a {
    display: flex !important;
    align-items: center;
    max-height: 48px;
}
.udp-logo-combo {
    display: flex !important;
    align-items: center;
    gap: 12px;
    max-height: 64px;
}
.udp-logo-icon-img {
    height: 56px !important;
    width: auto !important;
    max-height: 56px !important;
    object-fit: contain;
}
.udp-logo-text-img {
    height: 34px !important;
    width: auto !important;
    max-height: 34px !important;
    object-fit: contain;
    transition: filter 0.25s ease;
}

/* ===== Logo: ikon merah SELALU tetap merah. Cuma tulisan yang berubah:
   putih sebelum discroll di homepage (biar kebaca di atas foto hero),
   balik ke warna biru asli begitu discroll / di halaman lain ===== */
body.udp-homepage:not(.udp-scrolled) .udp-logo-text-img {
    filter: brightness(0) invert(1);
}
body.udp-homepage.udp-scrolled .udp-logo-text-img,
body:not(.udp-homepage) .udp-logo-text-img {
    filter: none;
}

/* ===== Fix: header di halaman SELAIN homepage harus tetap putih
   (tidak menyentuh homepage — efek transparan/hitam saat scroll di
   homepage tetap seperti semula, tidak berubah) ===== */
body:not(.udp-homepage) .udp-header {
    background: var(--udp-white) !important;
}
@media (min-width: 861px) {
    body:not(.udp-homepage) .udp-header .udp-mainnav a,
    body:not(.udp-homepage) .udp-header .udp-mainnav span.separator,
    body:not(.udp-homepage) .udp-header .udp-logo-text {
        color: var(--udp-steel) !important;
    }
}

/* ===== Fix: garis/jarak putih antara hero dan section video di bawahnya.
   Penyebab: editor Joomla membungkus blok <style> custom dengan <p>,
   dan <p> kosong ini masih punya margin bawaan browser. ===== */
[itemprop="articleBody"] > p:first-child {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
}
/* ===== MOBILE: logo lebih kecil + teks hero lebih pas ===== */

/* Logo dan header (HP dan tablet kecil, saat tombol menu tampil) */
@media (max-width: 860px) {
    .udp-header-inner { gap: 10px; padding: 10px 14px; }
    .udp-header-actions { gap: 8px; }
    .udp-logo { flex: 0 1 auto; min-width: 0; }
    .udp-logo-combo { gap: 8px !important; max-height: 44px !important; }
    .udp-header .udp-logo-icon-img { height: 38px !important; max-height: 38px !important; }
    .udp-header .udp-logo-text-img { height: 24px !important; max-height: 24px !important; }
}

/* HP yang sangat sempit */
@media (max-width: 400px) {
    .udp-header-inner { padding: 10px 12px; }
    .udp-header .udp-logo-icon-img { height: 34px !important; max-height: 34px !important; }
    .udp-header .udp-logo-text-img { height: 21px !important; max-height: 21px !important; }
}

/* Teks hero di HP */
@media (max-width: 640px) {
    .udp-hero h1,
    .udp-hero .udp-hero-title {
        font-size: clamp(22px, 6.4vw, 28px) !important;
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
    }
    .udp-hero p,
    .udp-hero .udp-hero-desc {
        font-size: clamp(14px, 3.9vw, 16px) !important;
        line-height: 1.5 !important;
    }
    .udp-hero a {
        font-size: 14px !important;
        padding: 11px 20px !important;
    }
}
/* ===== MOBILE MENU: warna teks tetap, tombol tutup, latar meredup ===== */
.udp-nav-close { display: none; }
body.udp-menu-open { overflow: hidden; }

@media (max-width: 860px) {
    /* Teks menu tetap putih, tidak berubah saat halaman discroll */
    body .udp-header .udp-mainnav a,
    body .udp-header .udp-mainnav span.separator {
        color: var(--udp-white) !important;
    }
    /* Item aktif / disentuh: tampilan sama di posisi atas maupun setelah discroll */
    body .udp-header .udp-mainnav a:hover,
    body .udp-header .udp-mainnav li.active > a {
        background: rgba(255,255,255,0.12) !important;
        color: var(--udp-white) !important;
    }
    /* Submenu (kotak putih) tetap teks gelap */
    body .udp-header .udp-mainnav li ul a {
        color: var(--udp-steel) !important;
    }
    body .udp-header .udp-mainnav li ul a:hover,
    body .udp-header .udp-mainnav li ul li.active > a {
        background: var(--udp-alloy) !important;
        color: var(--udp-ink) !important;
    }

    /* Daftar menu dimulai di bawah topbar dan tombol tutup */
    .udp-mainnav {
        padding-top: calc(var(--udp-topbar-h, 34px) + 64px);
        transition: right 0.25s ease, box-shadow 0.25s ease;
    }

    /* Tombol tutup (X), diletakkan di bawah topbar supaya bisa disentuh */
    .udp-nav-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: calc(var(--udp-topbar-h, 34px) + 10px);
        right: 16px;
        width: 40px;
        height: 40px;
        padding: 0;
        background: transparent;
        border: 1px solid rgba(255,255,255,0.5);
        border-radius: 3px;
        color: var(--udp-white);
        font-size: 26px;
        line-height: 1;
        cursor: pointer;
    }

    /* Halaman di balik menu meredup saat menu terbuka */
    .udp-mainnav.is-open { box-shadow: 0 0 0 100vmax rgba(0,0,0,0.45); }
}