@php
    $categoryTextClass = match ($post['category_color'] ?? 'brand-blue') {
        'brand-cyan' => 'text-brand-cyan',
        'brand-purple' => 'text-brand-purple',
        default => 'text-brand-blue dark:text-brand-cyan',
    };

    $coverGradientClass = match ($post['category_color'] ?? 'brand-blue') {
        'brand-cyan' => 'from-brand-cyan/30 via-brand-blue/20 to-transparent',
        'brand-purple' => 'from-brand-purple/30 via-brand-cyan/20 to-transparent',
        default => 'from-brand-blue/30 via-brand-purple/20 to-transparent',
    };
@endphp
<article class="group bg-slate-50 dark:bg-dark-surface border border-slate-100 dark:border-slate-800 rounded-3xl overflow-hidden hover:-translate-y-1.5 transition-transform duration-300">
    <div class="aspect-[16/10] bg-slate-200 dark:bg-slate-800 overflow-hidden relative">
        <div class="absolute inset-0 bg-gradient-to-tr {{ $coverGradientClass }} flex items-center justify-center font-display font-extrabold text-sm text-white tracking-wider text-center px-4">
            {{ $post['cover_label'] }}
        </div>
    </div>
    <div class="p-6">
        <div class="flex items-center justify-between gap-3 mb-2">
            <span class="text-[11px] font-bold {{ $categoryTextClass }} uppercase tracking-widest">{{ $post['category'] }}</span>
            <span class="text-[11px] text-slate-400">{{ $post['read_time'] }} dk</span>
        </div>
        <time class="text-[11px] text-slate-400 block mb-2" datetime="{{ $post['published_at'] }}">{{ \App\Support\TurkishDate::formatLong($post['published_at']) }}</time>
        <h3 class="font-display font-bold text-lg text-slate-900 dark:text-white mb-3 group-hover:text-brand-blue dark:group-hover:text-brand-cyan transition-colors">
            {{ $post['title'] }}
        </h3>
        <p class="text-slate-500 dark:text-slate-400 text-xs leading-relaxed mb-6">
            {{ $post['excerpt'] }}
        </p>
        <a href="{{ route('blog.show', $post['slug']) }}" class="text-xs font-bold text-slate-800 dark:text-slate-300 hover:text-brand-blue dark:hover:text-brand-cyan transition-colors">Yazıyı Oku &rarr;</a>
    </div>
</article>