/* Detail event (pages.event.detail) + detail artikel blog (pages.blog.detail), desain arah-5. Dimuat setelah home.css; token dari shell.css (.lp-page).
   Design Read event: A · calon peserta yang sudah tertarik · pastikan jadwal lalu daftar · elemen berani: poster asli miring di atas bidang kuning (blok .ev beranda) · dial 4/3/4.
   Design Read blog: A · pembaca dari pencarian/tautan · membaca sampai habis · elemen berani: sampul besar yang menumpang di pita navy · dial 3/2/3.
   Kontras: putih di atas navy-deep 15:1; navy-deep di atas kuning 8,6:1; ink di atas putih 16:1; ink-2 di atas putih 7,9:1;
   --ok #0F7A4F di atas putih 5,6:1; --err #B42318 di atas putih 6,3:1. Kuning hanya bidang, tidak pernah warna teks di atas putih. */
.lp-page { --ok: #0F7A4F; --err: #B42318; }

/* ===== remah roti (di pita navy) ===== */
.dx-crumb ol { display: flex; align-items: center; flex-wrap: nowrap; gap: 0; margin: 0 0 28px; padding: 0; list-style: none; font-size: 14px; color: rgba(255, 255, 255, .66); min-width: 0; }
.dx-crumb li { display: flex; align-items: center; flex: none; }
.dx-crumb li + li::before { content: "/"; padding: 0 10px; color: rgba(255, 255, 255, .4); }
.dx-crumb a { display: inline-flex; align-items: center; min-height: 44px; color: rgba(255, 255, 255, .82); }
.dx-crumb li[aria-current] { flex: 1 1 auto; min-width: 0; color: #fff; }
.dx-crumb li[aria-current] span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .dx-crumb a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; } }

/* ===== pembuka event ===== */
.dx-top { padding: 32px 0 88px; }
.dx-ev { align-items: start; }
.lp-home .dx-ev h1 { color: #fff; font-weight: 700; font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -.04em; line-height: 1.06; max-width: 22ch; }
.dx-ev .ev-meta dd { overflow-wrap: anywhere; }
.dx-poster { min-height: 0; }
.dx-poster svg.m { position: absolute; left: 50%; top: 50%; width: 46%; translate: -50% -50%; fill: var(--line-2); }
.dx-poster img { position: relative; }
.dx-poster:not(:has(img)) { aspect-ratio: 4 / 5; }

.dx-cd { display: grid; gap: 10px; width: 100%; }
.lp-home .dx-cd-l { color: rgba(255, 255, 255, .7); }
.dx-cd[data-state="live"] .dx-cd-l, .dx-cd[data-state="ended"] .dx-cd-l { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; font-size: 12px; }
.dx-cd[data-state="live"] .dx-cd-l { background: var(--yellow); color: var(--navy-deep); }
.dx-cd[data-state="live"] .dx-cd-l::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--navy-deep); }
.dx-cd[data-state="ended"] .dx-cd-l { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.dx-cd .cd p { min-width: 84px; }

/* bagikan: lingkaran 44px; di pita navy garisnya putih */
.dx-share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dx-sh { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 16px; border-radius: 999px; font: 600 14px/1 var(--text); color: var(--navy-deep); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; transition: background-color 160ms var(--ease), color 160ms var(--ease); }
.lp-home button.dx-sh { text-align: center; }
.dx-sh-i { width: 44px; padding: 0; }
.dx-sh i { font-size: 16px; line-height: 1; }
.dark .dx-sh { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
@media (hover: hover) { .dx-sh:hover { background: var(--navy-pale); } .dark .dx-sh:hover { background: rgba(255, 255, 255, .12); } }

/* ===== isi event: deskripsi kiri, kartu tiket kanan (di HP tiket naik ke atas) ===== */
.dx-main.sec { padding-top: 72px; }
.dx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); grid-template-areas: "body side"; gap: clamp(32px, 5vw, 72px); align-items: start; }
.dx-side { grid-area: side; position: sticky; top: 120px; scroll-margin-top: 120px; }
.dx-body { grid-area: body; min-width: 0; }
.dx-body > .h2 { margin-bottom: 24px; }
.dx-empty { color: var(--ink-2); padding: 20px; border-radius: 14px; background: var(--bg); }

.dx-reg { gap: 18px; box-shadow: inset 0 0 0 1px var(--line-2), 0 36px 80px -52px rgba(26, 32, 73, .45); }
.dx-reg-top { display: grid; gap: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.lp-home .dx-reg-top h2 { font: 500 11px/1.3 var(--mono); letter-spacing: .09em; color: var(--gold-ink); }
.dx-price { display: grid; gap: 6px; justify-items: start; }
.dx-price .was { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink-3); }
.dx-price .was b { padding: 3px 8px; border-radius: 6px; background: var(--yellow); color: var(--navy-deep); font-size: 13px; font-weight: 700; }
.dx-price .now { font: 700 36px/1 var(--display); letter-spacing: -.035em; color: var(--navy-deep); }
.dx-price .free { padding: 8px 14px; border-radius: 999px; background: var(--yellow); color: var(--navy-deep); font: 700 22px/1 var(--display); letter-spacing: -.02em; }
.dx-price.pop .now, .dx-price.pop .free { animation: dxPop 420ms var(--ease); }
@keyframes dxPop { 40% { transform: scale(1.06); } }

.dx-lead { font-size: 15px; color: var(--ink-2); }
.dx-cta { width: 100%; justify-content: center; min-height: 52px; font-size: 16px; }
.lp-home button.dx-cta { text-align: center; }
.dx-cta[aria-busy="true"] { opacity: .7; cursor: progress; }
.dx-free { display: grid; gap: 14px; }

.dx-state { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border-radius: 14px; background: var(--bg); }
.dx-state b { display: block; font: 600 17px/1.25 var(--display); letter-spacing: -.015em; color: var(--navy-deep); }
.dx-state p { margin-top: 4px !important; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.dx-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-pale); color: var(--navy-deep); font-size: 17px; }
.dx-state.ok .dx-ic { background: var(--yellow); }
.dx-note { padding: 14px 16px; border-radius: 14px; background: var(--navy-pale); display: grid; gap: 6px; }
.lp-home .dx-note .mono { color: var(--navy-deep); }
.dx-note p { font-size: 14.5px; line-height: 1.55; color: var(--ink); white-space: pre-line; }
.dx-acts { display: grid; gap: 10px; }
.dx-acts .lp-btn { justify-content: center; min-height: 50px; white-space: normal; text-align: center; line-height: 1.25; }
.dx-acts .lp-btn i { font-size: 18px; }
.dx-row { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 4px 0; border-top: 1px solid var(--line); font-size: 15px; font-weight: 600; color: var(--navy-deep); }
.dx-row i { font-size: 18px; color: var(--ink-2); }
.dx-row svg { width: 16px; height: 16px; margin-left: auto; color: var(--ink-3); transition: transform 220ms var(--ease); }
@media (hover: hover) { .dx-row:hover { text-decoration: underline; text-underline-offset: 4px; } .dx-row:hover svg { transform: translateX(3px); color: var(--navy-deep); } }
.dx-info { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--bg); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.dx-info i { flex: none; margin-top: 2px; font-size: 16px; color: var(--gold-ink); }
.dx-host { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.dx-host b { color: var(--navy-deep); font-weight: 600; }
.dx-mk { flex: none; width: 36px; height: 36px; display: grid; place-items: center; }
.dx-mk svg { width: 36px; height: 36px; }

/* ===== field: label terlihat, fokus jelas, galat merah dengan teks ===== */
.dx-f { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.dx-f > label, .dx-f > legend { padding: 0; font: 600 14.5px/1.35 var(--text); color: var(--navy-deep); }
.dx-f > label span[aria-hidden], .dx-f > legend span[aria-hidden] { color: var(--err); }
.dx-f input:not([type="radio"]):not([type="file"]), .dx-f textarea, .dx-f select { width: 100%; min-height: 48px; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); font: 400 16px/1.4 var(--text); color: var(--ink); outline: none; transition: box-shadow 160ms var(--ease); }
.dx-f textarea { resize: vertical; min-height: 96px; }
.dx-f input::placeholder, .dx-f textarea::placeholder { color: var(--ink-3); opacity: 1; }
.dx-f input:focus-visible, .dx-f textarea:focus-visible, .dx-f select:focus-visible { box-shadow: inset 0 0 0 2px var(--navy-deep); outline: none; }
.dx-f input[type="file"] { width: 100%; min-height: 48px; padding: 10px; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); font: 400 14.5px/1.4 var(--text); color: var(--ink-2); }
.dx-f input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--navy-deep); color: #fff; font: 600 13.5px/1 var(--text); cursor: pointer; }
.dx-f [aria-invalid="true"], .dx-f.bad input[type="file"] { box-shadow: inset 0 0 0 2px var(--err) !important; }
.dx-hint { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.dx-err { font-size: 13.5px; font-weight: 500; color: var(--err); }
.dx-sel { position: relative; }
.dx-sel select { appearance: none; -webkit-appearance: none; padding-right: 40px !important; cursor: pointer; }
.dx-sel svg { position: absolute; right: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--ink-3); pointer-events: none; }
.dx-opts { display: grid; gap: 6px; }
.dx-opt { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 15px; color: var(--ink); cursor: pointer; transition: box-shadow 160ms var(--ease), background-color 160ms var(--ease); }
.dx-opt input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--navy-deep); }
.dx-opt:has(input:checked) { background: var(--navy-pale); box-shadow: inset 0 0 0 2px var(--navy-deep); }
.dx-opt:has(input:focus-visible) { outline: 2px solid var(--navy-deep); outline-offset: 2px; }
.dx-f.bad .dx-opt { box-shadow: inset 0 0 0 1px var(--err); }

.dx-vrow { display: flex; gap: 8px; }
.dx-vrow input { flex: 1; min-width: 0; text-transform: uppercase; }
.dx-vrow input::placeholder { text-transform: none; }
.dx-vrow .lp-btn { flex: none; min-height: 48px; padding: 0 18px; font-size: 14.5px; }
.dx-msg { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.45; font-weight: 500; color: var(--ink-2); }
.dx-msg.ok { color: var(--ok); } .dx-msg.err { color: var(--err); }
.dx-msg.ok::before, .dx-msg.err::before { font: 900 13px/1.45 "Font Awesome 5 Free"; }
.dx-msg.ok::before { content: "\f00c"; } .dx-msg.err::before { content: "\f071"; }

/* lokasi + tautan */
.dx-loc { margin-top: 48px; border-radius: var(--r-lg); overflow: hidden; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); }
.dx-loc-h { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; }
.dx-loc-h p { margin-top: 4px !important; font: 600 16px/1.4 var(--display); letter-spacing: -.01em; color: var(--navy-deep); overflow-wrap: anywhere; }
.dx-map { position: relative; aspect-ratio: 16 / 7; background: var(--navy-pale); }
.dx-map iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0 !important; }
.dx-loc .dx-row { padding: 4px 20px; }
.dx-link { margin-top: 24px !important; display: grid; gap: 6px; padding: 16px 20px; border-radius: 14px; background: var(--bg); }
.dx-link a { font-size: 15px; font-weight: 500; color: var(--navy-deep); text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }

/* ===== tipografi baca panjang untuk HTML CMS (deskripsi event & isi artikel) ===== */
.prose { max-width: 68ch; font: 400 17px/1.75 var(--text); color: var(--ink); overflow-wrap: break-word; }
.prose-l { font-size: 18px; }
.lp-home .prose > :first-child { margin-top: 0; }
.lp-home .prose p, .lp-home .prose ul, .lp-home .prose ol, .lp-home .prose blockquote, .lp-home .prose figure, .lp-home .prose pre, .lp-home .prose table { margin: 0 0 1.15em; }
.lp-home .prose h1, .lp-home .prose h2 { margin: 1.8em 0 .6em; font-size: clamp(23px, 2.2vw, 28px); font-weight: 700; line-height: 1.2; letter-spacing: -.025em; }
.lp-home .prose h3 { margin: 1.6em 0 .5em; font-size: 21px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
.lp-home .prose h4, .lp-home .prose h5, .lp-home .prose h6 { margin: 1.4em 0 .4em; font: 600 18px/1.3 var(--display); color: var(--navy-deep); letter-spacing: -.01em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin: 0 0 .45em; padding-left: .2em; }
.prose li::marker { color: var(--ink-3); }
.prose ul > li::marker { color: var(--gold-ink); }
.lp-home .prose li > p { margin: 0; }
.lp-home .prose li > ul, .lp-home .prose li > ol { margin: .45em 0 0; }
.prose strong, .prose b { font-weight: 600; color: var(--navy-deep); }
.lp-home .prose a { color: var(--navy-deep); font-weight: 500; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; overflow-wrap: anywhere; }
@media (hover: hover) { .lp-home .prose a:hover { text-decoration-color: var(--navy-deep); } }
.lp-home .prose blockquote { padding: 4px 0 4px 20px; border-left: 4px solid var(--yellow); font: 500 1.08em/1.6 var(--display); color: var(--navy-deep); }
.lp-home .prose blockquote p:last-child { margin-bottom: 0; }
.lp-home .prose img { height: auto !important; max-width: 100%; margin: 1.6em 0; border-radius: 14px; }
.lp-home .prose p > img:only-child { margin: 0; }
.prose figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-3); }
.prose iframe, .prose video { display: block; width: 100% !important; max-width: 100%; height: auto !important; aspect-ratio: 16 / 9; margin: 1.6em 0; border: 0; border-radius: 14px; background: var(--navy-pale); }
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: .92em; }
.prose th, .prose td { padding: 10px 14px; border: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.prose th { background: var(--bg); font-weight: 600; color: var(--navy-deep); }
.prose hr { margin: 2.2em 0; border: 0; border-top: 1px solid var(--line-2); }
.prose code { padding: .12em .4em; border-radius: 6px; background: var(--bg); font: 500 .88em/1.5 var(--mono); }
.prose pre { overflow-x: auto; padding: 16px 18px; border-radius: 14px; background: var(--navy-deep); color: #fff; }
.prose pre code { padding: 0; background: none; color: inherit; }
/* gaya bawaan editor CMS (Word/TinyMCE: font-size 12pt, Times, warna biru) diseragamkan supaya ukuran dan warna tetap sistem */
.prose :is(p, li, span, div, font, strong, em, b, i, u, ul, ol, td, th)[style] { font-size: inherit !important; font-family: inherit !important; line-height: inherit !important; background-color: transparent !important; }
.prose :is(p, li, span, div, font, em, i, u, td)[style*="color"] { color: inherit !important; }
.prose [style*="margin-left"] { margin-left: 0 !important; }
.prose font { color: inherit; }

/* ===== dialog formulir syarat (di luar .lp-home, jadi punya reset sendiri) ===== */
.dx-dlg { width: min(560px, calc(100% - 32px)); max-height: min(88svh, 820px); padding: 0; border: 0; border-radius: var(--r-lg); background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--text); box-shadow: 0 40px 100px -40px rgba(4, 6, 20, .7); overflow: hidden; }
.dx-dlg *, .dx-dlg *::before, .dx-dlg *::after { box-sizing: border-box; }
.dx-dlg::backdrop { background: rgba(20, 26, 51, .6); }
.dx-dlg[open] { display: flex; animation: dxIn 260ms var(--ease); }
@keyframes dxIn { from { opacity: 0; transform: translateY(12px); } }
.dx-dlg form { display: flex; flex-direction: column; width: 100%; max-height: inherit; }
.dx-dlg p, .dx-dlg h2, .dx-dlg fieldset { margin: 0; }
.dx-dlg svg { display: block; }
.dx-dlg :focus-visible { outline: 2px solid var(--navy-deep); outline-offset: 3px; border-radius: 6px; }
.dx-dlg-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px 14px 24px; border-bottom: 1px solid var(--line); }
.dx-dlg h2 { font: 700 21px/1.2 var(--display); letter-spacing: -.025em; color: var(--navy-deep); }
.dx-x { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--navy-deep); cursor: pointer; }
.dx-x svg { width: 18px; height: 18px; }
@media (hover: hover) { .dx-x:hover { background: var(--navy-pale); } }
.dx-dlg-body { flex: 1; overflow-y: auto; padding: 20px 24px; display: grid; gap: 20px; align-content: start; overscroll-behavior: contain; }
.dx-dlg-foot { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 14px 24px 18px; border-top: 1px solid var(--line); }
.dx-dlg .lp-btn { border: 0; cursor: pointer; }
.dx-dlg .lp-btn[aria-busy="true"] { opacity: .7; cursor: progress; }
.dx-ghost { background: var(--bg); color: var(--navy-deep); }
@media (hover: hover) { .dx-ghost:hover { background: var(--navy-pale); } }

/* toast kecil untuk "Tautan disalin" */
.dx-toast { position: fixed; left: 50%; bottom: 24px; z-index: 2100; margin: 0; padding: 12px 20px; border-radius: 999px; background: var(--navy-deep); color: #fff; font: 600 14.5px/1.3 var(--text); box-shadow: 0 24px 50px -20px rgba(4, 6, 20, .6); transform: translateX(-50%); animation: dxUp 260ms var(--ease); max-width: calc(100% - 32px); text-align: center; }
@keyframes dxUp { from { opacity: 0; transform: translate(-50%, 10px); } }

/* ===== artikel blog ===== */
.dx-narrow { width: min(100% - 48px, 760px); margin-inline: auto; }
.dx-ahead { padding: 32px 0 64px; }
.dx-ahead.has-cover { padding-bottom: 152px; }
.lp-home .dx-ahead h1 { margin-top: 18px; color: #fff; font-weight: 700; font-size: clamp(32px, 4.4vw, 52px); letter-spacing: -.04em; line-height: 1.08; }
.dx-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dx-tags .chip { gap: 8px; min-height: 44px; background: var(--paper); }
.dark .dx-tags .chip { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
@media (hover: hover) { .dark .dx-tags a.chip:hover { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); } }
.dx-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--yellow)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); }
.dx-byline { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .16); }
.dx-by { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.4; }
.dx-by .dx-mk { width: 44px; height: 44px; } .dx-by .dx-mk svg { width: 44px; height: 44px; }
.dx-by b { display: block; font: 600 15.5px/1.3 var(--display); color: #fff; }
.dx-facts { display: block; margin-top: 2px; color: rgba(255, 255, 255, .72); }
.dx-cover-w { position: relative; margin-top: -112px; }
.dx-cover { max-width: 1000px; margin: 0 auto; aspect-ratio: 1200 / 630; border-radius: var(--r-lg); overflow: hidden; background: var(--navy-pale); box-shadow: 0 50px 90px -50px rgba(26, 32, 73, .55); }
.dx-cover img { width: 100%; height: 100%; object-fit: cover; }
.dx-read { padding: 56px 0 88px; }
.dx-aend { display: grid; gap: 22px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line-2); }
.dx-aend-r { display: grid; gap: 12px; }

.dx-promo { display: flex; justify-content: space-between; align-items: center; gap: 20px 32px; flex-wrap: wrap; padding: clamp(24px, 4vw, 40px); border-radius: 24px; background: var(--yellow); color: var(--navy-deep); }
.lp-home .dx-promo h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; color: var(--navy-deep); }
.dx-promo p { margin-top: 8px !important; max-width: 46ch; font-size: 16.5px; color: var(--navy-deep); }
.dx-next-h { margin: 72px 0 28px; }
.dx-back { margin-top: 32px; }
.dx-rel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dx-rc { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-lg); overflow: hidden; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow 220ms var(--ease), transform 320ms var(--ease); }
.dx-rc figure { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy-pale); display: grid; place-items: center; }
.dx-rc figure svg.m { position: absolute; width: 40%; fill: var(--line-2); }
.dx-rc img { position: relative; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.dx-rc > div { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; }
.lp-home .dx-rc h3 { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dx-rc small { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-3); }
@media (hover: hover) { .dx-rc:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line-2), 0 34px 60px -38px rgba(26, 32, 73, .5); } .dx-rc:hover img { transform: scale(1.04); } .dx-rc:hover h3 { text-decoration: underline; text-underline-offset: 4px; } }

@media (max-width: 900px) {
  .dx-top { padding: 20px 0 56px; }
  .dx-crumb ol { margin-bottom: 20px; }
  .dx-grid { grid-template-columns: 1fr; grid-template-areas: "side" "body"; }
  .dx-side { position: static; }
  .dx-main.sec { padding-top: 40px; }
  .dx-cd .cd p { min-width: 0; }
  .dx-map { aspect-ratio: 4 / 3; }
  .dx-ahead { padding-bottom: 48px; } .dx-ahead.has-cover { padding-bottom: 96px; }
  .dx-cover-w { margin-top: -64px; }
  .dx-read { padding: 40px 0 64px; }
  .dx-rel { grid-template-columns: 1fr 1fr; }
  .dx-next-h { margin-top: 56px; }
}
@media (max-width: 600px) {
  .dx-rel { grid-template-columns: 1fr; }
  .prose { font-size: 16.5px; } .prose-l { font-size: 17px; }
  .dx-promo .lp-btn { width: 100%; justify-content: center; }
  .dx-dlg { width: 100%; max-width: none; max-height: 92svh; margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .dx-dlg-foot .lp-btn { flex: 1; justify-content: center; }
  .ev-go .dx-share { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .dx-dlg[open], .dx-toast, .dx-price.pop .now, .dx-price.pop .free { animation: none; }
  .dx-rc, .dx-rc img, .dx-row svg, .dx-sh, .dx-opt { transition: none; } .dx-rc:hover { transform: none; }
}

/* home.css mereset semua <button> di .lp-home (background: none), jadi tombol .lp-btn berbentuk <button> diberi bidangnya lagi */
.lp-home button.lp-btn { justify-content: center; text-align: center; }
.lp-home button.lp-btn-y { background: var(--yellow); }
.lp-home button.lp-btn-n { background: var(--navy-deep); }
.lp-home button.lp-btn:disabled { cursor: progress; }
@media (hover: hover) { .lp-home button.lp-btn-y:not(:disabled):hover { background: var(--yellow-hi); } .lp-home button.lp-btn-n:not(:disabled):hover { background: var(--navy); } }