<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', AleshaSetting::get('site_name', config('app.name')))</title>
    <meta name="description" content="@yield('description', AleshaSetting::get('meta_description', ''))">
    @php $favicon = AleshaSetting::get('site_favicon'); @endphp
    @if($favicon)
    <link rel="icon" href="{{ $favicon }}" type="{{ str_ends_with($favicon, '.ico') ? 'image/x-icon' : 'image/png' }}">
    <link rel="shortcut icon" href="{{ $favicon }}">
    @endif
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Playfair+Display:wght@700;800;900&display=swap" rel="stylesheet">
    @vite(['resources/css/theme.css'])
    @php
        $_nc = AleshaSetting::get('theme_colors.News', []);
    @endphp
    <style>
        :root {
            --news-red: {{ $_nc['primary'] ?? '#c41e1e' }};
            --news-red-dark: {{ $_nc['primary_dark'] ?? '#a31818' }};
            --news-red-light: color-mix(in srgb, var(--news-red) 35%, #fff);
            --news-red-muted: color-mix(in srgb, var(--news-red) 20%, #fff);
            --news-red-bg: color-mix(in srgb, var(--news-red) 8%, #fff);
            --news-dark: #111111;
            --news-gray: #374151;
        }
        .news-headline { font-family: 'Playfair Display', Georgia, serif; }
        .ticker-wrap { overflow: hidden; white-space: nowrap; }
        .ticker-inner { display: inline-block; animation: ticker 30s linear infinite; }
        .ticker-inner:hover { animation-play-state: paused; }
        @keyframes ticker { 0% { transform: translateX(100vw); } 100% { transform: translateX(-100%); } }
        .category-badge {
            display: inline-flex; align-items: center;
            padding: 3px 10px; border-radius: 5px;
            font-size: 11px; font-weight: 700;
            letter-spacing: 0.05em; text-transform: uppercase;
            background: var(--news-red); color: #fff;
        }
        .category-badge.outline {
            background: transparent; color: var(--news-red);
            border: 1px solid var(--news-red);
        }
        .divider-red { border-top: 3px solid var(--news-red); }
        .section-title {
            font-size: 1rem; font-weight: 800;
            text-transform: uppercase; letter-spacing: 0.05em;
            color: var(--news-dark);
            border-bottom: 3px solid var(--news-red);
            padding-bottom: 8px; margin-bottom: 16px;
            display: flex; align-items: center; gap: 8px;
        }
        .section-title::before {
            content: ''; display: block;
            width: 4px; height: 18px;
            background: var(--news-red); border-radius: 2px;
        }
        .news-card-title {
            font-family: 'Playfair Display', Georgia, serif;
            line-height: 1.3; color: var(--news-dark);
        }
        .news-card-title:hover { color: var(--news-red); }
        .article-meta { font-size: 12px; color: #6b7280; }
        @media (max-width: 768px) {
            [id^="slider_"] { height: 260px !important; }
            [id^="slider_"] h2 { font-size: 1.4rem !important; }
            [id^="slider_"] p { font-size: 0.9rem !important; margin-bottom: 1rem !important; }
        }
        @media (max-width: 480px) {
            [id^="slider_"] { height: 200px !important; }
        }
    </style>
    @yield('head')
</head>
<body style="background:#f5f5f5; color: #111; font-family: Inter, sans-serif;">
    @include('theme-News::partials.header')
    <main>
        @yield('content')
    </main>
    @include('theme-News::partials.footer')
    @yield('scripts')
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
</body>
</html>
