{% extends 'frontend/base.html.twig' %}

{% block title %}Ana Sayfa | Haber{% endblock %}
{% block meta_description %}Son dakika haberleri, guncel gelismeler ve onemli haberler. Turkiye ve dunya gundemini yakindan takip edin.{% endblock %}

{% block body %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">

    {# ===== AD: En Üst Banner ===== #}
    {{ render_ad('en_ust', true) }}
    {{ render_widget_zone('home-banner-top') }}

    {# ===== BREAKING NEWS BAR ===== #}
    {% if breakingNews|length > 0 %}
        <section class="mb-8">
            <div class="flex items-center gap-3 mb-5">
                <span class="bg-red-600 text-white text-xs font-bold uppercase tracking-wider px-3 py-1.5 rounded animate-pulse">
                    <i class="fas fa-bolt mr-1"></i> Son Dakika
                </span>
                <div class="flex-1 h-px bg-gray-200 dark:bg-gray-700"></div>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
                {% for news in breakingNews %}
                    <a href="{{ path('frontend_news_detail', {slug: news.slug}) }}"
                       class="group block bg-white dark:bg-gray-900 rounded-xl border border-red-200 dark:border-red-900/50 overflow-hidden hover:shadow-lg hover:border-red-400 transition-all">
                        {% if news.featuredImage %}
                            <div class="relative w-full aspect-video overflow-hidden">
                                <img src="{{ news.featuredImage|media_url }}" alt="{{ news.title }}"
                                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
                                <span class="absolute top-2 left-2 w-7 h-7 flex items-center justify-center rounded-full bg-red-600 text-white text-xs font-bold shadow">
                                    {{ loop.index }}
                                </span>
                            </div>
                        {% endif %}
                        <div class="p-3">
                            {% if not news.featuredImage %}
                                <div class="flex items-start gap-3">
                                    <span class="flex-shrink-0 w-8 h-8 flex items-center justify-center rounded-full bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 text-sm font-bold">
                                        {{ loop.index }}
                                    </span>
                                    <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100 group-hover:text-red-600 dark:group-hover:text-red-400 transition-colors line-clamp-3 leading-snug">
                                        {{ news.title }}
                                    </h3>
                                </div>
                            {% else %}
                                <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100 group-hover:text-red-600 dark:group-hover:text-red-400 transition-colors line-clamp-2 leading-snug">
                                    {{ news.title }}
                                </h3>
                            {% endif %}
                            {% if news.publishedAt %}
                                <p class="text-xs text-gray-500 dark:text-gray-500 mt-1.5 {{ not news.featuredImage ? 'ml-11' : '' }}">
                                    {{ news.publishedAt|date("H:i") }}
                                </p>
                            {% endif %}
                        </div>
                    </a>
                {% endfor %}
            </div>
        </section>
    {% endif %}

    {# ===== HEADLINE SLIDER SECTION (with ad slides after 3rd and 6th) ===== #}
    {% if headlineNews|length > 0 %}
        {# Build slide list: news slides + ad slides inserted after position 3 and 6 #}
        {% set adSlidePositions = [3, 6] %}
        {% set slideItems = [] %}
        {% set newsIndex = 0 %}
        {% for news in headlineNews %}
            {% set newsIndex = loop.index %}
            {% set slideItems = slideItems|merge([{ type: 'news', news: news }]) %}
            {% if newsIndex in adSlidePositions %}
                {% set slideItems = slideItems|merge([{ type: 'ad', position: newsIndex }]) %}
            {% endif %}
        {% endfor %}

        <section class="mb-10" x-data="{ activeSlide: 0, totalSlides: {{ slideItems|length }} }"
                 x-init="setInterval(() => { activeSlide = (activeSlide + 1) % totalSlides }, 6000)">
            <div class="relative rounded-2xl overflow-hidden bg-gray-900 shadow-2xl" style="min-height: 480px;">
                {% for slide in slideItems %}
                    {% if slide.type == 'news' %}
                        {# --- News Slide --- #}
                        <div x-show="activeSlide === {{ loop.index0 }}"
                             x-transition:enter="transition ease-out duration-500"
                             x-transition:enter-start="opacity-0 transform scale-105"
                             x-transition:enter-end="opacity-100 transform scale-100"
                             x-transition:leave="transition ease-in duration-300"
                             x-transition:leave-start="opacity-100"
                             x-transition:leave-end="opacity-0"
                             class="absolute inset-0">
                            {% if slide.news.featuredImage %}
                                <img src="{{ slide.news.featuredImage|media_url }}" alt="{{ slide.news.title }}"
                                     class="w-full h-full object-cover">
                            {% endif %}
                            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent"></div>
                            <div class="absolute bottom-0 left-0 right-0 p-6 md:p-10">
                                {% if slide.news.category %}
                                    <a href="{{ path('frontend_category', {slug: slide.news.category.slug}) }}"
                                       class="inline-block px-3 py-1 text-xs font-bold uppercase tracking-wider rounded-full mb-3 text-white"
                                       style="background-color: {{ slide.news.category.color|default('#dc2626') }}">
                                        {{ slide.news.category.title }}
                                    </a>
                                {% endif %}
                                <h2 class="text-2xl md:text-4xl font-bold text-white leading-tight mb-3">
                                    <a href="{{ path('frontend_news_detail', {slug: slide.news.slug}) }}"
                                       class="hover:text-red-400 transition-colors">
                                        {{ slide.news.title }}
                                    </a>
                                </h2>
                                {% if slide.news.spot %}
                                    <p class="text-gray-300 text-sm md:text-base max-w-2xl line-clamp-2 mb-4">
                                        {{ slide.news.spot|striptags|slice(0, 180) }}
                                    </p>
                                {% endif %}
                                <div class="flex items-center gap-4 text-sm text-gray-400">
                                    {% if slide.news.author %}
                                        <span><i class="far fa-user mr-1"></i> {{ slide.news.author.name }}</span>
                                    {% endif %}
                                    {% if slide.news.publishedAt %}
                                        <span><i class="far fa-clock mr-1"></i> {{ slide.news.publishedAt|date("d.m.Y H:i") }}</span>
                                    {% endif %}
                                    <span><i class="far fa-eye mr-1"></i> {{ slide.news.viewCount }}</span>
                                </div>
                            </div>
                        </div>
                    {% else %}
                        {# --- Ad Slide (full-size) --- #}
                        <div x-show="activeSlide === {{ loop.index0 }}"
                             x-transition:enter="transition ease-out duration-500"
                             x-transition:enter-start="opacity-0 transform scale-105"
                             x-transition:enter-end="opacity-100 transform scale-100"
                             x-transition:leave="transition ease-in duration-300"
                             x-transition:leave-start="opacity-100"
                             x-transition:leave-end="opacity-0"
                             class="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-gray-800 via-gray-900 to-gray-950">
                            {{ render_ad_slider('slayt_arasi', true) }}
                        </div>
                    {% endif %}
                {% endfor %}

                {# Slider controls #}
                {% if slideItems|length > 1 %}
                    <div class="absolute bottom-4 right-6 md:right-10 flex items-center gap-2 z-10">
                        {% for slide in slideItems %}
                            <button @click="activeSlide = {{ loop.index0 }}"
                                    :class="activeSlide === {{ loop.index0 }} ? '{{ slide.type == 'ad' ? 'bg-yellow-500' : 'bg-red-600' }} w-8' : 'bg-white/50 w-3 hover:bg-white/80'"
                                    class="h-3 rounded-full transition-all duration-300"
                                    aria-label="Slayt {{ loop.index }}">
                            </button>
                        {% endfor %}
                    </div>
                    <button @click="activeSlide = (activeSlide - 1 + totalSlides) % totalSlides"
                            class="absolute left-3 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/40 hover:bg-black/60 text-white transition-colors z-10">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <button @click="activeSlide = (activeSlide + 1) % totalSlides"
                            class="absolute right-3 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/40 hover:bg-black/60 text-white transition-colors z-10">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                {% endif %}
            </div>
        </section>
    {% endif %}

    {# ===== FEATURED NEWS GRID (2x4) ===== #}
    {% if featuredNews|length > 0 %}
        <section class="mb-10">
            <div class="flex items-center gap-3 mb-5">
                <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 whitespace-nowrap">
                    <i class="fas fa-star mr-2 text-yellow-500"></i>One Cikan Haberler
                </h2>
                <div class="flex-1 h-px bg-gray-200 dark:bg-gray-700"></div>
            </div>
            <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
                {% for news in featuredNews %}
                    <article class="group bg-white dark:bg-gray-900 rounded-lg overflow-hidden shadow-sm hover:shadow-lg border border-gray-100 dark:border-gray-800 transition-all duration-300">
                        <a href="{{ path('frontend_news_detail', {slug: news.slug}) }}" class="block relative overflow-hidden aspect-[4/3]">
                            {% if news.featuredImage %}
                                <img src="{{ news.featuredImage|media_url }}" alt="{{ news.title }}"
                                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                                     loading="lazy">
                            {% else %}
                                <div class="w-full h-full bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 flex items-center justify-center">
                                    <i class="far fa-image text-2xl text-gray-400 dark:text-gray-600"></i>
                                </div>
                            {% endif %}
                            {% if news.category %}
                                <span class="absolute top-2 left-2 px-1.5 py-0.5 text-[10px] font-semibold rounded text-white"
                                      style="background-color: {{ news.category.color|default('#dc2626') }}">
                                    {{ news.category.title }}
                                </span>
                            {% endif %}
                        </a>
                        <div class="p-3">
                            <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100 leading-snug mb-1.5 line-clamp-2 group-hover:text-red-600 dark:group-hover:text-red-400 transition-colors">
                                <a href="{{ path('frontend_news_detail', {slug: news.slug}) }}">
                                    {{ news.title }}
                                </a>
                            </h3>
                            <div class="flex items-center gap-2 text-[11px] text-gray-500">
                                {% if news.publishedAt %}
                                    <span><i class="far fa-clock mr-0.5"></i>{{ news.publishedAt|date("d.m.Y") }}</span>
                                {% endif %}
                                <span><i class="far fa-eye mr-0.5"></i>{{ news.viewCount }}</span>
                            </div>
                        </div>
                    </article>
                {% endfor %}
            </div>
        </section>
    {% endif %}

    {# ===== AD: Kategori-Manşetler Altı ===== #}
    {{ render_ad('kategori_mansetler_alti', true) }}
    {{ render_widget_zone('home-between-sections') }}

    {# ===== VIDEO NEWS SECTION ===== #}
    {% if videoNews|length > 0 %}
        <section class="mb-10 rounded-2xl overflow-hidden bg-gradient-to-br from-red-600 to-red-700 dark:from-red-800 dark:to-red-900 shadow-xl">
            <div class="p-6 sm:p-8">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-xl sm:text-2xl font-extrabold text-white tracking-wide uppercase flex items-center gap-2">
                        <i class="fas fa-play-circle"></i> Video
                    </h2>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
                    {% for news in videoNews %}
                        <a href="{{ path('frontend_news_detail', {slug: news.slug}) }}"
                           class="group block rounded-xl overflow-hidden shadow-lg transition-all duration-300 hover:shadow-2xl hover:-translate-y-1" style="background:#fff;">
                            <div class="relative aspect-video overflow-hidden">
                                {% if news.featuredImage %}
                                    <img src="{{ news.featuredImage|media_url }}" alt="{{ news.title }}"
                                         class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                                {% else %}
                                    <div class="w-full h-full bg-gray-800 flex items-center justify-center">
                                        <i class="fas fa-video text-white/40 text-3xl"></i>
                                    </div>
                                {% endif %}
                                {# Play button overlay #}
                                <div class="absolute inset-0 flex items-center justify-center">
                                    <div class="w-14 h-14 rounded-full bg-white/90 group-hover:bg-white flex items-center justify-center shadow-lg group-hover:scale-110 transition-all duration-300">
                                        <i class="fas fa-play text-red-600 text-lg ml-1"></i>
                                    </div>
                                </div>
                                {# Video badge #}
                                <span class="absolute bottom-2 right-2 bg-black/70 text-white text-[10px] font-semibold px-2 py-0.5 rounded flex items-center gap-1">
                                    <span class="w-1.5 h-1.5 rounded-full bg-red-500 inline-block"></span> Video
                                </span>
                            </div>
                            <div class="p-4">
                                <h3 class="text-[15px] font-bold leading-snug line-clamp-2 group-hover:text-red-600 transition-colors" style="color:#111;">
                                    {{ news.title }}
                                </h3>
                            </div>
                        </a>
                    {% endfor %}
                </div>
            </div>
        </section>
    {% endif %}

    {# ===== MAIN CONTENT AREA (Latest News + Sidebar) ===== #}
    <div class="flex flex-col lg:flex-row gap-8 items-start">

        {# Left: Latest news list #}
        <div class="flex-1 min-w-0">
            <div class="flex items-center gap-3 mb-6">
                <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 whitespace-nowrap">
                    <i class="far fa-newspaper mr-2 text-red-600"></i>Son Haberler
                </h2>
                <div class="flex-1 h-px bg-gray-200 dark:bg-gray-700"></div>
            </div>

            <div class="space-y-4" x-data="{ visibleCount: 10 }">
                {% for news in latestNews %}
                    <article x-show="{{ loop.index }} <= visibleCount"
                             x-transition:enter="transition ease-out duration-300"
                             x-transition:enter-start="opacity-0 translate-y-2"
                             x-transition:enter-end="opacity-100 translate-y-0"
                             class="group flex gap-4 bg-white dark:bg-gray-900 rounded-xl overflow-hidden shadow-sm hover:shadow-lg border border-gray-100 dark:border-gray-800 transition-all duration-300">
                        {# Thumbnail #}
                        <a href="{{ path('frontend_news_detail', {slug: news.slug}) }}" class="flex-shrink-0 w-32 sm:w-48 relative overflow-hidden">
                            {% if news.featuredImage %}
                                <img src="{{ news.featuredImage|media_url }}" alt="{{ news.title }}"
                                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 aspect-[4/3]"
                                     loading="lazy">
                            {% else %}
                                <div class="w-full h-full bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 flex items-center justify-center aspect-[4/3]">
                                    <i class="far fa-image text-2xl text-gray-400 dark:text-gray-600"></i>
                                </div>
                            {% endif %}
                        </a>
                        {# Content #}
                        <div class="flex-1 py-3 pr-4">
                            {% if news.category %}
                                <a href="{{ path('frontend_category', {slug: news.category.slug}) }}"
                                   class="inline-block text-xs font-semibold uppercase tracking-wider mb-1 hover:underline"
                                   style="color: {{ news.category.color|default('#dc2626') }}">
                                    {{ news.category.title }}
                                </a>
                            {% endif %}
                            <h3 class="text-base font-bold text-gray-900 dark:text-gray-100 leading-snug mb-1.5 line-clamp-2 group-hover:text-red-600 dark:group-hover:text-red-400 transition-colors">
                                <a href="{{ path('frontend_news_detail', {slug: news.slug}) }}">
                                    {{ news.title }}
                                </a>
                            </h3>
                            {% if news.spot %}
                                <p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 mb-2 hidden sm:block">
                                    {{ news.spot|striptags|slice(0, 120) }}
                                </p>
                            {% endif %}
                            <div class="flex items-center gap-3 text-xs text-gray-500">
                                {% if news.publishedAt %}
                                    <span><i class="far fa-clock mr-1"></i>{{ news.publishedAt|date("d.m.Y H:i") }}</span>
                                {% endif %}
                                <span><i class="far fa-eye mr-1"></i>{{ news.viewCount }}</span>
                                {% if news.commentCount > 0 %}
                                    <span><i class="far fa-comment mr-1"></i>{{ news.commentCount }}</span>
                                {% endif %}
                            </div>
                        </div>
                    </article>
                {% endfor %}

                {# Load more button #}
                {% if latestNews|length > 10 %}
                    <div x-show="visibleCount < {{ latestNews|length }}" class="text-center pt-4">
                        <button @click="visibleCount = {{ latestNews|length }}"
                                class="px-8 py-3 bg-red-600 hover:bg-red-700 text-white text-sm font-semibold rounded-lg shadow-sm hover:shadow-md transition-all">
                            <i class="fas fa-chevron-down mr-2"></i> Daha Fazla Haber Yukle
                        </button>
                    </div>
                {% endif %}
            </div>

            {# ===== CATEGORY SECTIONS (inside left column) ===== #}
            {% if categories|length > 0 %}
                {% for category in categories|slice(0, 4) %}
                    {% if category.newsCount > 0 %}
                        <section class="mt-8">
                            <div class="flex items-center justify-between mb-5">
                                <div class="flex items-center gap-3">
                                    {% if category.color %}
                                        <span class="w-1 h-7 rounded-full" style="background-color: {{ category.color }}"></span>
                                    {% endif %}
                                    <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100">
                                        {{ category.title }}
                                    </h2>
                                </div>
                                <a href="{{ path('frontend_category', {slug: category.slug}) }}"
                                   class="text-sm font-medium text-red-600 dark:text-red-500 hover:text-red-700 dark:hover:text-red-400 transition-colors">
                                    Tumu <i class="fas fa-arrow-right ml-1 text-xs"></i>
                                </a>
                            </div>
                            {{ render_widget_zone('category-' ~ category.slug) }}
                        </section>
                    {% endif %}
                {% endfor %}
            {% endif %}

            {# ===== YAZARLAR (Authors) inside left column ===== #}
            {% if authors|length > 0 %}
                {% set authorColors = ['#dc2626', '#2563eb', '#059669', '#d97706', '#7c3aed', '#db2777', '#0891b2', '#4f46e5'] %}
                <section class="mt-8">
                    <div class="flex items-center justify-between mb-6">
                        <div class="flex items-center gap-3">
                            <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100">
                                <i class="fas fa-pen-nib mr-2 text-red-600"></i>Köşe Yazarları
                            </h2>
                            <div class="flex-1 h-px bg-gray-200 dark:bg-gray-700"></div>
                        </div>
                        <a href="{{ path('frontend_authors') }}"
                           class="text-sm font-medium text-red-600 hover:text-red-700 transition-colors">
                            Tümü <i class="fas fa-arrow-right ml-1 text-xs"></i>
                        </a>
                    </div>
                    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-3 gap-4">
                        {% for author in authors %}
                            {% set colorIdx = loop.index0 % authorColors|length %}
                            <div class="group bg-white dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-800 shadow-sm hover:shadow-lg transition-all duration-300 overflow-hidden">
                                <div style="height: 4px; background: {{ authorColors[colorIdx] }};"></div>
                                <div class="p-4 text-center">
                                    <a href="{{ path('frontend_author_detail', {slug: author.slug}) }}" class="inline-block mb-3">
                                        {% if author.photo %}
                                            <img src="{{ author.photo }}" alt="{{ author.name }}"
                                                 class="w-16 h-16 rounded-full object-cover border-2 group-hover:scale-105 transition-transform duration-300"
                                                 style="border-color: {{ authorColors[colorIdx] }};">
                                        {% else %}
                                            <div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold group-hover:scale-105 transition-transform duration-300"
                                                 style="background: {{ authorColors[colorIdx] }};">
                                                {{ author.name|slice(0,1)|upper }}
                                            </div>
                                        {% endif %}
                                    </a>
                                    <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100 mb-2">
                                        <a href="{{ path('frontend_author_detail', {slug: author.slug}) }}" class="hover:text-red-600 transition-colors">
                                            {{ author.name }}
                                        </a>
                                    </h3>
                                    {% if authorLatestArticles[author.id] is defined %}
                                        <a href="{{ path('frontend_news_detail', {slug: authorLatestArticles[author.id].slug}) }}"
                                           class="text-xs text-gray-500 dark:text-gray-400 leading-snug line-clamp-2 hover:text-red-600 transition-colors block">
                                            {{ authorLatestArticles[author.id].title }}
                                        </a>
                                    {% endif %}
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </section>
            {% endif %}
        </div>

        {# Right: Sidebar #}
        <aside class="w-full lg:w-80 flex-shrink-0 space-y-8 lg:sticky lg:top-4 lg:max-h-[calc(100vh-2rem)] lg:overflow-y-auto lg:scrollbar-thin">
            {# AD POSITION: Sidebar #}
            {{ render_widget_zone('sidebar') }}

            {# Categories widget #}
            {% if categories|length > 0 %}
                <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-800 shadow-sm p-5">
                    <h3 class="text-base font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
                        <i class="fas fa-th-large text-red-600"></i> Kategoriler
                    </h3>
                    <ul class="space-y-1">
                        {% for category in categories %}
                            <li>
                                <a href="{{ path('frontend_category', {slug: category.slug}) }}"
                                   class="flex items-center justify-between px-3 py-2.5 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors group">
                                    <span class="flex items-center gap-2">
                                        {% if category.color %}
                                            <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background-color: {{ category.color }}"></span>
                                        {% endif %}
                                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300 group-hover:text-red-600 dark:group-hover:text-red-400 transition-colors">
                                            {{ category.title }}
                                        </span>
                                    </span>
                                    <span class="text-xs text-gray-400 bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded-full">
                                        {{ category.newsCount }}
                                    </span>
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            {% endif %}

            {# ===== SIDEBAR WIDGETS (homepage: without En Çok Okunan & Yazarlar) ===== #}
            {% include 'frontend/partials/_whatsapp_ihbar.html.twig' %}
            {% include 'frontend/partials/_puan_durumu.html.twig' %}

            {# Active Poll #}
            {% if activePoll and module_active('poll') %}
                <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-800 shadow-sm p-5">
                    <h3 class="text-base font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
                        <i class="fas fa-poll text-red-600"></i> Anket
                    </h3>
                    <p class="text-sm font-medium text-gray-800 dark:text-gray-200 mb-4">
                        {{ activePoll.question }}
                    </p>
                    {% if activePoll.showResults and activePoll.totalVotes > 0 %}
                        {% for option in activePoll.options %}
                            {% set percentage = activePoll.totalVotes > 0 ? ((option.voteCount / activePoll.totalVotes) * 100)|round(1) : 0 %}
                            <div class="mb-3">
                                <div class="flex justify-between text-sm mb-1">
                                    <span class="text-gray-700 dark:text-gray-300">{{ option.optionText }}</span>
                                    <span class="text-gray-500 font-medium">%{{ percentage }}</span>
                                </div>
                                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
                                    <div class="bg-red-600 h-2.5 rounded-full transition-all duration-500" style="width: {{ percentage }}%"></div>
                                </div>
                            </div>
                        {% endfor %}
                        <p class="text-xs text-gray-500 mt-3">Toplam {{ activePoll.totalVotes }} oy</p>
                    {% else %}
                        {% for option in activePoll.options %}
                            <label class="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer mb-1">
                                <input type="radio" name="poll_{{ activePoll.id }}" value="{{ option.id }}"
                                       class="text-red-600 focus:ring-red-500">
                                <span class="text-sm text-gray-700 dark:text-gray-300">{{ option.optionText }}</span>
                            </label>
                        {% endfor %}
                    {% endif %}
                </div>
            {% endif %}
        </aside>
    </div>

    {# ===== ASTROLOJI (Horoscope) SECTION ===== #}
    <section class="mt-8" x-data="{ openSign: null }">
        <div class="rounded-2xl overflow-hidden" style="background: linear-gradient(135deg, #0f0f2e 0%, #1a1040 30%, #251650 60%, #1a1040 100%); position: relative;">
            {# Stars overlay #}
            <div style="position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.3) 0%, transparent 100%), radial-gradient(1px 1px at 30% 60%, rgba(255,255,255,0.2) 0%, transparent 100%), radial-gradient(1px 1px at 50% 10%, rgba(255,255,255,0.25) 0%, transparent 100%), radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.15) 0%, transparent 100%), radial-gradient(1px 1px at 90% 70%, rgba(255,255,255,0.3) 0%, transparent 100%), radial-gradient(1px 1px at 15% 80%, rgba(255,255,255,0.2) 0%, transparent 100%), radial-gradient(1px 1px at 45% 90%, rgba(255,255,255,0.15) 0%, transparent 100%), radial-gradient(1px 1px at 85% 15%, rgba(255,255,255,0.25) 0%, transparent 100%); pointer-events: none;"></div>

            {# Header #}
            <div style="padding: 20px 28px 0 28px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1;">
                <div style="display: flex; align-items: center; gap: 10px;">
                    <span style="color: #d4af37; font-size: 22px;">☾</span>
                    <span style="color: #d4af37; font-size: 18px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase;">ASTROLOJİ</span>
                </div>
                <span style="color: #d4af37; font-size: 14px; font-style: italic; opacity: 0.7;">✦ MapAstro</span>
            </div>

            {# Gold line #}
            <div style="margin: 12px 28px; height: 1px; background: linear-gradient(90deg, #d4af37 0%, #d4af3744 100%);"></div>

            {# Zodiac Signs Grid #}
            <div style="padding: 10px 16px 16px 16px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; position: relative; z-index: 1;">
                {% set signSlugs = ['koc', 'boga', 'ikizler', 'yengec', 'aslan', 'basak', 'terazi', 'akrep', 'yay', 'oglak', 'kova', 'balik'] %}
                {% for slug in signSlugs %}
                    {% set signData = horoscopeSigns[slug]|default(null) %}
                    {% set horoscopeData = null %}
                    {% for h in horoscopes|default([]) %}
                        {% if h.sign == slug %}
                            {% set horoscopeData = h %}
                        {% endif %}
                    {% endfor %}
                    {% if signData %}
                        <a href="#" @click.prevent="openSign = openSign === '{{ slug }}' ? null : '{{ slug }}'"
                           style="display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; cursor: pointer; transition: transform 0.2s;"
                           :style="openSign === '{{ slug }}' ? 'transform: scale(1.1)' : ''"
                           onmouseover="if(!this._active) this.style.transform='scale(1.06)'" onmouseout="if(!this._active) this.style.transform='scale(1)'">
                            {# Circle with zodiac icon #}
                            <div style="width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 30%, rgba(212,175,55,0.15) 0%, rgba(15,15,46,0.8) 70%); position: relative; transition: all 0.3s;"
                                 :style="openSign === '{{ slug }}' ? 'border: 2px solid #d4af37; box-shadow: 0 0 20px rgba(212,175,55,0.4);' : 'border: 2px solid rgba(212,175,55,0.3);'">
                                <span style="font-size: 26px; color: #d4af37;">{{ signData.icon }}</span>
                            </div>
                            {# Sign name + date range #}
                            <div style="text-align: center;">
                                <span style="display: block; color: #d4af37; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;">{{ signData.name }}</span>
                                <span style="display: block; color: rgba(212,175,55,0.5); font-size: 9px; margin-top: 1px;">{{ signData.date_range }}</span>
                            </div>
                        </a>
                    {% endif %}
                {% endfor %}
            </div>

            {# Horoscope Detail Panel (appears below zodiac grid) #}
            {% for slug in signSlugs %}
                {% set signData = horoscopeSigns[slug]|default(null) %}
                {% set horoscopeData = null %}
                {% for h in horoscopes|default([]) %}
                    {% if h.sign == slug %}
                        {% set horoscopeData = h %}
                    {% endif %}
                {% endfor %}
                {% if signData %}
                    <div x-show="openSign === '{{ slug }}'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform -translate-y-2" x-transition:enter-end="opacity-100 transform translate-y-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
                         style="position: relative; z-index: 2; margin: 0 20px 20px 20px; border-radius: 12px; border: 1px solid rgba(212,175,55,0.2); background: rgba(15,15,46,0.9); backdrop-filter: blur(10px); padding: 20px;">
                        <div style="display: flex; align-items: flex-start; gap: 16px;">
                            {# Sign icon #}
                            <div style="width: 56px; height: 56px; border-radius: 50%; border: 2px solid #d4af37; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(212,175,55,0.15) 0%, transparent 70%); flex-shrink: 0;">
                                <span style="font-size: 28px; color: #d4af37;">{{ signData.icon }}</span>
                            </div>
                            {# Content #}
                            <div style="flex: 1; min-width: 0;">
                                <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;">
                                    <div>
                                        <span style="color: #d4af37; font-size: 16px; font-weight: 700;">{{ signData.name }}</span>
                                        <span style="color: rgba(212,175,55,0.5); font-size: 12px; margin-left: 8px;">{{ signData.date_range }}</span>
                                    </div>
                                    <button @click="openSign = null" style="color: rgba(212,175,55,0.5); font-size: 18px; cursor: pointer; background: none; border: none; padding: 4px; line-height: 1;">✕</button>
                                </div>
                                {% if horoscopeData %}
                                    <p style="color: rgba(255,255,255,0.8); font-size: 14px; line-height: 1.7; margin-bottom: 14px;">
                                        {{ horoscopeData.content }}
                                    </p>
                                    {# Ratings #}
                                    <div style="display: flex; gap: 20px; flex-wrap: wrap;">
                                        {% if horoscopeData.loveRating %}
                                            <div style="display: flex; align-items: center; gap: 6px;">
                                                <span style="color: #ef4444; font-size: 14px;">❤️</span>
                                                <span style="color: rgba(255,255,255,0.6); font-size: 12px;">Aşk:</span>
                                                <span style="color: #d4af37; font-size: 12px; font-weight: 600;">{{ horoscopeData.loveRating }}/5</span>
                                            </div>
                                        {% endif %}
                                        {% if horoscopeData.careerRating %}
                                            <div style="display: flex; align-items: center; gap: 6px;">
                                                <span style="font-size: 14px;">💼</span>
                                                <span style="color: rgba(255,255,255,0.6); font-size: 12px;">Kariyer:</span>
                                                <span style="color: #d4af37; font-size: 12px; font-weight: 600;">{{ horoscopeData.careerRating }}/5</span>
                                            </div>
                                        {% endif %}
                                        {% if horoscopeData.healthRating %}
                                            <div style="display: flex; align-items: center; gap: 6px;">
                                                <span style="font-size: 14px;">💚</span>
                                                <span style="color: rgba(255,255,255,0.6); font-size: 12px;">Sağlık:</span>
                                                <span style="color: #d4af37; font-size: 12px; font-weight: 600;">{{ horoscopeData.healthRating }}/5</span>
                                            </div>
                                        {% endif %}
                                    </div>
                                    {% if horoscopeData.luckyNumber or horoscopeData.luckyColor %}
                                        <div style="display: flex; gap: 16px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(212,175,55,0.1);">
                                            {% if horoscopeData.luckyNumber %}
                                                <span style="color: rgba(255,255,255,0.5); font-size: 11px;">🔢 Şanslı Sayı: <strong style="color: #d4af37;">{{ horoscopeData.luckyNumber }}</strong></span>
                                            {% endif %}
                                            {% if horoscopeData.luckyColor %}
                                                <span style="color: rgba(255,255,255,0.5); font-size: 11px;">🎨 Şanslı Renk: <strong style="color: #d4af37;">{{ horoscopeData.luckyColor }}</strong></span>
                                            {% endif %}
                                        </div>
                                    {% endif %}
                                {% else %}
                                    <p style="color: rgba(255,255,255,0.4); font-size: 14px; font-style: italic;">
                                        Bugün için henüz yorum girilmemiştir.
                                    </p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    </section>

    {# ===== WIDGET ZONE: Home bottom ===== #}
    {{ render_widget_zone('home-bottom') }}

</div>
{% endblock %}
