/*
Theme Name: KuliPress Pro Optimized
Description: Theme super cepat dengan pendekatan Hybrid Tailwind (Static CSS + Critical Inline).
Version: 3.0.0
Author: Kuli Digital
Text Domain: kulipress
*/

/* ==========================================================================
   1. CRITICAL CSS / FALLBACK (Skeleton)
   Styles ini mencegah Layout Shift (CLS) saat instant loading.
   ========================================================================== */

/* Reset Dasar */
*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; font-family: var(--font-body, system-ui, sans-serif); }
body { margin: 0; line-height: inherit; background-color: #F8FAFC; color: #1E293B; }

/* Variabel Warna (Default Fallback) */
:root { --primary: #2563EB; --header-bg: #ffffff; }

/* Container & Layout */
.container-width { width: 100%; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 768px) { .container-width { max-width: 1024px; padding: 0 1.5rem; } }
@media (min-width: 1280px) { .container-width { max-width: 1200px; } }

/* Header Skeleton (Mencegah header "gepeng" saat load) */
header { height: 80px; position: sticky; top: 0; z-index: 50; background-color: var(--header-bg); box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
header .flex { display: flex; justify-content: space-between; align-items: center; height: 100%; }

/* Grid System Fallback */
.grid { display: grid; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .lg\:col-span-8 { grid-column: span 8; }
    .lg\:col-span-4 { grid-column: span 4; }
}

/* Card Style Fallback */
article.bg-white { background: #fff; border: 1px solid #f3f4f6; border-radius: 1rem; overflow: hidden; display: flex; flex-direction: column; }
.post-thumbnail-wrap { background: #e5e7eb; position: relative; width: 100%; aspect-ratio: 16/9; }

/* Typography Fallback */
h1 { font-size: 2.25rem; font-weight: 800; margin-bottom: 1rem; line-height: 1.2; }
h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.75rem; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* Utilities */
.hidden { display: none; }
.text-primary { color: var(--primary); }
@media (min-width: 768px) { .md\:hidden { display: none; } .md\:flex { display: flex; } }