/* Logo halaman login / register (Filament simple header) */

.fi-simple-header-logo-ctn {
    display: inline-flex;
    cursor: pointer;
    text-decoration: none;
    border-radius: 0.375rem;
    transition: opacity 150ms ease;
}

.fi-simple-header-logo-ctn:hover {
    opacity: 0.85;
}

.fi-simple-header-logo-ctn:focus-visible {
    outline: 2px solid rgb(245 158 11);
    outline-offset: 2px;
}

/* Running text pengumuman MARKOM */

/* Banner pengumuman & limit — di bawah topbar, jangan tutupi logo */

.markom-top-banners {
    display: block;
    position: sticky;
    top: 4rem;
    z-index: 20;
    width: 100%;
    pointer-events: none;
}

.markom-top-banners > * {
    pointer-events: auto;
}

/* Topbar & logo selalu di atas banner (klik logo tidak tertutup) */

.fi-topbar-ctn {
    z-index: 40 !important;
}

.fi-topbar-start,
.fi-sidebar-header-logo-ctn {
    position: relative;
    z-index: 41;
}

.fi-sidebar.fi-main-sidebar {
    z-index: 35 !important;
}

html.markom-has-top-banners {
    scroll-padding-top: var(--markom-sticky-offset, 9rem);
}

body.markom-has-top-banners .fi-main {
    scroll-margin-top: var(--markom-sticky-offset, 9rem);
}

@media (min-width: 1024px) {
    body.markom-has-top-banners .fi-sidebar.fi-main-sidebar {
        top: var(--markom-sticky-offset, 4rem) !important;
        height: calc(100dvh - var(--markom-sticky-offset, 4rem)) !important;
    }
}

.markom-announcement {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    border-bottom: 1px solid rgb(251 191 36 / 0.45);
    background: linear-gradient(90deg, rgb(255 251 235) 0%, rgb(254 243 199) 50%, rgb(255 251 235) 100%);
    padding: 0.85rem 0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgb(120 53 15 / 0.08);
}

.dark .markom-announcement {
    border-bottom-color: rgb(180 83 9 / 0.55);
    background: linear-gradient(90deg, rgb(69 26 3) 0%, rgb(120 53 15) 50%, rgb(69 26 3) 100%);
}

.markom-announcement-marquee {
    display: block;
    width: 100%;
    margin: 0;
    color: rgb(120 53 15);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
}

.dark .markom-announcement-marquee {
    color: rgb(254 243 199);
}

/* Peringatan slot data baru penuh (marketing) */

@keyframes markom-limit-blink {
    0%,
    100% {
        opacity: 1;
        background-color: rgb(254 226 226);
        border-bottom-color: rgb(239 68 68 / 0.7);
    }

    50% {
        opacity: 0.88;
        background-color: rgb(252 165 165);
        border-bottom-color: rgb(220 38 38 / 0.9);
    }
}

.markom-marketing-limit {
    display: block;
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid rgb(239 68 68 / 0.7);
    background: rgb(254 226 226);
    animation: markom-limit-blink 1.1s ease-in-out infinite;
    box-shadow: 0 2px 10px rgb(185 28 28 / 0.15);
}

.dark .markom-marketing-limit {
    animation-name: markom-limit-blink-dark;
    border-bottom-width: 3px;
}

@keyframes markom-limit-blink-dark {
    0%,
    100% {
        background-color: rgb(69 10 10);
        border-bottom-color: rgb(252 165 165);
        box-shadow:
            0 0 18px rgb(248 113 113 / 0.45),
            inset 0 0 0 1px rgb(254 202 202 / 0.25);
    }

    50% {
        background-color: rgb(220 38 38);
        border-bottom-color: rgb(254 240 138);
        box-shadow:
            0 0 28px 6px rgb(251 113 133 / 0.85),
            inset 0 0 0 1px rgb(255 255 255 / 0.2);
    }
}

.markom-marketing-limit-title {
    margin: 0;
    color: rgb(127 29 29);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
}

.markom-marketing-limit-text {
    margin: 0.35rem 0 0;
    color: rgb(153 27 27);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.45;
}

.dark .markom-marketing-limit-title {
    color: rgb(255 255 255);
    text-shadow: 0 1px 3px rgb(0 0 0 / 0.55);
}

.dark .markom-marketing-limit-text {
    color: rgb(255 241 242);
    text-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
}

/* Filament kadang pakai class dark di html */
html.dark .markom-marketing-limit {
    animation-name: markom-limit-blink-dark;
    border-bottom-width: 3px;
}

html.dark .markom-marketing-limit-title {
    color: rgb(255 255 255);
    text-shadow: 0 1px 3px rgb(0 0 0 / 0.55);
}

html.dark .markom-marketing-limit-text {
    color: rgb(255 241 242);
    text-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
}

@media (min-width: 768px) {
    .markom-marketing-limit-title {
        font-size: 1.1rem;
    }

    .markom-marketing-limit-text {
        font-size: 1rem;
    }
}

@media (min-width: 768px) {
    .markom-announcement-marquee {
        font-size: 1.75rem;
    }
}

/* Sinyal klik iklan lagi (marketing) */

@keyframes markom-ad-click-pulse {
    0%,
    100% {
        background-color: rgb(219 234 254);
        border-bottom-color: rgb(59 130 246 / 0.65);
    }

    50% {
        background-color: rgb(191 219 254);
        border-bottom-color: rgb(37 99 235 / 0.85);
    }
}

.markom-ad-click-alert {
    display: block;
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid rgb(59 130 246 / 0.65);
    background: rgb(219 234 254);
    animation: markom-ad-click-pulse 1.4s ease-in-out infinite;
    box-shadow: 0 2px 10px rgb(37 99 235 / 0.12);
}

.dark .markom-ad-click-alert,
html.dark .markom-ad-click-alert {
    animation-name: markom-ad-click-pulse-dark;
    border-bottom-color: rgb(147 197 253 / 0.75);
    background: rgb(30 58 138);
}

@keyframes markom-ad-click-pulse-dark {
    0%,
    100% {
        background-color: rgb(30 58 138);
        border-bottom-color: rgb(147 197 253 / 0.75);
    }

    50% {
        background-color: rgb(37 99 235);
        border-bottom-color: rgb(191 219 254);
    }
}

.markom-ad-click-alert-title {
    margin: 0;
    color: rgb(30 64 175);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
}

.markom-ad-click-alert-text {
    margin: 0.35rem 0 0;
    color: rgb(29 78 216);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.45;
}

.markom-ad-click-alert-link {
    display: inline-block;
    margin-top: 0.45rem;
    color: rgb(30 64 175);
    font-size: 0.95rem;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.markom-ad-click-alert-link:hover {
    color: rgb(29 78 216);
}

.dark .markom-ad-click-alert-title,
html.dark .markom-ad-click-alert-title {
    color: rgb(239 246 255);
}

.dark .markom-ad-click-alert-text,
html.dark .markom-ad-click-alert-text {
    color: rgb(219 234 254);
}

.dark .markom-ad-click-alert-link,
html.dark .markom-ad-click-alert-link {
    color: rgb(191 219 254);
}

@media (min-width: 768px) {
    .markom-ad-click-alert-title {
        font-size: 1.1rem;
    }

    .markom-ad-click-alert-text {
        font-size: 1rem;
    }
}

.markom-deal-closing-alert {
    display: block;
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid rgb(34 197 94 / 0.65);
    background: rgb(220 252 231);
    animation: markom-deal-closing-pulse 1.4s ease-in-out infinite;
    box-shadow: 0 2px 10px rgb(22 163 74 / 0.12);
}

.dark .markom-deal-closing-alert,
html.dark .markom-deal-closing-alert {
    animation-name: markom-deal-closing-pulse-dark;
    border-bottom-color: rgb(74 222 128 / 0.75);
    background: rgb(20 83 45);
}

@keyframes markom-deal-closing-pulse {
    0%,
    100% {
        background-color: rgb(220 252 231);
        border-bottom-color: rgb(34 197 94 / 0.65);
    }

    50% {
        background-color: rgb(187 247 208);
        border-bottom-color: rgb(22 163 74 / 0.85);
    }
}

@keyframes markom-deal-closing-pulse-dark {
    0%,
    100% {
        background-color: rgb(20 83 45);
        border-bottom-color: rgb(74 222 128 / 0.75);
    }

    50% {
        background-color: rgb(22 101 52);
        border-bottom-color: rgb(134 239 172);
    }
}

.markom-deal-closing-alert-title {
    margin: 0;
    color: rgb(20 83 45);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
}

.markom-deal-closing-alert-text {
    margin: 0.35rem 0 0;
    color: rgb(21 128 61);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.45;
}

.markom-deal-closing-alert-link {
    display: inline-block;
    margin-top: 0.45rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgb(20 83 45);
    font-size: 0.95rem;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.markom-deal-closing-alert-link:hover {
    color: rgb(21 128 61);
}

.dark .markom-deal-closing-alert-title,
html.dark .markom-deal-closing-alert-title {
    color: rgb(240 253 244);
}

.dark .markom-deal-closing-alert-text,
html.dark .markom-deal-closing-alert-text {
    color: rgb(220 252 231);
}

.dark .markom-deal-closing-alert-link,
html.dark .markom-deal-closing-alert-link {
    color: rgb(187 247 208);
}

@media (min-width: 768px) {
    .markom-deal-closing-alert-title {
        font-size: 1.1rem;
    }

    .markom-deal-closing-alert-text {
        font-size: 1rem;
    }
}

.markom-cancel-closing-alert {
    display: block;
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid rgb(100 116 139 / 0.65);
    background: rgb(241 245 249);
    animation: markom-cancel-closing-pulse 1.4s ease-in-out infinite;
    box-shadow: 0 2px 10px rgb(71 85 105 / 0.12);
}

.dark .markom-cancel-closing-alert,
html.dark .markom-cancel-closing-alert {
    animation-name: markom-cancel-closing-pulse-dark;
    border-bottom-color: rgb(148 163 184 / 0.75);
    background: rgb(30 41 59);
}

@keyframes markom-cancel-closing-pulse {
    0%,
    100% {
        background-color: rgb(241 245 249);
        border-bottom-color: rgb(100 116 139 / 0.65);
    }

    50% {
        background-color: rgb(226 232 240);
        border-bottom-color: rgb(71 85 105 / 0.85);
    }
}

@keyframes markom-cancel-closing-pulse-dark {
    0%,
    100% {
        background-color: rgb(30 41 59);
        border-bottom-color: rgb(148 163 184 / 0.75);
    }

    50% {
        background-color: rgb(51 65 85);
        border-bottom-color: rgb(203 213 225);
    }
}

.markom-cancel-closing-alert-title {
    margin: 0;
    color: rgb(30 41 59);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
}

.markom-cancel-closing-alert-text {
    margin: 0.35rem 0 0;
    color: rgb(51 65 85);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.45;
}

.markom-cancel-closing-alert-link {
    display: inline-block;
    margin-top: 0.45rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgb(30 41 59);
    font-size: 0.95rem;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.markom-cancel-closing-alert-link:hover {
    color: rgb(51 65 85);
}

.dark .markom-cancel-closing-alert-title,
html.dark .markom-cancel-closing-alert-title {
    color: rgb(248 250 252);
}

.dark .markom-cancel-closing-alert-text,
html.dark .markom-cancel-closing-alert-text {
    color: rgb(226 232 240);
}

.dark .markom-cancel-closing-alert-link,
html.dark .markom-cancel-closing-alert-link {
    color: rgb(203 213 225);
}

.markom-marketing-inbox-alert {
    display: block;
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid rgb(59 130 246 / 0.65);
    background: rgb(219 234 254);
    animation: markom-marketing-inbox-pulse 1.4s ease-in-out infinite;
    box-shadow: 0 2px 10px rgb(37 99 235 / 0.12);
}

.dark .markom-marketing-inbox-alert,
html.dark .markom-marketing-inbox-alert {
    animation-name: markom-marketing-inbox-pulse-dark;
    border-bottom-color: rgb(147 197 253 / 0.75);
    background: rgb(30 58 138);
}

@keyframes markom-marketing-inbox-pulse {
    0%,
    100% {
        background-color: rgb(219 234 254);
        border-bottom-color: rgb(59 130 246 / 0.65);
    }

    50% {
        background-color: rgb(191 219 254);
        border-bottom-color: rgb(37 99 235 / 0.85);
    }
}

@keyframes markom-marketing-inbox-pulse-dark {
    0%,
    100% {
        background-color: rgb(30 58 138);
        border-bottom-color: rgb(147 197 253 / 0.75);
    }

    50% {
        background-color: rgb(37 99 235);
        border-bottom-color: rgb(191 219 254);
    }
}

.markom-marketing-inbox-alert-title {
    margin: 0;
    color: rgb(30 64 175);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
}

.markom-marketing-inbox-alert-text {
    margin: 0.35rem 0 0;
    color: rgb(29 78 216);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.45;
}

.markom-marketing-inbox-alert-link {
    display: inline-block;
    margin-top: 0.45rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgb(30 64 175);
    font-size: 0.95rem;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.markom-marketing-inbox-alert-link:hover {
    color: rgb(29 78 216);
}

.dark .markom-marketing-inbox-alert-title,
html.dark .markom-marketing-inbox-alert-title {
    color: rgb(239 246 255);
}

.dark .markom-marketing-inbox-alert-text,
html.dark .markom-marketing-inbox-alert-text {
    color: rgb(219 234 254);
}

.dark .markom-marketing-inbox-alert-link,
html.dark .markom-marketing-inbox-alert-link {
    color: rgb(191 219 254);
}

@media (min-width: 768px) {
    .markom-cancel-closing-alert-title,
    .markom-marketing-inbox-alert-title {
        font-size: 1.1rem;
    }

    .markom-cancel-closing-alert-text,
    .markom-marketing-inbox-alert-text {
        font-size: 1rem;
    }
}