@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

@theme {
    --color-primary: #0056b3;
    --color-primary-dark: #004494;
    --color-background-light: #f9fafb;
    --color-background-dark: #111827;
    --color-surface-light: #ffffff;
    --color-surface-dark: #1f2937;
    --color-secondary: #007bff;

    --font-sans: "Roboto", "ui-sans-serif", "system-ui", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    --shadow-soft: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
    --shadow-card: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
}

@layer utilities {
    .hero-overlay {
        background: linear-gradient(180deg,
                rgba(0, 0, 0, 0.6) 0%,
                rgba(0, 0, 0, 0.4) 100%);
    }

    .bg-pattern {
        background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 0);
        background-size: 24px 24px;
    }

    .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }
}

@layer base {
    /* Base Editor & Prose Typography Reset Fix */
    /* Menimpa Tailwind v4 Preflight agar Heading dan format rich text bekerja */

    .prose h1,
    .ck-content h1 {
        font-size: 2.25rem !important;
        /* text-4xl */
        font-weight: 800 !important;
        /* font-extrabold */
        line-height: 1.2 !important;
        margin-top: 2rem !important;
        margin-bottom: 1rem !important;
        color: inherit;
    }

    .prose h2,
    .ck-content h2 {
        font-size: 1.875rem !important;
        /* text-3xl */
        font-weight: 700 !important;
        /* font-bold */
        line-height: 1.25 !important;
        margin-top: 1.75rem !important;
        margin-bottom: 0.875rem !important;
        color: inherit;
    }

    .prose h3,
    .ck-content h3 {
        font-size: 1.5rem !important;
        /* text-2xl */
        font-weight: 700 !important;
        line-height: 1.3 !important;
        margin-top: 1.5rem !important;
        margin-bottom: 0.75rem !important;
        color: inherit;
    }

    .prose h4,
    .ck-content h4 {
        font-size: 1.25rem !important;
        /* text-xl */
        font-weight: 600 !important;
        line-height: 1.4 !important;
        margin-top: 1.25rem !important;
        margin-bottom: 0.5rem !important;
        color: inherit;
    }

    .prose p,
    .ck-content p {
        margin-top: 0.75rem !important;
        margin-bottom: 0.75rem !important;
        line-height: 1.75 !important;
    }

    .prose strong,
    .prose b,
    .ck-content strong,
    .ck-content b {
        font-weight: 700 !important;
        color: inherit;
    }

    .prose em,
    .prose i,
    .ck-content em,
    .ck-content i {
        font-style: italic !important;
    }

    .prose ul,
    .ck-content ul {
        list-style-type: disc !important;
        margin-top: 0.75rem !important;
        margin-bottom: 0.75rem !important;
        padding-left: 1.5rem !important;
    }

    .prose ol,
    .ck-content ol {
        list-style-type: decimal !important;
        margin-top: 0.75rem !important;
        margin-bottom: 0.75rem !important;
        padding-left: 1.5rem !important;
    }

    .prose li,
    .ck-content li {
        margin-top: 0.375rem !important;
        margin-bottom: 0.375rem !important;
        display: list-item !important;
    }

    .prose blockquote,
    .ck-content blockquote {
        border-left: 4px solid var(--color-primary) !important;
        background-color: rgba(0, 86, 179, 0.05) !important;
        padding: 1rem 1.5rem !important;
        margin: 1.5rem 0 !important;
        border-radius: 0 0.5rem 0.5rem 0 !important;
        font-style: italic !important;
        font-weight: 500 !important;
    }

    .prose a,
    .ck-content a {
        color: var(--color-primary) !important;
        text-decoration: underline !important;
        font-weight: 500 !important;
    }

    .prose a:hover,
    .ck-content a:hover {
        color: var(--color-primary-dark) !important;
    }
}


#flymotion-drm-fab {
    bottom: 30px !important;
    right: 36px !important;
    z-index: 99999 !important;
    background: #007bff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    border-radius: 50% !important;
}

#flymotion-drm-fab::before,
#flymotion-drm-fab::after {
    display: none !important;
}

#fm-help-desk {
    bottom: 40px !important;
    z-index: 999999 !important;
}

/* Telegram Button Styles */
#fm-help-desk a[href*="t.me"],
#fm-help-desk a[href*="telegram"],
#fm-help-desk .fa-telegram,
#fm-help-desk .fa-telegram-plane {
    color: #229ED9 !important;
    transition: color 0.3s ease-in-out !important;
}

#fm-help-desk a[href*="t.me"]:hover,
#fm-help-desk a[href*="telegram"]:hover,
#fm-help-desk .fa-telegram:hover,
#fm-help-desk .fa-telegram-plane:hover {
    color: #1c88ba !important;
}

#fm-help-desk a[href*="t.me"] svg,
#fm-help-desk a[href*="telegram"] svg {
    fill: currentColor !important;
}