/* ==========================================================
   DInvite — Tema "Media Online" (Portal berita modern)
   Sampul = notifikasi berita di layar kunci HP (geser ke atas untuk membuka).
   Isi = halaman artikel: header portal, pita BREAKING NEWS berjalan, label
   kategori, judul besar, byline, foto utama, label LIVE pada hitung mundur,
   kronologi bergaya live-update, ucapan tamu sebagai kolom komentar,
   bilah progres baca. Merek portal fiktif ("KabarKita").
   Hiasan dipasang mediaonline.js; gerak dimatikan bila diminta perangkat.
   ========================================================== */
.t-mediaonline {
    --bg: #ffffff; --bg-2: #f4f5f7; --card: #ffffff; --ink: #0f1115; --muted: #5b616e; --soft: #8a909c;
    --accent: #e11d2e; --accent-2: #0f1115; --on-accent: #fff; --line: #e6e8ec; --line-2: #d6d9df;
    --red: #e11d2e; --red-soft: #fdecee; --blue: #1f5eff;
    --hero-rgb: 15,17,21; --tint-a: .45; --hero-ink: #ffffff;
    --head: 'Archivo', 'Inter', system-ui, sans-serif;
    --ui: 'Inter', system-ui, -apple-system, sans-serif;
    --body: 'Source Serif 4', Georgia, serif;
    --radius: 14px;
    color-scheme: light;
}
@keyframes moTick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes moLive { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
@keyframes moNotif { from { opacity: 0; transform: translateY(-28px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes moFlip { from { opacity: 0; transform: translateY(-40%); } to { opacity: 1; transform: none; } }
@keyframes moHint { 0%, 100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(-6px); opacity: .5; } }
@keyframes moShimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* ---------- Dasar & huruf ---------- */
.t-mediaonline { font-family: var(--ui); color: var(--ink); background: var(--bg-2); }
.t-mediaonline .page { background: var(--bg); box-shadow: 0 0 0 1px var(--line), 0 0 50px rgba(15,17,21,.06); }
.t-mediaonline .names { font-family: var(--head); font-weight: 800; font-style: normal; color: var(--ink); letter-spacing: -.03em; line-height: 1.02; }
.t-mediaonline .names i { font-family: var(--head); font-style: normal; font-weight: 800; color: var(--red); font-size: 1em; }
.t-mediaonline .names--lg { font-size: clamp(2.5rem, 11vw, 3.4rem); }
.t-mediaonline .names--xl { font-size: clamp(2.8rem, 4.4vw, 4.2rem); }
.t-mediaonline .names--md { font-size: 1.45rem; letter-spacing: -.02em; }
.t-mediaonline .kicker { font: 700 .7rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.t-mediaonline .sec { padding: 2.6rem 1.25rem 2.8rem; text-align: left; }
.t-mediaonline .sec + .sec { border-top: 8px solid var(--bg-2); }
.t-mediaonline .sec__title { margin-bottom: 1.2rem; padding-top: .1rem; font: 800 clamp(1.45rem, 6.5vw, 1.8rem)/1.15 var(--head); letter-spacing: -.02em; color: var(--ink); text-align: left; }
.t-mediaonline .sec__title::before { content: attr(data-mo-cat); display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .55rem; padding: .28rem .55rem; border-radius: 6px; font: 700 .62rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; background: var(--red-soft); color: var(--red); }
.t-mediaonline .sec__title::before { display: table; }
.t-mediaonline .sec__title::after { display: none; }
.t-mediaonline .cover__date, .t-mediaonline .hero__date, .t-mediaonline .aside__date, .t-mediaonline .countdown__date { font: 500 .8rem/1.4 var(--ui); font-style: normal; letter-spacing: 0; text-transform: none; color: var(--muted); }
.t-mediaonline .lead-txt, .t-mediaonline .person__parents, .t-mediaonline .story, .t-mediaonline .lstory__text { font-family: var(--body); font-size: 1.04rem; line-height: 1.72; color: #2b2f37; text-align: left; }
.t-mediaonline .quote { position: relative; padding: .2rem 0 .2rem 1.1rem; border-left: 4px solid var(--red); font: italic 500 1.18rem/1.6 var(--body); color: var(--ink); text-align: left; }
.t-mediaonline .thanks { font: 800 1.9rem var(--head); letter-spacing: -.02em; color: var(--ink); }
.t-mediaonline .amp { font: 800 1.6rem var(--head); color: var(--red); }
.t-mediaonline .ornament { color: var(--red); }
.t-mediaonline .divider { background: var(--line-2); height: 1px; width: 100%; }

/* ---------- Tombol: gaya aplikasi ---------- */
.t-mediaonline .ibtn { border-radius: 10px; border: 1.5px solid var(--line-2); background: var(--card); color: var(--ink); font: 700 .82rem/1 var(--ui); letter-spacing: 0; text-transform: none; transition: background .2s, border-color .2s, transform .15s; }
.t-mediaonline .ibtn:hover { border-color: var(--ink); background: var(--card); color: var(--ink); }
.t-mediaonline .ibtn:active { transform: scale(.97); }
.t-mediaonline .ibtn--solid { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 10px 20px -10px rgba(225,29,46,.7); }
.t-mediaonline .ibtn--solid:hover { background: #c8131f; border-color: #c8131f; color: #fff; }

/* ==========================================================
   SAMPUL — layar kunci HP dengan notifikasi berita
   ========================================================== */
.t-mediaonline .cover, body.t-mediaonline .cover.has-photo {
    place-items: center; padding: 1rem; color: #fff; overflow-y: auto;
    background: linear-gradient(180deg, rgba(10,12,16,.35), rgba(10,12,16,.6)), var(--cover, var(--tp-hero, none)) center 30% / cover no-repeat, radial-gradient(120% 80% at 20% 10%, #3b4a7a, transparent 60%), radial-gradient(100% 70% at 90% 90%, #7a2440, transparent 60%), #10131b; }
.t-mediaonline .cover::before, .t-mediaonline .cover::after { display: none; }
.t-mediaonline .cover.is-open { transform: translateY(-100%); opacity: 1; transition: transform .8s cubic-bezier(.7,0,.25,1); }
.t-mediaonline .cover .tm-house, .t-mediaonline .cover .lx-tilt { display: none; }
.t-mediaonline .mo-lock { position: relative; z-index: 2; display: grid; justify-items: center; gap: .1rem; margin-bottom: 1.2rem; text-shadow: 0 2px 20px rgba(0,0,0,.35); }
.t-mediaonline .mo-lock__date { font: 600 .95rem var(--ui); opacity: .92; }
.t-mediaonline .mo-lock__time { font: 300 clamp(4.2rem, 22vw, 5.8rem)/1 var(--ui); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.t-mediaonline .cover__inner { position: relative; z-index: 2; width: min(380px, calc(100vw - 28px)); gap: .5rem; align-items: stretch; padding: .9rem 1rem 1rem; text-align: left;
    border-radius: 22px; background: rgba(250,250,252,.88); color: var(--ink); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: 0 20px 50px -18px rgba(0,0,0,.6); animation: moNotif .7s cubic-bezier(.2,.8,.2,1) .4s both; }
.t-mediaonline .mo-app { display: flex; align-items: center; gap: .5rem; font: 600 .74rem var(--ui); color: var(--muted); }
.t-mediaonline .mo-app__ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--red); color: #fff; font: 900 .7rem var(--head); }
.t-mediaonline .mo-app b { color: var(--ink); font-weight: 700; }
.t-mediaonline .mo-app span:last-child { margin-left: auto; }
.t-mediaonline .cover .kicker { color: var(--red); font-size: .66rem; }
.t-mediaonline .cover .names { font-size: clamp(1.55rem, 7.4vw, 2rem); line-height: 1.12; letter-spacing: -.02em; text-shadow: none; }
.t-mediaonline .cover .names i { font-size: 1em; }
.t-mediaonline .cover__date { color: var(--muted); }
.t-mediaonline .cover__to { margin: .2rem 0 .3rem; padding: .65rem .75rem; border-radius: 12px; background: rgba(15,17,21,.05); text-align: left; }
.t-mediaonline .cover__to small { color: var(--muted); font-size: .72rem; }
.t-mediaonline .cover__to strong { font: 800 1.12rem var(--head); letter-spacing: -.01em; color: var(--ink); }
.t-mediaonline .cover .ibtn { width: 100%; justify-content: center; padding-block: .95rem; }
.t-mediaonline .mo-swipe { position: relative; z-index: 2; margin-top: 1.1rem; display: grid; justify-items: center; gap: .45rem; font: 600 .74rem var(--ui); color: rgba(255,255,255,.85); }
.t-mediaonline .mo-swipe::after { content: ''; width: 120px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.85); }
.t-mediaonline .mo-swipe span { animation: moHint 2.2s ease-in-out infinite; }
@media (max-height: 700px) { .t-mediaonline .mo-lock { margin-bottom: .6rem; } .t-mediaonline .mo-lock__time { font-size: 3.4rem; } .t-mediaonline .mo-swipe { display: none; } .t-mediaonline .cover__to small:last-child { display: none; } }

/* ==========================================================
   HEADER PORTAL, PITA BREAKING NEWS & PROGRES BACA
   ========================================================== */
.t-mediaonline .mo-bar { position: fixed; z-index: 96; top: 0; left: 50%; width: min(520px, 100%); transform: translateX(-50%); height: 3px; background: transparent; pointer-events: none; }
.t-mediaonline .mo-bar span { display: block; height: 100%; width: 100%; background: var(--red); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
body.is-locked .mo-bar { opacity: 0; }
.t-mediaonline .mo-head { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .6rem; padding: .7rem 1.1rem; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.t-mediaonline .mo-logo { display: inline-flex; align-items: center; gap: .4rem; font: 900 1.12rem var(--head); letter-spacing: -.03em; color: var(--ink); }
.t-mediaonline .mo-logo i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--red); color: #fff; font: 900 .85rem var(--head); font-style: normal; }
.t-mediaonline .mo-logo em { font-style: normal; color: var(--red); }
.t-mediaonline .mo-live { margin-left: .2rem; display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .55rem; border-radius: 999px; background: var(--red); color: #fff; font: 800 .6rem var(--ui); letter-spacing: .08em; }
.t-mediaonline .mo-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: moLive 1.4s ease-in-out infinite; }
.t-mediaonline .mo-nav { display: flex; gap: 1rem; overflow-x: auto; scrollbar-width: none; padding: .55rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--bg); font: 600 .78rem var(--ui); white-space: nowrap; }
.t-mediaonline .mo-nav::-webkit-scrollbar { display: none; }
.t-mediaonline .mo-nav a { color: var(--muted); text-decoration: none; padding-bottom: .2rem; border-bottom: 2px solid transparent; }
.t-mediaonline .mo-nav a:first-child { color: var(--ink); border-bottom-color: var(--red); }
.t-mediaonline .mo-ticker { display: flex; align-items: stretch; overflow: hidden; background: var(--ink); color: #fff; font: 600 .78rem/1 var(--ui); }
.t-mediaonline .mo-ticker b { flex: none; display: flex; align-items: center; padding: .6rem .7rem; background: var(--red); font-weight: 900; letter-spacing: .06em; font-size: .66rem; text-transform: uppercase; }
.t-mediaonline .mo-ticker__track { display: flex; flex: none; gap: 2.4rem; padding: .6rem 1.2rem; white-space: nowrap; animation: moTick 24s linear infinite; }
.t-mediaonline .mo-ticker__track span::before { content: '●'; margin-right: .6rem; color: var(--red); font-size: .55rem; vertical-align: middle; }

/* ==========================================================
   PEMBUKA — halaman artikel utama
   ========================================================== */
.t-mediaonline .hero, body.t-mediaonline .hero.has-photo { min-height: 0; display: block; padding: 0; background: var(--bg); color: var(--ink); text-align: left; }
.t-mediaonline .aside, body.t-mediaonline .aside.has-photo { background: var(--bg-2); color: var(--ink); text-align: left; }
.t-mediaonline .cover *:not(.mo-lock):not(.mo-lock *), .t-mediaonline .hero *, .t-mediaonline .aside * { text-shadow: none !important; }
.t-mediaonline .hero .tm-house, .t-mediaonline .aside .tm-house, .t-mediaonline .hero .lx-tilt, .t-mediaonline .aside .lx-tilt, .t-mediaonline .hero .tm-frame { display: none; }
.t-mediaonline .hero__inner, .t-mediaonline .aside__inner { display: grid; gap: .7rem; padding: 1.3rem 1.25rem 1.6rem; text-align: left; justify-items: stretch; }
.t-mediaonline .hero .names, .t-mediaonline .aside .names { color: var(--ink); text-shadow: none; }
.t-mediaonline .hero .kicker, .t-mediaonline .aside .kicker { text-shadow: none; display: inline-flex; width: max-content; padding: .32rem .55rem; border-radius: 6px; background: var(--red); color: #fff; font-size: .62rem; }
.t-mediaonline .hero__date, .t-mediaonline .aside__date { text-shadow: none; }
.t-mediaonline .mo-byline { display: flex; align-items: center; gap: .6rem; padding: .7rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font: 500 .78rem var(--ui); color: var(--muted); }
.t-mediaonline .mo-byline__av { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; font: 800 .8rem var(--head); }
.t-mediaonline .mo-byline strong { display: block; color: var(--ink); font-weight: 700; }
.t-mediaonline .mo-share { margin-left: auto; display: flex; gap: .35rem; }
.t-mediaonline .mo-share button { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); cursor: pointer; }
.t-mediaonline .mo-share button:hover { border-color: var(--ink); }
.t-mediaonline .mo-share svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.t-mediaonline .mo-figure { margin: .2rem -1.25rem 0; }
.t-mediaonline .mo-figure__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-2); }
.t-mediaonline .mo-figure__img::before { content: ''; position: absolute; inset: 0; background: var(--cover, var(--tp-hero, none)) center 28% / cover no-repeat; transform: scale(1.06); transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
body.t-mediaonline:not(.is-locked) .mo-figure__img::before { transform: none; }
.t-mediaonline .mo-figure figcaption { padding: .45rem 1.25rem 0; font: 400 .74rem/1.4 var(--ui); color: var(--soft); }
.t-mediaonline .mo-lead { font: 400 1.08rem/1.7 var(--body); color: #2b2f37; }
.t-mediaonline .mo-lead::first-line { font-weight: 600; }
.t-mediaonline .hero__scroll { display: none; }
.t-mediaonline .hero__cd { justify-items: start; }
.t-mediaonline .hero .countdown b { color: #fff; }
.t-mediaonline .hero .ibtn:not(.ibtn--solid) { color: var(--ink); border-color: var(--line-2); }
body.t-mediaonline:not(.is-locked) .hero .names { animation: moFlip .7s cubic-bezier(.2,.8,.2,1) .25s both; }
/* Desktop: panel kiri tampil seperti halaman depan portal */
@media (min-width: 960px) {
    .t-mediaonline .aside { display: grid; place-items: center; position: sticky; top: 0; height: 100vh; padding: 2.5rem; background: var(--bg-2); }
    .t-mediaonline .aside__inner { max-width: 560px; padding: 1.6rem; border-radius: 18px; background: var(--card); box-shadow: 0 30px 60px -40px rgba(15,17,21,.35); }
    .t-mediaonline .aside .mo-figure { margin: 0; border-radius: 12px; overflow: hidden; }
    .t-mediaonline .aside .mo-figure figcaption { padding-inline: 0; }
    .t-mediaonline .mo-bar { left: auto; right: 0; width: 480px; transform: none; }
}

/* ==========================================================
   ISI — kartu berita
   ========================================================== */
.t-mediaonline .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.t-mediaonline .reveal.is-visible { opacity: 1; transform: none; }
.t-mediaonline .sec--tint, .t-mediaonline .sec--countdown { background: var(--bg); }
.t-mediaonline .sec--quote { padding-top: 2rem; }
.t-mediaonline .sec--quote .ornament, .t-mediaonline .sec--quote .tm-divider { display: none; }

/* Mempelai: kartu profil */
.t-mediaonline .couple { gap: 1rem; }
.t-mediaonline .couple--framed { display: grid; grid-template-columns: 1fr; }
.t-mediaonline .person { display: grid; gap: .35rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); text-align: left; }
.t-mediaonline .couple--framed .person { grid-template-columns: 92px 1fr; align-items: center; column-gap: .9rem; }
.t-mediaonline .couple--framed .person .pframe { grid-row: span 3; margin: 0; width: 92px; }
.t-mediaonline .pframe::before, .t-mediaonline .pframe::after { display: none; }
.t-mediaonline .pframe__arch { border-radius: 12px; aspect-ratio: 1; box-shadow: none; background: var(--bg-2); }
.t-mediaonline .pframe__init { font: 800 2.2rem var(--head); color: var(--ink); }
.t-mediaonline .person .names--md { margin: 0; }
.t-mediaonline .person__parents { font: 400 .86rem/1.45 var(--ui); color: var(--muted); margin: 0; }
.t-mediaonline .person__soc { justify-content: flex-start; }
.t-mediaonline .person__soc .psoc { width: 30px; height: 30px; background: var(--bg-2); color: var(--ink); }
.t-mediaonline .couple .amp { text-align: center; margin: -.4rem 0; }

/* Hitung mundur dengan label LIVE */
.t-mediaonline .sec--countdown .sec__title::before { background: var(--red); color: #fff; }
.t-mediaonline .countdown { justify-content: flex-start; gap: .5rem; }
.t-mediaonline .countdown div { min-width: 0; flex: 1; max-width: 84px; padding: .7rem .3rem .6rem; border-radius: 12px; background: var(--ink); color: #fff; border: 0; box-shadow: none; }
.t-mediaonline .countdown b { display: block; overflow: hidden; font: 800 1.9rem/1 var(--head); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.t-mediaonline .countdown b.mo-tick { animation: moFlip .45s cubic-bezier(.2,.8,.2,1); }
.t-mediaonline .countdown small { color: rgba(255,255,255,.65); font: 600 .6rem var(--ui); letter-spacing: .06em; text-transform: uppercase; }
.t-mediaonline .countdown__date { margin-bottom: 1rem; }

/* Info acara */
.t-mediaonline .events { gap: .9rem; }
.t-mediaonline .event { padding: 1.1rem 1.1rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); text-align: left; box-shadow: none; }
.t-mediaonline .event::before { display: none; }
.t-mediaonline .event h3 { font: 800 1.3rem var(--head); letter-spacing: -.02em; color: var(--ink); }
.t-mediaonline .event__date, .t-mediaonline .event__time, .t-mediaonline .event__place, .t-mediaonline .event__addr { display: flex; gap: .5rem; align-items: baseline; margin: .25rem 0; font: 500 .9rem/1.45 var(--ui); color: var(--ink); }
.t-mediaonline .event__addr { color: var(--muted); font-weight: 400; }
.t-mediaonline .event__date::before { content: '📅'; } .t-mediaonline .event__time::before { content: '🕘'; } .t-mediaonline .event__place::before { content: '📍'; }
.t-mediaonline .event__date::before, .t-mediaonline .event__time::before, .t-mediaonline .event__place::before { font-size: .85rem; filter: grayscale(1); opacity: .75; }
.t-mediaonline .event__addr { padding-left: 1.45rem; }
.t-mediaonline .event .divider { display: none; }
.t-mediaonline .event__btns { justify-content: flex-start; margin-top: .8rem; }
.t-mediaonline .sec--tint .event p, .t-mediaonline .sec--tint .event small, .t-mediaonline .sec--tint .event span { color: inherit; }
.t-mediaonline .event__map { border-radius: 12px; }

/* Kronologi bergaya live update */
.t-mediaonline .lstory { padding-left: 0; }
.t-mediaonline .lstory::before { left: 7px; background: var(--line-2); width: 2px; }
.t-mediaonline .lstory__item { padding-left: 1.7rem; }
.t-mediaonline .lstory__dot { left: 1px; width: 14px; height: 14px; background: var(--card); border: 3px solid var(--red); box-shadow: none; }
.t-mediaonline .lstory__card { border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); box-shadow: none; text-align: left; }
.t-mediaonline .lstory__img { border-radius: 10px; aspect-ratio: 16 / 10; object-fit: cover; }
.t-mediaonline .lstory__date { display: inline-block; padding: .25rem .5rem; border-radius: 6px; background: var(--bg-2); font: 700 .68rem var(--ui); letter-spacing: .02em; color: var(--red); }
.t-mediaonline .lstory__title, .t-mediaonline .tale__title { font: 800 1.15rem/1.25 var(--head); letter-spacing: -.01em; color: var(--ink); font-style: normal; }

/* Galeri */
.t-mediaonline .gallery { gap: .4rem; }
.t-mediaonline .gallery__item { border-radius: 10px; }
.t-mediaonline .gallery--grid .gallery__item:first-child { grid-column: span 2; aspect-ratio: 16 / 10; }
.t-mediaonline .gslider__slide, .t-mediaonline .gslider__slide img { border-radius: 12px; }
.t-mediaonline .gslider__count { background: rgba(15,17,21,.75); color: #fff; font: 700 .72rem var(--ui); border-radius: 999px; }
.t-mediaonline .gslider__dots button.is-active { background: var(--red); }
.t-mediaonline .gslider__nav { background: rgba(255,255,255,.95); color: var(--ink); }
.t-mediaonline .gslider__hint { text-align: left; font-size: .76rem; color: var(--soft); }
.t-mediaonline .gvideo { border-radius: 12px; }

/* Hadiah */
.t-mediaonline .gifts { gap: .8rem; }
.t-mediaonline .gift, .t-mediaonline .qr-card { border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); box-shadow: none; }

/* RSVP + ucapan sebagai kolom komentar */
.t-mediaonline .rsvp { padding: 1.1rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-2); box-shadow: none; text-align: left; }
.t-mediaonline .ifld > span { font: 700 .74rem var(--ui); color: var(--ink); letter-spacing: 0; text-transform: none; }
.t-mediaonline .ifld input, .t-mediaonline .ifld textarea, .t-mediaonline .ifld select { border-radius: 10px; border: 1.5px solid var(--line-2); background: #fff; font-family: var(--ui); color: var(--ink); }
.t-mediaonline .ifld input:focus, .t-mediaonline .ifld textarea:focus, .t-mediaonline .ifld select:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(15,17,21,.08); outline: none; }
.t-mediaonline .wishes__title { display: flex; align-items: center; gap: .45rem; font: 800 1.15rem var(--head); color: var(--ink); text-align: left; }
.t-mediaonline .wishes__title::before { content: ''; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E") center / contain no-repeat; }
.t-mediaonline .wish { position: relative; padding: .85rem 0 .85rem 3rem; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; text-align: left; }
.t-mediaonline .wish::before { content: attr(data-mo-init); position: absolute; left: 0; top: .9rem; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: hsl(var(--mo-h, 350) 70% 92%); color: hsl(var(--mo-h, 350) 55% 35%); font: 800 .9rem var(--head); }
.t-mediaonline .wish__head strong { font: 700 .9rem var(--ui); color: var(--ink); }
.t-mediaonline .wish p { font: 400 .95rem/1.55 var(--body); color: #2b2f37; }
.t-mediaonline .wish small { color: var(--soft); }
.t-mediaonline .mo-react { display: inline-flex; gap: 1rem; margin-top: .4rem; font: 600 .72rem var(--ui); color: var(--soft); }
.t-mediaonline .mo-react button { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.t-mediaonline .mo-react button.is-on { color: var(--red); }
.t-mediaonline .tag { border-radius: 6px; font: 700 .58rem var(--ui); letter-spacing: .04em; text-transform: uppercase; }

/* Penutup */
.t-mediaonline .sec--closing { padding: 2.6rem 1.25rem 3rem; background: var(--ink); color: #fff; text-align: left; }
.t-mediaonline .sec--closing .tm-house, .t-mediaonline .sec--closing .lx-tilt { display: none; }
.t-mediaonline .sec--closing .names, .t-mediaonline .sec--closing .thanks { color: #fff; }
.t-mediaonline .sec--closing .names i { color: var(--red); }
.t-mediaonline .sec--closing .lead-txt { color: rgba(255,255,255,.75); }
.t-mediaonline .sec--closing .names--md { font-size: clamp(1.8rem, 8vw, 2.3rem); }
.t-mediaonline .mo-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.2rem; }
.t-mediaonline .mo-tags span { padding: .35rem .6rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); font: 600 .72rem var(--ui); color: rgba(255,255,255,.85); }
.t-mediaonline .ifoot { border-top: 0; background: var(--bg-2); }
.t-mediaonline .inav { border-top: 1px solid var(--line); }

@media (min-width: 960px) { .t-mediaonline .sec { padding-inline: 1.8rem; } }

@media (prefers-reduced-motion: reduce) {
    .t-mediaonline .mo-ticker__track { animation: none; }
    .t-mediaonline .mo-live::before, .t-mediaonline .mo-swipe span, .t-mediaonline .cover__inner, body.t-mediaonline .hero *, .t-mediaonline .countdown b.mo-tick { animation: none !important; }
    .t-mediaonline .reveal { opacity: 1; transform: none; transition: none; }
    .t-mediaonline .mo-figure__img::before { transform: none; transition: none; }
    .t-mediaonline .cover.is-open { transition-duration: .01s; }
}
/* Header & pita selalu selebar kolom (bagian pembuka bawaan memakai grid berpusat) */
body.t-mediaonline .hero { display: block !important; }
.t-mediaonline .mo-head, .t-mediaonline .mo-nav, .t-mediaonline .mo-ticker { width: 100%; min-width: 0; max-width: 100%; }

.t-mediaonline .mo-ticker b { position: relative; z-index: 1; box-shadow: 8px 0 10px -4px var(--ink); }
.t-mediaonline .mo-head { padding-right: 110px; }
/* Tombol salin di kartu ATM tetap kontras di atas warna bank */
.t-mediaonline .gift-atm__copy { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.55); color: #fff; box-shadow: none; }
.t-mediaonline .gift-atm__copy:hover { background: #fff; border-color: #fff; color: var(--ink); }
.t-mediaonline .countdown div { display: grid; justify-items: center; text-align: center; }