/* ============================================
   1. MATERIAL 3 TOKENS & THEME
============================================ */
:root {
    /* Primary Brand */
    --md-sys-color-primary: #AD0000;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #FFDAD6;
    --md-sys-color-on-primary-container: #410002;

    /* Surfaces */
    --md-sys-color-surface: #FFFFFF;
    --md-sys-color-surface-variant: #F4F5F7;
    --md-sys-color-surface-container-low: #FFFFFF;

    /* Outlines */
    --md-sys-color-outline-variant: #E0E0E0;

    /* Text */
    --md-sys-color-on-surface: #1A1A1A;
    --md-sys-color-on-surface-variant: #525252;

    /* Shapes */
    --md-sys-shape-corner-extra-large: 28px;
    --md-sys-shape-corner-large: 16px;
    --md-sys-shape-corner-full: 9999px;

    /* Fonts */
    --font-sans: 'DM Sans', sans-serif;
    --font-heading: 'Poppins', sans-serif;

    --plyr-color-main: var(--lumi-primary); /* Menggunakan variabel merah yang sudah ada */
    --plyr-video-control-color-hover: #ffffff;
    --plyr-control-icon-size: 18px;
}

/* ============================================
   2. BASE & RESET
============================================ */
body {
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font-family: var(--font-sans);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--md-sys-color-on-surface);
    margin-bottom: 1rem;
}

.cursor-pointer { cursor: pointer; }


/* ============================================
   3. SHARED COMPONENTS
============================================ */

/* Navbar */
.navbar-lumi {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 1rem 0;
}

/* Buttons */
.btn-seva {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border-radius: var(--md-sys-shape-corner-full);
    padding: 0 28px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    border: none;
    transition: all 0.2s cubic-bezier(0.2, 0.0, 0, 1.0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-seva:hover {
    background-color: #8F0000;
    box-shadow: 0 6px 12px rgba(173, 0, 0, 0.2);
    transform: translateY(-2px);
    color: white;
}

.btn-seva:disabled,
.btn-seva.disabled {
    background-color: #C97070;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
    opacity: 0.85;
}

.btn-seva--full {
    width: 100%;
    height: 52px;
    gap: 0.5rem;
}

.btn-seva-tonal {
    background-color: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface);
    border-radius: var(--md-sys-shape-corner-full);
    padding: 0 28px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    border: none;
    transition: all 0.2s;
}

.btn-seva-tonal:hover { background-color: #E0E0E0; }

/* M3 Card */
.card-m3 {
    background-color: #FFFFFF;
    border-radius: var(--md-sys-shape-corner-large);
    border: 1px solid var(--md-sys-color-outline-variant);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.2, 0.0, 0, 1.0);
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.card-m3:hover {
    border-color: var(--md-sys-color-primary-container);
    transform: translateY(-4px);
    box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.12);
}

.card-m3__body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 1.5rem;
}

.card-m3__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
    margin-bottom: 0;
}

.card-m3__footer {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-m3__arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--md-sys-color-primary-container);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--md-sys-color-primary);
    transition: background-color 0.2s, transform 0.2s;
}

.card-m3:hover .card-m3__arrow {
    background-color: var(--md-sys-color-primary);
    color: #FFFFFF;
    transform: translate(2px, -2px);
}

/* Section Spacing */
.section-padding { padding: 6rem 0; }

.section-cta {
    padding: 5rem 0 6rem;
    background-color: #FFFFFF;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

/* Hero Browser Mock */
.browser-window {
    background: white;
    border-radius: 16px;
    box-shadow: 0 30px 60px -15px rgba(0,0,0,0.1);
    border: 1px solid var(--md-sys-color-outline-variant);
    overflow: hidden;
}

.webinar-grid {
    background: #111;
    padding: 4px;
    aspect-ratio: 16/10;
}

.text-gradient {
    background: linear-gradient(135deg, var(--md-sys-color-primary) 0%, #FF4D4D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* ============================================
   4. DETAIL EVENT PAGE
============================================ */

.detail-page {
    padding-top: 6rem;
    padding-bottom: 5rem;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Breadcrumb */
.breadcrumb-m3 { margin-bottom: 1.5rem; }

.breadcrumb-m3 .breadcrumb-item a {
    color: var(--md-sys-color-on-surface-variant);
    text-decoration: none;
    transition: color 0.15s;
}

.breadcrumb-m3 .breadcrumb-item a:hover { color: var(--md-sys-color-primary); }
.breadcrumb-m3 .breadcrumb-item.active  { color: var(--md-sys-color-on-surface); font-weight: 600; }
.breadcrumb-m3 .breadcrumb-item + .breadcrumb-item::before { color: var(--md-sys-color-outline-variant); }

/* Banner */
.detail-banner {
    border-radius: var(--md-sys-shape-corner-extra-large);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    margin-bottom: 2.5rem;
}

.detail-banner img,
.detail-banner .detail-banner__placeholder {
    display: block;
    width: 100%;
    object-fit: cover;
    aspect-ratio: 21 / 9;
}

.detail-banner__placeholder {
    background-color: var(--md-sys-color-surface-variant);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.9rem;
}

/* Meta */
.detail-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

.detail-meta__badge {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border-radius: var(--md-sys-shape-corner-full);
    padding: 0.35rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.detail-meta__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    color: var(--md-sys-color-on-surface-variant);
}

.detail-meta__chip i         { color: var(--md-sys-color-on-surface-variant); flex-shrink: 0; }
.detail-meta__chip .fw-medium { color: var(--md-sys-color-on-surface); }

/* Description */
.detail-description {
    color: var(--md-sys-color-on-surface-variant);
    line-height: 1.8;
    font-size: 1rem;
    margin-bottom: 0;
}

.detail-description p            { margin-bottom: 1rem; }
.detail-description p:last-child  { margin-bottom: 0; }

.detail-description h3, .detail-description h4 {
    color: var(--md-sys-color-on-surface);
    margin-top: 1.5rem;
    margin-bottom: 0.6rem;
}

.detail-description ul, .detail-description ol { padding-left: 1.4rem; margin-bottom: 1rem; }
.detail-description li { margin-bottom: 0.3rem; }

/* Speaker */
.speaker-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background-color: var(--md-sys-color-surface-variant);
    border-radius: var(--md-sys-shape-corner-large);
    padding: 1.25rem 1.5rem;
    margin-top: 2rem;
}

.speaker-card__avatar {
    width: 64px; height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.speaker-card__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--md-sys-color-primary);
    margin-bottom: 0.2rem;
}

.speaker-card__name { font-size: 1rem; font-weight: 700; color: var(--md-sys-color-on-surface); margin-bottom: 0.15rem; }
.speaker-card__bio  { font-size: 0.85rem; color: var(--md-sys-color-on-surface-variant); margin-bottom: 0; line-height: 1.4; }

/* Booking Card (detail sidebar) */
.booking-card {
    background-color: #FFFFFF;
    border-radius: var(--md-sys-shape-corner-large);
    border: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    padding: 1.75rem;
}

.booking-card__title        { font-size: 1.05rem; font-weight: 700; color: var(--md-sys-color-on-surface); margin-bottom: 1.25rem; }
.booking-card__divider      { border: none; border-top: 1px dashed var(--md-sys-color-outline-variant); margin: 1.25rem 0; }
.booking-card__total-label  { font-size: 0.8rem; color: var(--md-sys-color-on-surface-variant); margin-bottom: 0.2rem; }
.booking-card__total-value  { font-size: 1.6rem; font-weight: 700; color: var(--md-sys-color-on-surface); line-height: 1.1; margin-bottom: 1.25rem; }

/* Ticket option */
.ticket-option {
    position: relative;
    border: 2px solid var(--md-sys-color-outline-variant);
    border-radius: 12px;
    background-color: var(--md-sys-color-surface-variant);
    padding: 1rem 1.125rem;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.ticket-option:hover                { border-color: #C8C8C8; }
.ticket-option.is-selected          { border-color: var(--md-sys-color-primary); background-color: #FFF5F5; box-shadow: 0 0 0 3px var(--md-sys-color-primary-container); }

.ticket-option__header              { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem; }
.ticket-option__name                { font-weight: 700; font-size: 0.9rem; color: var(--md-sys-color-on-surface); }
.ticket-option__quota               { font-size: 0.75rem; color: var(--md-sys-color-on-surface-variant); background: #FFF; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-full); padding: 0.15rem 0.6rem; }
.ticket-option__price               { font-size: 1.15rem; font-weight: 700; color: var(--md-sys-color-primary); }
.ticket-option__price--free         { color: #2E7D32; }

/* Mobile Sticky Bar (shared: detail + checkout) */
.mobile-sticky-bar {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1080;
    background: #FFFFFF;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.07);
    padding: 0.875rem 1rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.mobile-sticky-bar__price-label { font-size: 0.75rem; color: var(--md-sys-color-on-surface-variant); margin-bottom: 0.1rem; }
.mobile-sticky-bar__price-value { font-size: 1.25rem; font-weight: 700; color: var(--md-sys-color-on-surface); line-height: 1.2; }

.mobile-sticky-bar .btn-seva {
    flex-shrink: 0;
    width: auto;
    height: 44px;
    padding: 0 24px;
    font-size: 0.9rem;
}


/* ============================================
   5. CHECKOUT PAGE
============================================ */

/* Page wrapper */
.checkout-page {
    padding-top: 6rem;
    padding-bottom: 5rem;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Mobile event thumb (visible < lg) */
.checkout-thumb {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #FFFFFF;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-large);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    padding: 0.85rem;
    margin-bottom: 1.5rem;
}

.checkout-thumb__img {
    width: 76px;
    height: 76px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.checkout-thumb__title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
    line-height: 1.35;
    /* 2 line clamp */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.25rem;
}

.checkout-thumb__date {
    font-size: 0.8rem;
    color: var(--md-sys-color-on-surface-variant);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Form card */
.checkout-form-card {
    background: #FFFFFF;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-large);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    padding: 1.75rem;
    margin-bottom: 1rem;
}

/* Security badge row */
.checkout-security {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.75rem;
}

.checkout-security__icon {
    width: 34px; height: 34px;
    border-radius: 50%;
    background-color: #E8F5E9;
    color: #2E7D32;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.checkout-security__text {
    font-size: 0.82rem;
    color: var(--md-sys-color-on-surface-variant);
}

/* --- M3 Input Group (icon prefix + text field) --- */
.checkout-input-group {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-large); /* 16px all around */
    background: #FFFFFF;
    overflow: hidden;
    transition: border-color 0.2s;
}

.checkout-input-group:focus-within {
    border-color: var(--md-sys-color-primary);
}

/* Icon prefix */
.checkout-input-group__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.85rem;
    background: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface-variant);
    border-right: 1px solid var(--md-sys-color-outline-variant);
    flex-shrink: 0;
}

/* The actual <input> */
.checkout-input-group__field {
    flex: 1;
    border: none;
    outline: none;
    padding: 0.75rem 0.85rem;
    font-size: 0.95rem;
    font-family: var(--font-sans);
    color: var(--md-sys-color-on-surface);
    background: transparent;
}

.checkout-input-group__field::placeholder {
    color: #A0A0A0;
}

/* Error state — applied to the wrapper */
.checkout-input-group.is-invalid {
    border-color: #D32F2F;
    background: #FFFAFA; /* very slight red tint */
}

.checkout-input-group.is-invalid .checkout-input-group__icon {
    background: #FFF0F0;
    color: #D32F2F;
}

/* Error message below input */
.checkout-input-error {
    display: none;
    font-size: 0.78rem;
    color: #D32F2F;
    margin-top: 0.35rem;
    padding-left: 0.15rem;
}

.checkout-input-error.visible { display: block; }

/* Helper text (e.g. "Tiket akan dikirim ke sini") */
.checkout-input-help {
    font-size: 0.78rem;
    color: var(--md-sys-color-on-surface-variant);
    margin-top: 0.35rem;
    padding-left: 0.15rem;
}

/* Field label */
.checkout-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 0.45rem;
}

/* Field group spacing */
.checkout-field { margin-bottom: 1.25rem; }
.checkout-field:last-of-type { margin-bottom: 0; }

/* Warning alert */
.checkout-alert {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    background: #FFFBEB;
    border: 1px solid #F5DEB3;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-top: 1.5rem;
}

.checkout-alert__icon {
    color: #B45309;
    flex-shrink: 0;
    margin-top: 1px;
}

.checkout-alert__text {
    font-size: 0.82rem;
    color: #92400E;
    line-height: 1.45;
}

.checkout-alert__text strong { color: #78350F; }

/* --- Order Summary Card (3-zone) --- */
.summary-card {
    background: #FFFFFF;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-large);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    overflow: hidden;
}

/* Zone 1: coloured header */
.summary-card__header {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.summary-card__header h5 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0;
    color: inherit;
}

/* Zone 2: white body */
.summary-card__body {
    padding: 1.25rem;
}

.summary-card__event-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
    line-height: 1.35;
    margin-bottom: 0.3rem;
}

.summary-card__event-date {
    font-size: 0.8rem;
    color: var(--md-sys-color-on-surface-variant);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 1.1rem;
}

/* Line items */
.summary-card__line {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    padding: 0.35rem 0;
}

.summary-card__line span:first-child { color: var(--md-sys-color-on-surface-variant); }
.summary-card__line span:last-child  { font-weight: 600; color: var(--md-sys-color-on-surface); }

.summary-card__lines {
    border-top: 1px dashed var(--md-sys-color-outline-variant);
    padding-top: 0.75rem;
    margin-top: 0.25rem;
}

/* Zone 3: grey footer with total */
.summary-card__footer {
    background: var(--md-sys-color-surface-variant);
    border-top: 1px solid var(--md-sys-color-outline-variant);
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.summary-card__footer-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--md-sys-color-on-surface-variant);
}

.summary-card__footer-value {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
    line-height: 1;
}

/* --- Success Screen --- */
.success-card {
    background: #FFFFFF;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-extra-large);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    padding: 2.5rem 2rem;
    max-width: 480px;
    width: 100%;
    text-align: center;
}

.success-card__icon-wrap {
    width: 96px; height: 96px;
    border-radius: 50%;
    background: #E8F5E9;
    color: #2E7D32;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.success-card__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
    margin-bottom: 0.75rem;
}

.success-card__body {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.92rem;
    line-height: 1.7;
    margin-bottom: 1.75rem;
}

.success-card__email-badge {
    display: inline-block;
    background: var(--md-sys-color-surface-variant);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-full);
    padding: 0.35rem 0.9rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    margin-top: 0.5rem;
}


/* ============================================
   6. RESPONSIVE
============================================ */

/* Tablet & below */
@media (max-width: 991px) {
    .section-padding  { padding: 4rem 0; }
    .section-cta      { padding: 3.5rem 0 4rem; }
    .btn-seva, .btn-seva-tonal { width: 100%; justify-content: center; }
    .display-4        { font-size: 2.5rem; }

    /* Detail */
    .detail-page        { padding-top: 5.5rem; padding-bottom: 7rem; }
    .detail-banner img,
    .detail-banner .detail-banner__placeholder { aspect-ratio: 16 / 9; }
    .booking-card-wrapper { display: none; }
    .mobile-sticky-bar    { display: flex; }
    .speaker-card         { flex-direction: column; text-align: center; padding: 1.25rem; }

    /* Checkout */
    .checkout-page      { padding-top: 5.5rem; padding-bottom: 7rem; }
    .checkout-thumb     { display: flex; } /* always visible on mobile */
    .summary-card-wrapper { display: none; } /* hide desktop summary, sticky bar takes over */
}

/* Phone */
@media (max-width: 575px) {
    .detail-page        { padding-top: 5rem; }
    .detail-banner      { border-radius: var(--md-sys-shape-corner-large); }
    .detail-banner img,
    .detail-banner .detail-banner__placeholder { aspect-ratio: 4 / 3; }
    .detail-title       { font-size: 1.6rem; }
    .detail-meta        { gap: 0.5rem; }

    .checkout-page      { padding-top: 5rem; }
    .checkout-form-card { padding: 1.25rem; }
    .success-card       { padding: 2rem 1.25rem; }
}

/* ===========================================
   VIDEO PLAYER STYLES (PLYR OVERRIDES)
   =========================================== */

   /* 2. Styling Container Plyr di dalam Card */
.card-lumi .plyr {
    border-radius: 0; /* Karena card-lumi sudah punya radius, plyr ngikut aja */
    font-family: var(--font-sans);
}

/* 3. Big Play Button (Tombol Play Tengah) */
.plyr__control--overlaid {
    background: rgba(173, 0, 0, 0.8) !important; /* Merah Transparan */
}
.plyr__control--overlaid:hover {
    background: var(--lumi-primary) !important; /* Merah Solid saat hover */
    transform: scale(1.1);
}

/* 4. Control Bar adjustments */
.plyr__controls {
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.7)) !important;
    padding-bottom: 20px !important;
}

/* 5. Range/Slider Thumb (Bulatan di progress bar) */
.plyr__control input[type='range']::-webkit-slider-thumb {
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* 6. Prose adjustment for descriptions */
.prose-lumi {
    color: var(--lumi-neutral-500);
}
.prose-lumi p {
    margin-bottom: 1rem;
}
.prose-lumi ul {
    margin-bottom: 1rem;
    padding-left: 1.25rem;
}
.prose-lumi h1, .prose-lumi h2, .prose-lumi h3 {
    color: var(--lumi-neutral-900);
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

/* ===========================================
   PLYR & VIDEO DETAIL FIXES
   =========================================== */

/* 1. Fix Layout Player di Mobile agar tidak tenggelam/kepotong */
.plyr__video-embed {
    position: relative;
    width: 100%;
    /* Fallback ratio agar solid di semua browser */
    height: 0;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    overflow: hidden;
    border-radius: var(--md-sys-shape-corner-large, 12px); /* Ikuti radius tema */
}

.plyr__video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* 2. Styling Plyr Controls Warna Merah Brand */
.plyr--video .plyr__control.plyr__tab-focus,
.plyr--video .plyr__control:hover,
.plyr--video .plyr__control[aria-expanded=true] {
    background: var(--lumi-primary) !important;
}
.plyr__control--overlaid {
    background: rgba(173, 0, 0, 0.9) !important;
}
.plyr__control--overlaid:hover {
    background: var(--lumi-primary) !important;
    transform: scale(1.1);
}
.plyr--full-ui input[type=range] {
    color: var(--lumi-primary) !important;
}

/* 3. Responsive Margin Fix (Meniru detail_event) */
@media (max-width: 768px) {
    /* Pastikan container punya breathing room */
    .detail-page .container {
        padding-left: 1.25rem; /* 20px */
        padding-right: 1.25rem;
    }
    
    /* Player mentok kiri kanan biar immersive, tapi rounded */
    .card-video-wrapper {
        margin-left: -1rem;
        margin-right: -1rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    
    /* Kembalikan radius jika user ingin tampilan boxy, 
       hapus blok .card-video-wrapper di atas jika ingin tetap ada margin */
}