@import "tailwindcss";

@source "../js";
@source "../views";

@layer utilities {
    .hide-scrollbar::-webkit-scrollbar {
        display: none;
    }
    .hide-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

/* Scope halaman jurnal agar tidak konflik dengan layout/global */
.page-journal a {
    text-decoration: inherit;
}
.page-journal .page-journal-header,
.page-journal .page-journal-content {
    max-width: none;
}
.page-journal input,
.page-journal select,
.page-journal button {
    font-family: inherit;
}

@layer components {
    /* Tipografi terstruktur untuk konten berita agar rapi tanpa plugin typography */
    .article-content {
        @apply text-slate-700 leading-7;
    }
    .article-content h1 {
        @apply text-3xl font-bold text-slate-900 mt-6 mb-4;
    }
    .article-content h2 {
        @apply text-2xl font-semibold text-slate-900 mt-8 mb-3;
    }
    .article-content h3 {
        @apply text-xl font-semibold text-slate-900 mt-6 mb-2;
    }
    .article-content h4 {
        @apply text-lg font-semibold text-slate-900 mt-5 mb-2;
    }
    .article-content p {
        @apply my-4;
    }
    .article-content ul {
        @apply my-4 list-disc pl-6;
    }
    .article-content ol {
        @apply my-4 list-decimal pl-6;
    }
    .article-content li {
        @apply my-1;
    }
    .article-content blockquote {
        @apply my-6 border-l-4 border-slate-300 pl-4 italic text-slate-600 bg-slate-50/60 rounded-r;
    }
    .article-content a {
        color: var(--color-secondary, #2563eb);
        @apply underline;
    }
    .article-content a:hover {
        color: var(--color-secondary-hover, #1d4ed8);
        text-decoration-line: none;
    }
    .article-content img {
        max-width: 100%;
        height: auto;
        @apply rounded-xl my-6 shadow-sm;
    }
    .article-content figure {
        @apply my-6;
    }
    .article-content figcaption {
        @apply text-sm text-slate-500 mt-2 text-center;
    }
    .article-content hr {
        @apply my-10 border-slate-200;
    }
    .article-content pre {
        @apply bg-slate-900 text-slate-100 p-4 rounded-lg overflow-x-auto my-6 text-sm;
    }
    .article-content code {
        @apply bg-slate-100 px-1.5 py-0.5 rounded text-[0.9em];
    }
    .article-content table {
        @apply w-full my-6 text-sm border border-slate-200 rounded-lg overflow-hidden;
    }
    .article-content th {
        @apply bg-slate-50 font-semibold border border-slate-200 px-3 py-2 text-left;
    }
    .article-content td {
        @apply border border-slate-200 px-3 py-2 align-top;
    }
    .article-content iframe {
        width: 100%;
        aspect-ratio: 16 / 9;
        @apply rounded-xl my-6 border-0;
    }
}

@layer components {
    /* Pastikan iframe juga rapi pada halaman yang memakai kelas prose */
    .prose iframe {
        width: 100%;
        aspect-ratio: 16 / 9;
        @apply rounded-xl my-6 border-0;
    }

    .editor-prose iframe {
        width: 100%;
        aspect-ratio: 16 / 9;
        @apply rounded-lg border-0;
    }
    .yt-embed {
        width: 100%;
        @apply my-4;
    }
    .yt-size-sm .yt-embed { max-width: 420px; margin-left: auto; margin-right: auto; }
    .yt-size-md .yt-embed { max-width: 640px; margin-left: auto; margin-right: auto; }
    .yt-size-lg .yt-embed { max-width: 840px; margin-left: auto; margin-right: auto; }
    .yt-size-full .yt-embed { max-width: none; }
}

@layer components {
    .yt-card {
        @apply my-4;
    }
    .yt-card-link {
        position: relative;
        display: block;
        border-radius: 0.75rem;
        overflow: hidden;
        background-color: rgb(241 245 249);
    }
    .yt-card-thumb {
        width: 100%;
        display: block;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }
    .yt-card-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: flex-end;
        background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));
        padding: 0.75rem 0.9rem;
        gap: 0.5rem;
        color: white;
    }
    .yt-card-badge {
        background: #ff0000;
        color: white;
        font-weight: 600;
        font-size: 0.75rem;
        padding: 0.15rem 0.5rem;
        border-radius: 0.375rem;
    }
    .yt-card-title {
        font-size: 0.9rem;
        opacity: 0.95;
    }
}