@extends('blog.partials.app')

@section('title', 'Akun')

@section('content')
    <div id="wrapper" class="container max-w-screen-lg mx-auto flex flex-wrap justify-between lg:px-8 ms:px-4">


        {{-- Iklan (Mobile Only) --}}
        <div class="mobile-banner" id="mobileBanner">
            <div class="ad-close">
                <button class="close-ad-btn" id="closeBannerBtn">Tutup Iklan ✖</button>
            </div>
            <img src="{{ asset('assets/images/common/ad-mobile(320x50).jpg') }}" alt="Mobile Ad">
        </div>
        {{-- Iklan (Mobile Only) END --}}

        <!-- Category 1 start -->
        <div class="section panel overflow-hidden">
            <div class="section-outer panel">
                <div class="container max-w-xl">
                    <div class="section-inner">
                        <div class="block-layout grid-layout vstack gap-3 lg:gap-4 panel overflow-hidden">
                            <div class="block-content">
                                <div class="row">
                                    <div class="col-lg-9">
                                        @foreach ($postheadline as $index => $headline)
                                            @if ($loop->first)
                                                <article class="post type-post panel vstack gap-3 lg:gap-2">
                                                    <div class="post-media panel uc-transition-toggle overflow-hidden">
                                                        <div class="featured-image-container">
                                                            @if (!empty($headline->gambar) && is_array($headline->gambar))
                                                                @php
                                                                    $firstImage = $headline->gambar[0];
                                                                @endphp
                                                                <img class="featured-image rounded"
                                                                    src="{{ asset('storage/' . $firstImage) }}"
                                                                    alt="{{ $headline->title }}" />
                                                            @endif

                                                            <!-- Efek lipatan sudut kanan bawah -->
                                                            <div class="corner-fold"></div>
                                                        </div>
                                                        <a href="{{ route('bytitle', ['slug' => $headline->slug]) }}"
                                                            class="position-cover"></a>
                                                    </div>
                                                    <div class="post-header panel">
                                                        <div
                                                            class="post-meta panel hstack justify-start gap-1 fs-7 fw-medium text-gray-900 dark:text-white text-opacity-60 md:d-flex z-1">
                                                            <div>
                                                                <div class="post-category hstack gap-narrow fw-medium">
                                                                    <a class="text-none text-primary dark:text-white"
                                                                        href="{{ route('bycategory', ['categorySlug' => $headline->kategori->slug]) }}">{{ $headline->kategori->nama_kategori }}</a>
                                                                </div>
                                                            </div>
                                                            <div class="sep md:d-block">❘</div>
                                                            <div class="md:d-block">
                                                                <div class="post-date hstack gap-narrow">
                                                                    <span>{{ $headline->created_at->diffForHumans() }}</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <h3 class="post-title h5 bold lg:h3 m-0 text-truncate-3">
                                                            <a class="text-none hover:text-primary duration-150"
                                                                href="{{ route('bytitle', ['slug' => $headline->slug]) }}">{{ $headline->title }}</a>
                                                        </h3>
                                                        <p class="fs-6 opacity-60 text-truncate-2">
                                                            {!! Str::limit($headline->content, 150) !!}</ </p>
                                                        <div
                                                            class="post-meta panel hstack justify-between fs-7 fw-medium text-gray-900 dark:text-white text-opacity-60 d-none md:d-flex">
                                                            <div class="meta">
                                                                <div class="hstack gap-2">
                                                                    <div>
                                                                        <div class="post-author hstack gap-1">
                                                                            <a href="{{ route('byauthor', ['slug' => $headline->user->slug]) }}"
                                                                                data-uc-tooltip="{{ $headline->user->name }}"><img
                                                                                    src="{{ asset('assets/images/avatars/icon-profile.webp') }}"
                                                                                    alt="{{ $headline->user->name }}"
                                                                                    class="w-24px h-24px rounded-circle"></a>
                                                                            <a href="{{ route('byauthor', ['slug' => $headline->user->slug]) }}"
                                                                                class="text-black dark:text-white text-none fw-bold">{{ $headline->user->name }}</a>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="actions">
                                                                <div class="hstack gap-1"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </article>
                                                <div class="py-4">
                                                    <div class="row row-cols-1 row-cols-md-2 g-4">
                                                        <!-- Card 1 -->
                                                    @else
                                                        <div class="col">
                                                            <div class="h-100">
                                                                <article class="post type-post panel uc-transition-toggle">
                                                                    <div class="row child-cols g-2 lg:g-3" data-uc-grid>
                                                                        <div class="col-auto">
                                                                            <div
                                                                                class="post-media panel overflow-hidden max-w-72px min-w-72px">
                                                                                <div
                                                                                    class="featured-image bg-gray-25 dark:bg-gray-800 ratio ratio-1x1">
                                                                                    @if (!empty($headline->gambar) && is_array($headline->gambar))
                                                                                        @php
                                                                                            $firstImage =
                                                                                                $headline->gambar[0];
                                                                                        @endphp
                                                                                        <img class="media-cover image uc-transition-scale-up uc-transition-opaque rounded"
                                                                                            src="{{ asset('storage/' . $firstImage) }}"
                                                                                            data-src="{{ asset('storage/' . $firstImage) }}"
                                                                                            alt="{{ $headline->title }}"
                                                                                            data-uc-img="loading: lazy" />
                                                                                    @endif
                                                                                </div>
                                                                                <a href="{{ route('bytitle', ['slug' => $headline->slug]) }}"
                                                                                    class="position-cover"></a>
                                                                            </div>
                                                                        </div>
                                                                        <div>
                                                                            <div
                                                                                class="post-header panel vstack justify-between gap-1">
                                                                                <h5
                                                                                    class="post-title dark:text-white text-dark m-0 text-truncate-4">
                                                                                    <a class="text-none hover:text-primary duration-150"
                                                                                        href="{{ route('bytitle', ['slug' => $headline->slug]) }}">{{ $headline->title }}</a>
                                                                                </h5>
                                                                                <div
                                                                                    class="post-date hstack gap-narrow fs-7 text-gray-900 dark:text-white text-opacity-60">
                                                                                    <small>{{ $headline->created_at->translatedFormat('j F Y') }}</small>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </article>
                                                            </div>
                                                        </div>
                                            @endif
                                        @endforeach
                                    </div>
                                </div>

                            </div>
                            <div class="col-lg-3">
                                <div class="widget ad-widget vstack gap-2 text-center p-2 bg-ad">
                                    <div class="panel gap-2 h-100">
                                        <div>
                                            <div class="widget ad-widget vstack gap-2">
                                                <div class="widget-title text-center">
                                                    <h5 class="fs-7 ft-tertiary text-uppercase m-0 dark:text-dark">
                                                        Advertisement
                                                    </h5>
                                                </div>
                                                <div class="widget-content">
                                                    <a class="cstack mx-auto text-none" href="#" target="_blank"
                                                        rel="nofollow">
                                                        <!-- Ad image for desktop (300x600) with increased height -->
                                                        <img class="d-none sm:d-block" style="height: 800px;"
                                                            src="{{ asset('/assets/images/common/ad-potrait-dekstop(300x800).png') }}"
                                                            alt="Ad slot">
                                                        <!-- Ad image for mobile -->
                                                        <img class="d-block sm:d-none"
                                                            src="{{ asset('assets/images/common/ad-mobile(320x50).jpg') }}"
                                                            alt="Ad slot">
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div> <!-- End of Right Sidebar -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <!-- Category 1 End -->

    <!-- Section start -->
    <div id="latest_news" class="latest-news section panel">
        <div class="section-outer panel py-4 lg:py-6">
            <div class="container max-w-xl">
                <div class="section-inner">
                    <div class="content-wrap row child-cols-12 g-4 lg:g-6" data-uc-grid>
                        <div class="md:col-9">
                            {{-- CATEGORT AWAL (NASIONAL) --}}
                            <div class="main-wrap panel vstack gap-3 lg:gap-6">
                                <div class="block-layout grid-layout vstack gap-2 panel overflow-hidden">
                                    <div class="block-header panel pb-1">
                                        <h2
                                            class="h5 ft-tertiary fw-bold ls-0 text-uppercase m-0 text-black dark:text-white position-relative underline-title">
                                            <strong class="dark:text-white">NASIONAL</strong>
                                        </h2>
                                    </div>
                                    <div class="block-content">
                                        <div class="row child-cols-12 g-2 lg:g-4 sep-x">
                                            @foreach ($postnasional as $index => $nasional)
                                                @if ($loop->first)
                                                    <div class="col-12">
                                                        <article class="post type-post panel vstack gap-1 lg:gap-2">
                                                            <div
                                                                class="post-media panel uc-transition-toggle overflow-hidden">
                                                                <div
                                                                    class="featured-image bg-gray-25 dark:bg-gray-800 overflow-hidden ratio ratio-16x9">
                                                                    @if (!empty($nasional->gambar) && is_array($nasional->gambar))
                                                                        @php
                                                                            $firstImage = $nasional->gambar[0];
                                                                        @endphp
                                                                        <img class="media-cover image uc-transition-scale-up uc-transition-opaque rounded"
                                                                            src="{{ asset('storage/' . $firstImage) }}"
                                                                            data-src="{{ asset('storage/' . $firstImage) }}"
                                                                            alt="{{ $nasional->title }}"
                                                                            data-uc-img="loading: lazy" />
                                                                    @endif
                                                                </div>
                                                                <a href="{{ route('bytitle', ['slug' => $nasional->slug]) }}"
                                                                    class="position-cover"></a>
                                                            </div>
                                                            <div class="post-header panel">
                                                                <div
                                                                    class="post-meta panel hstack justify-start gap-1 fs-7 fw-medium text-gray-900 dark:text-white text-opacity-60 md:d-flex z-1">
                                                                    <div>
                                                                        <div
                                                                            class="post-category hstack gap-narrow fw-medium">
                                                                            <a class="text-none text-primary dark:text-white"
                                                                                href="{{ route('bycategory', ['categorySlug' => $nasional->kategori->slug]) }}">
                                                                                {{ $nasional->kategori->nama_kategori }}
                                                                            </a>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <h5
                                                                    class="post-title dark:text-white text-dark lg:h4 m-0 text-truncate-4">
                                                                    <a class="text-none hover:text-primary duration-150"
                                                                        href="{{ route('bytitle', ['slug' => $nasional->slug]) }}">
                                                                        {{ $nasional->title }}
                                                                    </a>
                                                                </h5>
                                                                <p class="fs-6 opacity-60 text-truncate-2">
                                                                    {!! Str::limit($nasional->content, 100) !!}
                                                                </p>
                                                            </div>
                                                        </article>
                                                    </div>
                                                @else
                                                    <div class="panel">
                                                        <article class="post type-post panel">
                                                            <div class="row child-cols g-3" data-uc-grid>
                                                                <div class="col-auto">
                                                                    <div
                                                                        class="post-media panel uc-transition-toggle overflow-hidden max-w-150px min-w-100px lg:min-w-150px">
                                                                        <div
                                                                            class="featured-image bg-gray-25 dark:bg-gray-800 ratio ratio-16x9">
                                                                            @if (!empty($nasional->gambar) && is_array($nasional->gambar))
                                                                                @php
                                                                                    $firstImage = $nasional->gambar[0];
                                                                                @endphp
                                                                                <img class="media-cover image uc-transition-scale-up uc-transition-opaque rounded"
                                                                                    src="{{ asset('storage/' . $firstImage) }}"
                                                                                    data-src="{{ asset('storage/' . $firstImage) }}"
                                                                                    alt="{{ $nasional->title }}"
                                                                                    data-uc-img="loading: lazy" />
                                                                            @endif
                                                                        </div>
                                                                        <a href="{{ route('bytitle', ['slug' => $nasional->slug]) }}"
                                                                            class="position-cover"></a>
                                                                    </div>
                                                                </div>

                                                                <div class="col">
                                                                    <div
                                                                        class="post-header panel vstack justify-between gap-1">
                                                                        <div
                                                                            class="post-meta panel hstack justify-start gap-2 fs-7 fw-medium text-gray-900 dark:text-white text-opacity-60 d-none md:d-flex z-1">
                                                                            <div>
                                                                                <div
                                                                                    class="post-category hstack gap-narrow fw-medium">
                                                                                    <a class="text-none text-primary dark:text-white"
                                                                                        href="{{ route('bycategory', ['categorySlug' => $nasional->kategori->slug]) }}">
                                                                                        {{ $nasional->kategori->nama_kategori }}
                                                                                    </a>
                                                                                </div>
                                                                            </div>
                                                                        </div>

                                                                        <h6
                                                                            class="post-title dark:text-white text-dark lg:h5 m-0 text-truncate-4">
                                                                            <a class="text-none hover:text-primary duration-150"
                                                                                href="{{ route('bytitle', ['slug' => $nasional->slug]) }}">
                                                                                {{ $nasional->title }}
                                                                            </a>
                                                                        </h6>

                                                                        <div
                                                                            class="post-date hstack gap-narrow fs-7 text-gray-900 dark:text-white text-opacity-60">
                                                                            <span>{{ $nasional->created_at->diffForHumans() }}</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </article>
                                                    </div>
                                                @endif
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="block-footer cstack lg:mt-2">
                                        <a href="{{ route('bycategory', ['categorySlug' => 'nasional']) }}"
                                            class="animate-btn gap-0 btn btn-sm btn-alt-primary bg-transparent text-black dark:text-white border w-100">
                                            <span>Selengkapnya</span>
                                            <i class="icon fa-solid fa-arrow-right"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            {{-- CATEGORY AWAL (LIFESTYLE) --}}
                            <div class="main-wrap panel vstack gap-3 lg:gap-6 py-3">
                                <div class="block-layout grid-layout vstack gap-2 panel overflow-hidden">
                                    <div class="block-header panel pb-1">
                                        <h2 class="h5 ft-tertiary fw-bold ls-0 text-uppercase m-0 text-black dark:text-white position-relative underline-title">
                                            <strong class="dark:text-white">LIFESTYLE</strong>
                                        </h2>
                                    </div>
                                    <div class="block-content">
                                        <div class="row child-cols-12 g-2 lg:g-4 sep-x">
                                            @foreach ($postlifestyle as $index => $lifestyle)
                                                @if ($loop->first)
                                                    <div class="col-12">
                                                        <article class="post type-post panel vstack gap-1 lg:gap-2">
                                                            <div class="post-media panel uc-transition-toggle overflow-hidden">
                                                                <div class="featured-image bg-gray-25 dark:bg-gray-800 overflow-hidden ratio ratio-16x9">
                                                                    @if (!empty($lifestyle->gambar) && is_array($lifestyle->gambar))
                                                                        @php
                                                                            $firstImage = $lifestyle->gambar[0];
                                                                        @endphp
                                                                        <img class="media-cover image uc-transition-scale-up uc-transition-opaque rounded"
                                                                             src="{{ asset('storage/' . $firstImage) }}"
                                                                             data-src="{{ asset('storage/' . $firstImage) }}"
                                                                             alt="{{ $lifestyle->title }}"
                                                                             data-uc-img="loading: lazy" />
                                                                    @endif
                                                                </div>
                                                                <a href="{{ route('bytitle', ['slug' => $lifestyle->slug]) }}" class="position-cover"></a>
                                                            </div>
                                                            <div class="post-header panel">
                                                                <div class="post-meta panel hstack justify-start gap-1 fs-7 fw-medium text-gray-900 dark:text-white text-opacity-60 md:d-flex z-1">
                                                                    <div>
                                                                        <div class="post-category hstack gap-narrow fw-medium">
                                                                            <a class="text-none text-primary dark:text-white" href="{{ route('bycategory', ['categorySlug' => $lifestyle->kategori->slug]) }}">
                                                                                {{ $lifestyle->kategori->nama_kategori }}
                                                                            </a>
                                                                        </div>
                                                                    </div>
                                                                    <div class="sep md:d-block">❘</div>
                                                                    <div class="md:d-block">
                                                                        <div class="post-date text-start hstack gap-narrow">
                                                                            <span>{{ $lifestyle->created_at->diffForHumans() }}</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <h5 class="post-title dark:text-white text-dark lg:h4 m-0 text-truncate-4 text-start">
                                                                    <a class="text-none hover:text-primary duration-150" href="{{ route('bytitle', ['slug' => $lifestyle->slug]) }}">
                                                                        {{ $lifestyle->title }}
                                                                    </a>
                                                                </h5>
                                                                <p class="fs-6 opacity-60 text-truncate-2 text-start">
                                                                    {!! Str::limit($lifestyle->content, 100) !!}
                                                                </p>
                                                            </div>
                                                        </article>
                                                    </div>
                                                @else
                                                    <div class="panel">
                                                        <article class="post type-post panel">
                                                            <div class="row child-cols g-3" data-uc-grid>
                                                                <div class="col">
                                                                    <div class="post-header panel vstack justify-between gap-1 text-end">
                                                                        <div class="post-meta panel hstack justify-end gap-2 fs-7 fw-medium text-gray-900 dark:text-white text-opacity-60 d-none md:d-flex z-1">
                                                                            <div>
                                                                                <div class="post-category hstack gap-narrow fw-medium">
                                                                                    <a class="text-none text-primary dark:text-white" href="{{ route('bycategory', ['categorySlug' => $lifestyle->kategori->slug]) }}">
                                                                                        {{ $lifestyle->kategori->nama_kategori }}
                                                                                    </a>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <h6 class="post-title dark:text-white text-dark lg:h5 m-0 text-truncate-4">
                                                                            <a class="text-none hover:text-primary duration-150" href="{{ route('bytitle', ['slug' => $lifestyle->slug]) }}">
                                                                                {{ $lifestyle->title }}
                                                                            </a>
                                                                        </h6>
                                                                        <div class="post-date gap-narrow fs-7 text-gray-900 dark:text-white text-opacity-60">
                                                                            <span class="text-end">{{ $lifestyle->created_at->diffForHumans() }}</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-auto">
                                                                    <div class="post-media panel uc-transition-toggle overflow-hidden max-w-150px min-w-100px lg:min-w-150px">
                                                                        <div class="featured-image bg-gray-25 dark:bg-gray-800 ratio ratio-16x9">
                                                                            @if (!empty($lifestyle->gambar) && is_array($lifestyle->gambar))
                                                                                @php
                                                                                    $firstImage = $lifestyle->gambar[0];
                                                                                @endphp
                                                                                <img class="media-cover image uc-transition-scale-up uc-transition-opaque rounded"
                                                                                     src="{{ asset('storage/' . $firstImage) }}"
                                                                                     data-src="{{ asset('storage/' . $firstImage) }}"
                                                                                     alt="{{ $lifestyle->title }}"
                                                                                     data-uc-img="loading: lazy" />
                                                                            @endif
                                                                        </div>
                                                                        <a href="{{ route('bytitle', ['slug' => $lifestyle->slug]) }}" class="position-cover"></a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </article>
                                                    </div>
                                                @endif
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="block-footer cstack lg:mt-2">
                                        <a href="{{ route('bycategory', ['categorySlug' => 'lifestyle']) }}" class="animate-btn gap-0 btn btn-sm btn-alt-primary bg-transparent text-black dark:text-white border w-100">
                                            <span>Selengkapnya</span>
                                            <i class="icon fa-solid fa-arrow-right"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            {{-- CATEGORY AWAL (TEKNOLOGI) --}}
                            <div class="main-wrap panel vstack gap-3 lg:gap-6">
                                <div class="block-layout grid-layout vstack gap-2 panel overflow-hidden">
                                    <div class="block-header panel pb-1">
                                        <h2
                                            class="h5 ft-tertiary fw-bold ls-0 text-uppercase m-0 text-black dark:text-white position-relative underline-title">
                                            <strong class="dark:text-white">TEKNOLOGI</strong>
                                        </h2>
                                    </div>
                                    <div class="block-content">
                                        <div class="row child-cols-12 g-2 lg:g-4 sep-x">
                                            @foreach ($postteknologi as $index => $teknologi)
                                                @if ($loop->first)
                                                    <div class="col-12">
                                                        <article class="post type-post panel vstack gap-1 lg:gap-2">
                                                            <div
                                                                class="post-media panel uc-transition-toggle overflow-hidden">
                                                                <div
                                                                    class="featured-image bg-gray-25 dark:bg-gray-800 overflow-hidden ratio ratio-16x9">
                                                                    @if (!empty($teknologi->gambar) && is_array($teknologi->gambar))
                                                                        @php
                                                                            $firstImage = $teknologi->gambar[0];
                                                                        @endphp
                                                                        <img class="media-cover image uc-transition-scale-up uc-transition-opaque rounded"
                                                                            src="{{ asset('storage/' . $firstImage) }}"
                                                                            data-src="{{ asset('storage/' . $firstImage) }}"
                                                                            alt="{{ $teknologi->title }}"
                                                                            data-uc-img="loading: lazy" />
                                                                    @endif
                                                                </div>
                                                                <a href="{{ route('bytitle', ['slug' => $teknologi->slug]) }}"
                                                                    class="position-cover"></a>
                                                            </div>
                                                            <div class="post-header panel">
                                                                <div
                                                                    class="post-meta panel hstack justify-start gap-1 fs-7 fw-medium text-gray-900 dark:text-white text-opacity-60 md:d-flex z-1">
                                                                    <div>
                                                                        <div
                                                                            class="post-category hstack gap-narrow fw-medium">
                                                                            <a class="text-none text-primary dark:text-white"
                                                                                href="{{ route('bycategory', ['categorySlug' => $teknologi->kategori->slug]) }}">
                                                                                {{ $teknologi->kategori->nama_kategori }}
                                                                            </a>
                                                                        </div>
                                                                    </div>
                                                                    <div class="sep md:d-block">❘</div>
                                                                    <div class="md:d-block">
                                                                        <div class="post-date hstack gap-narrow">
                                                                            <span>{{ $teknologi->created_at->diffForHumans() }}</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <h5
                                                                    class="post-title dark:text-white text-dark lg:h4 m-0 text-truncate-4">
                                                                    <a class="text-none hover:text-primary duration-150"
                                                                        href="{{ route('bytitle', ['slug' => $teknologi->slug]) }}">
                                                                        {{ $teknologi->title }}
                                                                    </a>
                                                                </h5>
                                                                <p class="fs-6 opacity-60 text-truncate-2">
                                                                    {!! Str::limit($teknologi->content, 70) !!}
                                                                </p>
                                                            </div>
                                                        </article>
                                                    </div>
                                                @else
                                                    <div class="panel">
                                                        <article class="post type-post panel">
                                                            <div class="row child-cols g-3" data-uc-grid>
                                                                <div class="col-auto">
                                                                    <div
                                                                        class="post-media panel uc-transition-toggle overflow-hidden max-w-150px min-w-100px lg:min-w-150px">
                                                                        <div
                                                                            class="featured-image bg-gray-25 dark:bg-gray-800 ratio ratio-16x9">
                                                                            @if (!empty($teknologi->gambar) && is_array($teknologi->gambar))
                                                                                @php
                                                                                    $firstImage = $teknologi->gambar[0];
                                                                                @endphp
                                                                                <img class="media-cover image uc-transition-scale-up uc-transition-opaque rounded"
                                                                                    src="{{ asset('storage/' . $firstImage) }}"
                                                                                    data-src="{{ asset('storage/' . $firstImage) }}"
                                                                                    alt="{{ $teknologi->title }}"
                                                                                    data-uc-img="loading: lazy" />
                                                                            @endif
                                                                        </div>
                                                                        <a href="{{ route('bytitle', ['slug' => $teknologi->slug]) }}"
                                                                            class="position-cover"></a>
                                                                    </div>
                                                                </div>
                                                                <div class="col">
                                                                    <div
                                                                        class="post-header panel vstack justify-between gap-1">
                                                                        <div
                                                                            class="post-meta panel hstack justify-start gap-2 fs-7 fw-medium text-gray-900 dark:text-white text-opacity-60 d-none md:d-flex z-1">
                                                                            <div>
                                                                                <div
                                                                                    class="post-category hstack gap-narrow fw-medium">
                                                                                    <a class="text-none text-primary dark:text-white"
                                                                                        href="{{ route('bycategory', ['categorySlug' => $teknologi->kategori->slug]) }}">
                                                                                        {{ $teknologi->kategori->nama_kategori }}
                                                                                    </a>
                                                                                </div>
                                                                            </div>
                                                                        </div>

                                                                        <h6
                                                                            class="post-title dark:text-white text-dark lg:h5 m-0 text-truncate-4">
                                                                            <a class="text-none hover:text-primary duration-150"
                                                                                href="{{ route('bytitle', ['slug' => $teknologi->slug]) }}">
                                                                                {{ $teknologi->title }}
                                                                            </a>
                                                                        </h6>

                                                                        <div
                                                                            class="post-date hstack gap-narrow fs-7 text-gray-900 dark:text-white text-opacity-60">
                                                                            <span>{{ $teknologi->created_at->diffForHumans() }}</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </article>
                                                    </div>
                                                @endif
                                            @endforeach
                                        </div>

                                    </div>
                                    <div class="block-footer cstack lg:mt-2">
                                        <a href="{{ route('bycategory', ['categorySlug' => 'teknologi']) }}"
                                            class="animate-btn gap-0 btn btn-sm btn-alt-primary bg-transparent text-black dark:text-white border w-100">
                                            <span>Selengkapnya</span>
                                            <i class="icon fa-solid fa-arrow-right"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            {{-- CATEGORY AWAL (OLAHRAGA) --}}
                            <div class="main-wrap panel vstack gap-3 lg:gap-6 py-3">
                                <div class="block-layout grid-layout vstack gap-2 panel overflow-hidden">
                                    <div class="block-header panel pb-1">
                                        <h2 class="h5 ft-tertiary fw-bold ls-0 text-uppercase m-0 text-black dark:text-white position-relative underline-title">
                                            <strong class="dark:text-white">OLAHRAGA</strong>
                                        </h2>
                                    </div>
                                    <div class="block-content">
                                        <div class="row child-cols-12 g-2 lg:g-4 sep-x">
                                            @foreach ($postolahraga as $index => $olahraga)
                                                @if ($loop->first)
                                                    <div class="col-12">
                                                        <article class="post type-post panel vstack gap-1 lg:gap-2">
                                                            <div class="post-media panel uc-transition-toggle overflow-hidden">
                                                                <div class="featured-image bg-gray-25 dark:bg-gray-800 overflow-hidden ratio ratio-16x9">
                                                                    @if (!empty($olahraga->gambar) && is_array($olahraga->gambar))
                                                                        @php
                                                                            $firstImage = $olahraga->gambar[0];
                                                                        @endphp
                                                                        <img class="media-cover image uc-transition-scale-up uc-transition-opaque rounded"
                                                                             src="{{ asset('storage/' . $firstImage) }}"
                                                                             data-src="{{ asset('storage/' . $firstImage) }}"
                                                                             alt="{{ $olahraga->title }}"
                                                                             data-uc-img="loading: lazy" />
                                                                    @endif
                                                                </div>
                                                                <a href="{{ route('bytitle', ['slug' => $olahraga->slug]) }}" class="position-cover"></a>
                                                            </div>
                                                            <div class="post-header panel">
                                                                <div class="post-meta panel hstack justify-start gap-1 fs-7 fw-medium text-gray-900 dark:text-white text-opacity-60 md:d-flex z-1">
                                                                    <div>
                                                                        <div class="post-category hstack gap-narrow fw-medium">
                                                                            <a class="text-none text-primary dark:text-white" href="{{ route('bycategory', ['categorySlug' => $olahraga->kategori->slug]) }}">
                                                                                {{ $olahraga->kategori->nama_kategori }}
                                                                            </a>
                                                                        </div>
                                                                    </div>
                                                                    <div class="sep md:d-block">❘</div>
                                                                    <div class="md:d-block">
                                                                        <div class="post-date text-start hstack gap-narrow">
                                                                            <span>{{ $olahraga->created_at->diffForHumans() }}</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <h5 class="post-title dark:text-white text-dark lg:h4 m-0 text-truncate-4 text-start">
                                                                    <a class="text-none hover:text-primary duration-150" href="{{ route('bytitle', ['slug' => $olahraga->slug]) }}">
                                                                        {{ $olahraga->title }}
                                                                    </a>
                                                                </h5>
                                                                <p class="fs-6 opacity-60 text-truncate-2 text-start">
                                                                    {!! Str::limit($olahraga->content, 100) !!}
                                                                </p>
                                                            </div>
                                                        </article>
                                                    </div>
                                                @else
                                                    <div class="panel">
                                                        <article class="post type-post panel">
                                                            <div class="row child-cols g-3" data-uc-grid>
                                                                <div class="col">
                                                                    <div class="post-header panel vstack justify-between gap-1 text-end">
                                                                        <div class="post-meta panel hstack justify-end gap-2 fs-7 fw-medium text-gray-900 dark:text-white text-opacity-60 d-none md:d-flex z-1">
                                                                            <div>
                                                                                <div class="post-category hstack gap-narrow fw-medium">
                                                                                    <a class="text-none text-primary dark:text-white" href="{{ route('bycategory', ['categorySlug' => $olahraga->kategori->slug]) }}">
                                                                                        {{ $olahraga->kategori->nama_kategori }}
                                                                                    </a>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <h6 class="post-title dark:text-white text-dark lg:h5 m-0 text-truncate-4">
                                                                            <a class="text-none hover:text-primary duration-150" href="{{ route('bytitle', ['slug' => $olahraga->slug]) }}">
                                                                                {{ $olahraga->title }}
                                                                            </a>
                                                                        </h6>
                                                                        <div class="post-date gap-narrow fs-7 text-gray-900 dark:text-white text-opacity-60">
                                                                            <span class="text-end">{{ $olahraga->created_at->diffForHumans() }}</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-auto">
                                                                    <div class="post-media panel uc-transition-toggle overflow-hidden max-w-150px min-w-100px lg:min-w-150px">
                                                                        <div class="featured-image bg-gray-25 dark:bg-gray-800 ratio ratio-16x9">
                                                                            @if (!empty($olahraga->gambar) && is_array($olahraga->gambar))
                                                                                @php
                                                                                    $firstImage = $olahraga->gambar[0];
                                                                                @endphp
                                                                                <img class="media-cover image uc-transition-scale-up uc-transition-opaque rounded"
                                                                                     src="{{ asset('storage/' . $firstImage) }}"
                                                                                     data-src="{{ asset('storage/' . $firstImage) }}"
                                                                                     alt="{{ $olahraga->title }}"
                                                                                     data-uc-img="loading: lazy" />
                                                                            @endif
                                                                        </div>
                                                                        <a href="{{ route('bytitle', ['slug' => $olahraga->slug]) }}" class="position-cover"></a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </article>
                                                    </div>
                                                @endif
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="block-footer cstack lg:mt-2">
                                        <a href="{{ route('bycategory', ['categorySlug' => 'olahraga']) }}" class="animate-btn gap-0 btn btn-sm btn-alt-primary bg-transparent text-black dark:text-white border w-100">
                                            <span>Selengkapnya</span>
                                            <i class="icon fa-solid fa-arrow-right"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <!-- Iklan Section 1 start -->
                            <div class="section panel overflow-hidden">
                                <div class="section-outer panel p-5">
                                    <div class="container max-w-xl text-center">
                                        <div class="section-inner">
                                            <a class="text-none" href="#" target="_blank" rel="nofollow">
                                                <!-- Iklan untuk desktop -->
                                                <img class="mx-auto"
                                                    src="{{ asset('assets/images/common/ad-banner(970x250).jpg') }}"
                                                    alt="Ad slot" width="728" height="90">
                                                <!-- Leaderboard Banner Desktop -->
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Iklan Section 1 end -->
                            {{-- CATEGORY AWAL (OTOMOTIF) --}}
                            <div class="main-wrap panel vstack gap-3 lg:gap-6">
                                <div class="block-layout grid-layout vstack gap-2 panel overflow-hidden">
                                    <div class="block-header panel pb-1">
                                        <h2
                                            class="h5 ft-tertiary fw-bold ls-0 text-uppercase m-0 text-black dark:text-white position-relative underline-title">
                                            <strong class="dark:text-white">OTOMOTIF</strong>
                                        </h2>
                                    </div>
                                    <div class="block-content">
                                        <div class="row child-cols-12 g-2 lg:g-4 sep-x">
                                            @foreach ($postotomotif as $index => $otomotif)
                                                @if ($loop->first)
                                                    <div class="col-12">
                                                        <article class="post type-post panel vstack gap-1 lg:gap-2">
                                                            <div
                                                                class="post-media panel uc-transition-toggle overflow-hidden">
                                                                <div
                                                                    class="featured-image bg-gray-25 dark:bg-gray-800 overflow-hidden ratio ratio-16x9">
                                                                    @if (!empty($otomotif->gambar) && is_array($otomotif->gambar))
                                                                        @php
                                                                            $firstImage = $otomotif->gambar[0];
                                                                        @endphp
                                                                        <img class="media-cover image uc-transition-scale-up uc-transition-opaque rounded"
                                                                            src="{{ asset('storage/' . $firstImage) }}"
                                                                            data-src="{{ asset('storage/' . $firstImage) }}"
                                                                            alt="{{ $otomotif->title }}"
                                                                            data-uc-img="loading: lazy" />
                                                                    @endif
                                                                </div>
                                                                <a href="{{ route('bytitle', ['slug' => $otomotif->slug]) }}"
                                                                    class="position-cover"></a>
                                                            </div>
                                                            <div class="post-header panel">
                                                                <div
                                                                    class="post-meta panel hstack justify-start gap-1 fs-7 fw-medium text-gray-900 dark:text-white text-opacity-60 md:d-flex z-1">
                                                                    <div>
                                                                        <div
                                                                            class="post-category hstack gap-narrow fw-medium">
                                                                            <a class="text-none text-primary dark:text-white"
                                                                                href="{{ route('bycategory', ['categorySlug' => $otomotif->kategori->slug]) }}">
                                                                                {{ $otomotif->kategori->nama_kategori }}
                                                                            </a>
                                                                        </div>
                                                                    </div>
                                                                    <div class="sep md:d-block">❘</div>
                                                                    <div class="md:d-block">
                                                                        <div class="post-date hstack gap-narrow">
                                                                            <span>{{ $otomotif->created_at->diffForHumans() }}</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <h5
                                                                    class="post-title dark:text-white text-dark lg:h4 m-0 text-truncate-4">
                                                                    <a class="text-none hover:text-primary duration-150"
                                                                        href="{{ route('bytitle', ['slug' => $otomotif->slug]) }}">
                                                                        {{ $otomotif->title }}
                                                                    </a>
                                                                </h5>
                                                                <p class="fs-6 opacity-60 text-truncate-2">
                                                                    {!! Str::limit($otomotif->content, 70) !!}
                                                                </p>
                                                            </div>
                                                        </article>
                                                    </div>
                                                @else
                                                    <div class="panel">
                                                        <article class="post type-post panel">
                                                            <div class="row child-cols g-3" data-uc-grid>
                                                                <div class="col-auto">
                                                                    <div
                                                                        class="post-media panel uc-transition-toggle overflow-hidden max-w-150px min-w-100px lg:min-w-150px">
                                                                        <div
                                                                            class="featured-image bg-gray-25 dark:bg-gray-800 ratio ratio-16x9">
                                                                            @if (!empty($otomotif->gambar) && is_array($otomotif->gambar))
                                                                                @php
                                                                                    $firstImage = $otomotif->gambar[0];
                                                                                @endphp
                                                                                <img class="media-cover image uc-transition-scale-up uc-transition-opaque rounded"
                                                                                    src="{{ asset('storage/' . $firstImage) }}"
                                                                                    data-src="{{ asset('storage/' . $firstImage) }}"
                                                                                    alt="{{ $otomotif->title }}"
                                                                                    data-uc-img="loading: lazy" />
                                                                            @endif
                                                                        </div>
                                                                        <a href="{{ route('bytitle', ['slug' => $otomotif->slug]) }}"
                                                                            class="position-cover"></a>
                                                                    </div>
                                                                </div>
                                                                <div class="col">
                                                                    <div
                                                                        class="post-header panel vstack justify-between gap-1">
                                                                        <div
                                                                            class="post-meta panel hstack justify-start gap-2 fs-7 fw-medium text-gray-900 dark:text-white text-opacity-60 d-none md:d-flex z-1">
                                                                            <div>
                                                                                <div
                                                                                    class="post-category hstack gap-narrow fw-medium">
                                                                                    <a class="text-none text-primary dark:text-white"
                                                                                        href="{{ route('bycategory', ['categorySlug' => $otomotif->kategori->slug]) }}">
                                                                                        {{ $otomotif->kategori->nama_kategori }}
                                                                                    </a>
                                                                                </div>
                                                                            </div>
                                                                        </div>

                                                                        <h6
                                                                            class="post-title dark:text-white text-dark lg:h5 m-0 text-truncate-4">
                                                                            <a class="text-none hover:text-primary duration-150"
                                                                                href="{{ route('bytitle', ['slug' => $otomotif->slug]) }}">
                                                                                {{ $otomotif->title }}
                                                                            </a>
                                                                        </h6>

                                                                        <div
                                                                            class="post-date hstack gap-narrow fs-7 text-gray-900 dark:text-white text-opacity-60">
                                                                            <span>{{ $otomotif->created_at->diffForHumans() }}</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </article>
                                                    </div>
                                                @endif
                                            @endforeach
                                        </div>

                                    </div>
                                    <div class="block-footer cstack lg:mt-2">
                                        <a href="{{ route('bycategory', ['categorySlug' => 'otomotif']) }}"
                                            class="animate-btn gap-0 btn btn-sm btn-alt-primary bg-transparent text-black dark:text-white border w-100">
                                            <span>Selengkapnya</span>
                                            <i class="icon fa-solid fa-arrow-right"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            {{-- CATEGORY AWAL (DAERAH) --}}
                            <div class="main-wrap panel vstack gap-3 lg:gap-6 py-3">
                                <div class="block-layout grid-layout vstack gap-2 panel overflow-hidden">
                                    <div class="block-header panel pb-1">
                                        <h2 class="h5 ft-tertiary fw-bold ls-0 text-uppercase m-0 text-black dark:text-white position-relative underline-title">
                                            <strong class="dark:text-white">DAERAH</strong>
                                        </h2>
                                    </div>
                                    <div class="block-content">
                                        <div class="row child-cols-12 g-2 lg:g-4 sep-x">
                                            @foreach ($postdaerah as $index => $daerah)
                                                @if ($loop->first)
                                                    <div class="col-12">
                                                        <article class="post type-post panel vstack gap-1 lg:gap-2">
                                                            <div class="post-media panel uc-transition-toggle overflow-hidden">
                                                                <div class="featured-image bg-gray-25 dark:bg-gray-800 overflow-hidden ratio ratio-16x9">
                                                                    @if (!empty($daerah->gambar) && is_array($daerah->gambar))
                                                                        @php
                                                                            $firstImage = $daerah->gambar[0];
                                                                        @endphp
                                                                        <img class="media-cover image uc-transition-scale-up uc-transition-opaque rounded"
                                                                             src="{{ asset('storage/' . $firstImage) }}"
                                                                             data-src="{{ asset('storage/' . $firstImage) }}"
                                                                             alt="{{ $daerah->title }}"
                                                                             data-uc-img="loading: lazy" />
                                                                    @endif
                                                                </div>
                                                                <a href="{{ route('bytitle', ['slug' => $daerah->slug]) }}" class="position-cover"></a>
                                                            </div>
                                                            <div class="post-header panel">
                                                                <div class="post-meta panel hstack justify-start gap-1 fs-7 fw-medium text-gray-900 dark:text-white text-opacity-60 md:d-flex z-1">
                                                                    <div>
                                                                        <div class="post-category hstack gap-narrow fw-medium">
                                                                            <a class="text-none text-primary dark:text-white" href="{{ route('bycategory', ['categorySlug' => $daerah->kategori->slug]) }}">
                                                                                {{ $daerah->kategori->nama_kategori }}
                                                                            </a>
                                                                        </div>
                                                                    </div>
                                                                    <div class="sep md:d-block">❘</div>
                                                                    <div class="md:d-block">
                                                                        <div class="post-date text-start hstack gap-narrow">
                                                                            <span>{{ $daerah->created_at->diffForHumans() }}</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <h5 class="post-title dark:text-white text-dark lg:h4 m-0 text-truncate-4 text-start">
                                                                    <a class="text-none hover:text-primary duration-150" href="{{ route('bytitle', ['slug' => $daerah->slug]) }}">
                                                                        {{ $daerah->title }}
                                                                    </a>
                                                                </h5>
                                                                <p class="fs-6 opacity-60 text-truncate-2 text-start">
                                                                    {!! Str::limit($daerah->content, 100) !!}
                                                                </p>
                                                            </div>
                                                        </article>
                                                    </div>
                                                @else
                                                    <div class="panel">
                                                        <article class="post type-post panel">
                                                            <div class="row child-cols g-3" data-uc-grid>
                                                                <div class="col">
                                                                    <div class="post-header panel vstack justify-between gap-1 text-end">
                                                                        <div class="post-meta panel hstack justify-end gap-2 fs-7 fw-medium text-gray-900 dark:text-white text-opacity-60 d-none md:d-flex z-1">
                                                                            <div>
                                                                                <div class="post-category hstack gap-narrow fw-medium">
                                                                                    <a class="text-none text-primary dark:text-white" href="{{ route('bycategory', ['categorySlug' => $daerah->kategori->slug]) }}">
                                                                                        {{ $daerah->kategori->nama_kategori }}
                                                                                    </a>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <h6 class="post-title dark:text-white text-dark lg:h5 m-0 text-truncate-4">
                                                                            <a class="text-none hover:text-primary duration-150" href="{{ route('bytitle', ['slug' => $daerah->slug]) }}">
                                                                                {{ $daerah->title }}
                                                                            </a>
                                                                        </h6>
                                                                        <div class="post-date gap-narrow fs-7 text-gray-900 dark:text-white text-opacity-60">
                                                                            <span class="text-end">{{ $daerah->created_at->diffForHumans() }}</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-auto">
                                                                    <div class="post-media panel uc-transition-toggle overflow-hidden max-w-150px min-w-100px lg:min-w-150px">
                                                                        <div class="featured-image bg-gray-25 dark:bg-gray-800 ratio ratio-16x9">
                                                                            @if (!empty($daerah->gambar) && is_array($daerah->gambar))
                                                                                @php
                                                                                    $firstImage = $daerah->gambar[0];
                                                                                @endphp
                                                                                <img class="media-cover image uc-transition-scale-up uc-transition-opaque rounded"
                                                                                     src="{{ asset('storage/' . $firstImage) }}"
                                                                                     data-src="{{ asset('storage/' . $firstImage) }}"
                                                                                     alt="{{ $daerah->title }}"
                                                                                     data-uc-img="loading: lazy" />
                                                                            @endif
                                                                        </div>
                                                                        <a href="{{ route('bytitle', ['slug' => $daerah->slug]) }}" class="position-cover"></a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </article>
                                                    </div>
                                                @endif
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="block-footer cstack lg:mt-2">
                                        <a href="{{ route('bycategory', ['categorySlug' => 'daerah']) }}" class="animate-btn gap-0 btn btn-sm btn-alt-primary bg-transparent text-black dark:text-white border w-100">
                                            <span>Selengkapnya</span>
                                            <i class="icon fa-solid fa-arrow-right"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            {{-- BATAS TAMBAH CATEGORY BARU --}}
                        </div>

                        <div class="md:col-3" style="z-index: 2">
                            <div class="sidebar-wrap panel vstack gap-2 pb-2"
                                data-uc-sticky="end: .content-wrap; offset: 150; media: @m;">
                                <div class="widget popular-widget vstack gap-2 p-2 border">
                                    <div class="widget-title text-center">
                                        <h5 class="fs-7 ft-tertiary text-primary-category text-uppercase m-0">Berita
                                            Terpopuler</h5>
                                    </div>
                                    <div class="widget-content">
                                        <div class="row child-cols-12 gx-4 gy-3 sep-x" data-uc-grid>
                                            @foreach ($postTerpopuler as $index => $populer)
                                                <div>
                                                    <article class="post type-post panel uc-transition-toggle">
                                                        <div class="row child-cols g-2 lg:g-3" data-uc-grid>
                                                            <div>
                                                                <div class="hstack items-start gap-3">
                                                                    <span
                                                                        class="h3 lg:h2 ft-tertiary fst-italic text-center text-primary m-0 min-w-24px">{{ $index + 1 }}</span>
                                                                    <div
                                                                        class="post-header panel vstack justify-between gap-1">
                                                                        <h3 class="post-title h6 m-0">
                                                                            <a class="text-none hover:text-primary duration-150"
                                                                                href="{{ route('bytitle', ['slug' => $populer->slug]) }}">{{ $populer->title }}</a>
                                                                        </h3>
                                                                        <div
                                                                            class="post-meta panel hstack justify-between fs-7 text-gray-900 dark:text-white text-opacity-60 d-none md:d-flex">
                                                                            <div class="meta">
                                                                                <div class="hstack gap-2">
                                                                                    <div>
                                                                                        <div
                                                                                            class="post-date hstack gap-narrow">
                                                                                            <span>{{ $populer->created_at->diffForHumans() }}</span>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="actions">
                                                                                <div class="hstack gap-1"></div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </article>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                                <div class="widget ad-widget vstack gap-2 text-center p-2 bg-ad">
                                    <div class="widget-title text-center">
                                        <h5 class="fs-7 ft-tertiary text-uppercase m-0 dark:text-dark">Advertisement</h5>
                                    </div>
                                    <div class="widgt-content">
                                        <a class="cstack max-w-300px mx-auto text-none" href="#" target="_blank"
                                            rel="nofollow">
                                            <img class="d-block dark:d-none"
                                                src="{{ asset('assets/images/common/ad-potrait-mobile(320x480).jpg') }}"
                                                alt="Ad slot">
                                            <img class="d-none dark:d-block"
                                                src="{{ asset('assets/images/common/ad-potrait-mobile(320x480).jpg') }}"
                                                alt="Ad slot">
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Section end -->


    <!-- Section start -->
    {{-- <div class="section panel overflow-hidden">
        <div class="section-outer panel py-2">
            <div class="container max-w-xl">
                <div class="section-inner">
                    <div class="row child-cols-12 lg:child-cols g-4 lg:g-6 col-match" data-uc-grid>
                        <div class="lg:col-8">
                            <div class="block-layout grid-layout vstack gap-2 lg:gap-3 panel overflow-hidden">
                                <div class="block-header panel pb-1">
                                    <h2
                                        class="h5 ft-tertiary fw-bold ls-0 text-uppercase m-0 text-black dark:text-white position-relative underline-title">
                                        <a href="{{ route('bycategory', ['categorySlug' => 'lifestyle']) }}"
                                            class="dark:text-white text-none">Lifestyle</a>
                                    </h2>
                                </div>
                                <div class="block-content">
                                    <div class="panel row child-cols-12 md:child-cols g-2 lg:g-4 col-match sep-y"
                                        data-uc-grid>
                                        @foreach ($postlifestyle as $index => $lifestyle)
                                            @if ($loop->first)
                                                <div class="col-12 md:col-6 order-0 md:order-1">
                                                    <div>
                                                        <article
                                                            class="post type-post panel uc-transition-toggle vstack gap-2 lg:gap-3 h-100 overflow-hidden rounded uc-dark">
                                                            <div class="post-media panel overflow-hidden h-100">
                                                                <div
                                                                    class="featured-image bg-gray-25 dark:bg-gray-800 h-100 d-none md:d-block">
                                                                    <canvas class="h-100 w-100"></canvas>
                                                                    @if (!empty($lifestyle->gambar) && is_array($lifestyle->gambar))
                                                                        @php
                                                                            $firstImage = $lifestyle->gambar[0];
                                                                        @endphp
                                                                        <img class="media-cover image uc-transition-scale-up uc-transition-opaque rounded"
                                                                            src="{{ asset('storage/' . $firstImage) }}"
                                                                            data-src="{{ asset('storage/' . $firstImage) }}"
                                                                            alt="{{ $lifestyle->title }}"
                                                                            data-uc-img="loading: lazy" />
                                                                    @endif
                                                                </div>
                                                                <div
                                                                    class="featured-image bg-gray-25 dark:bg-gray-800 ratio ratio-16x9 d-block md:d-none">
                                                                    @if (!empty($lifestyle->gambar) && is_array($lifestyle->gambar))
                                                                        @php
                                                                            $firstImage = $lifestyle->gambar[0];
                                                                        @endphp
                                                                        <img class="media-cover image uc-transition-scale-up uc-transition-opaque rounded"
                                                                            src="{{ asset('storage/' . $firstImage) }}"
                                                                            data-src="{{ asset('storage/' . $firstImage) }}"
                                                                            alt="{{ $lifestyle->title }}"
                                                                            data-uc-img="loading: lazy" />
                                                                    @endif
                                                                </div>
                                                            </div>
                                                            <div
                                                                class="position-cover bg-gradient-to-t from-black to-transparent opacity-90">
                                                            </div>
                                                            <div
                                                                class="post-header panel vstack justify-end items-start gap-1 p-2 sm:p-4 position-cover text-white">
                                                                <div
                                                                    class="post-date hstack gap-narrow fs-7 text-gray-900 dark:text-white text-opacity-60 d-none md:d-flex">
                                                                    <span>{{ $lifestyle->created_at->diffForHumans() }}</span>
                                                                </div>
                                                                <h6
                                                                    class="post-title m-0 max-w-600px text-white text-truncate-3">
                                                                    <a class="text-none text-white"
                                                                        href="{{ route('bytitle', ['slug' => $lifestyle->slug]) }}">{{ $lifestyle->title }}</a>
                                                                </h6>
                                                            </div>
                                                        </article>
                                                    </div>
                                                </div>
                                                <div class="order-1 md:order-0">
                                                    <div class="row child-cols-12 g-2 lg:g-4 sep-x" data-uc-grid>
                                                    @else
                                                        <div>
                                                            <article class="post type-post panel uc-transition-toggle">
                                                                <div class="row child-cols g-2 lg:g-3" data-uc-grid>
                                                                    <div>
                                                                        <div
                                                                            class="post-header panel vstack justify-between gap-1">
                                                                            <h6
                                                                                class="post-title text-dark dark:text-white m-0 text-truncate-4">
                                                                                <a class="text-none hover:text-primary duration-150"
                                                                                    href="{{ route('bytitle', ['slug' => $lifestyle->slug]) }}">{{ $lifestyle->title }}</a>
                                                                            </h6>
                                                                            <div
                                                                                class="post-meta panel hstack justify-start gap-1 mb-2 fs-7 fw-medium text-gray-900 dark:text-white text-opacity-60 d-none md:d-flex z-1">
                                                                                <div>
                                                                                    <div
                                                                                        class="post-category hstack gap-narrow fw-medium">
                                                                                        <a class="text-none text-primary dark:text-white"
                                                                                            href="{{ route('bycategory', ['categorySlug' => $lifestyle->kategori->slug]) }}">{{ $lifestyle->kategori->nama_kategori }}</a>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="sep d-none md:d-block">❘</div>
                                                                                <div class="d-none md:d-block">
                                                                                    <div
                                                                                        class="post-date hstack gap-narrow">
                                                                                        <span>{{ $lifestyle->created_at->diffForHumans() }}</span>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-auto">
                                                                        <div
                                                                            class="post-media panel overflow-hidden max-w-72px min-w-72px">
                                                                            <div
                                                                                class="featured-image bg-gray-25 dark:bg-gray-800 ratio ratio-1x1">
                                                                                @if (!empty($lifestyle->gambar) && is_array($lifestyle->gambar))
                                                                                    @php
                                                                                        $firstImage =
                                                                                            $lifestyle->gambar[0];
                                                                                    @endphp
                                                                                    <img class="media-cover image uc-transition-scale-up uc-transition-opaque rounded"
                                                                                        src="{{ asset('storage/' . $firstImage) }}"
                                                                                        data-src="{{ asset('storage/' . $firstImage) }}"
                                                                                        alt="{{ $lifestyle->title }}"
                                                                                        data-uc-img="loading: lazy" />
                                                                                @endif
                                                                            </div>
                                                                            <a href="{{ route('bytitle', ['slug' => $lifestyle->slug]) }}"
                                                                                class="position-cover"></a>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </article>
                                                        </div>
                                            @endif
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lg:col-4">
                    <div class="block-layout grid-layout vstack gap-2 lg:gap-3 panel overflow-hidden">
                        <div class="block-header panel pb-1">
                            <h2
                                class="h5 ft-tertiary fw-bold ls-0 text-uppercase m-0 text-black dark:text-white position-relative underline-title">
                                <a href="{{ route('bycategory', ['categorySlug' => 'teknologi']) }}"
                                    class="dark:text-white text-none">TEKNOLOGI</a>
                            </h2>
                        </div>
                        <div class="block-content">
                            <div class="row child-cols-12 g-2 lg:g-4 sep-x" data-uc-grid>
                                @foreach ($postteknologi as $teknologi)
                                    <div>
                                        <article class="post type-post panel uc-transition-toggle">
                                            <div class="row child-cols g-2 lg:g-3" data-uc-grid>
                                                <div>
                                                    <div class="post-header panel vstack justify-between gap-1">
                                                        <h6
                                                            class="post-title text-dark dark:text-white m-0 text-truncate-4">
                                                            <a class="text-none hover:text-primary duration-150"
                                                                href="{{ route('bytitle', ['slug' => $teknologi->slug]) }}">{{ $teknologi->title }}</a>
                                                        </h6>
                                                        <div
                                                            class="post-meta panel hstack justify-start gap-1 mb-2 fs-7 fw-medium text-gray-900 dark:text-white text-opacity-60 d-none md:d-flex z-1">
                                                            <div>
                                                                <div class="post-category hstack gap-narrow fw-medium">
                                                                    <a class="text-none text-primary dark:text-white"
                                                                        href="{{ route('bycategory', ['categorySlug' => $teknologi->kategori->slug]) }}">{{ $teknologi->kategori->nama_kategori }}</a>
                                                                </div>
                                                            </div>
                                                            <div class="sep d-none md:d-block">❘</div>
                                                            <div class="d-none md:d-block">
                                                                <div class="post-date hstack gap-narrow">
                                                                    <span>{{ $teknologi->created_at->diffForHumans() }}</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-auto">
                                                    <div class="post-media panel overflow-hidden max-w-72px min-w-72px">
                                                        <div
                                                            class="featured-image bg-gray-25 dark:bg-gray-800 ratio ratio-1x1">
                                                            @if (!empty($teknologi->gambar) && is_array($teknologi->gambar))
                                                                @php
                                                                    $firstImage = $teknologi->gambar[0];
                                                                @endphp
                                                                <img class="media-cover image uc-transition-scale-up uc-transition-opaque rounded"
                                                                    src="{{ asset('storage/' . $firstImage) }}"
                                                                    data-src="{{ asset('storage/' . $firstImage) }}"
                                                                    alt="{{ $teknologi->title }}"
                                                                    data-uc-img="loading: lazy" />
                                                            @endif
                                                        </div>
                                                        <a href="{{ route('bytitle', ['slug' => $teknologi->slug]) }}"
                                                            class="position-cover"></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </article>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div> --}}
    <!-- Section end -->


    <!-- Category Berita Terkini start -->
    <div class="section panel overflow-hidden">
        <div class="section-outer panel py-1 mb-5">
            <div class="container max-w-xl">
                <div class="section-inner">
                    <div class="block-layout grid-layout vstack gap-3 lg:gap-4 panel overflow-hidden">
                        <div class="block-header panel">
                            <div class="block-header panel pb-1">
                                <h2
                                    class="h5 ft-tertiary fw-bold ls-0 text-uppercase m-0 text-black dark:text-white position-relative underline-title">
                                    <strong class="dark:text-white">BERITA TERKINI</strong>
                                </h2>
                            </div>
                        </div>
                        <div class="block-content">
                            <div class="panel row child-cols-12 md:child-cols gy-4 md:gx-3 xl:gx-4">
                                <div class="col-12 md:col-6 lg:col-7">
                                    @foreach ($postTerkini as $index => $kini)
                                        @if ($loop->first)
                                            <div>
                                                <article class="post type-post panel vstack gap-1 lg:gap-2">
                                                    <div class="post-media panel uc-transition-toggle overflow-hidden">
                                                        <div
                                                            class="featured-image bg-gray-25 dark:bg-gray-800 overflow-hidden ratio ratio-16x9">

                                                            @if (!empty($kini->gambar) && is_array($kini->gambar))
                                                                @php
                                                                    $firstImage = $kini->gambar[0];
                                                                @endphp
                                                                <img class="media-cover image uc-transition-scale-up uc-transition-opaque rounded"
                                                                    src="{{ asset('storage/' . $firstImage) }}"
                                                                    data-src="{{ asset('storage/' . $firstImage) }}"
                                                                    alt="{{ $kini->title }}"
                                                                    data-uc-img="loading: lazy" />
                                                            @endif
                                                        </div>
                                                        <a href="{{ route('bytitle', ['slug' => $kini->slug]) }}"
                                                            class="position-cover"></a>
                                                    </div>
                                                    <div class="post-header panel">
                                                        <div
                                                            class="post-meta panel hstack justify-start gap-1 fs-7 fw-medium text-gray-900 dark:text-white text-opacity-60 md:d-flex z-1">
                                                            <div>
                                                                <div class="post-category hstack gap-narrow fw-medium">
                                                                    <a class="text-none text-primary dark:text-white"
                                                                        href="{{ route('bycategory', ['categorySlug' => $kini->kategori->slug]) }}">{{ $kini->kategori->nama_kategori }}</a>
                                                                </div>
                                                            </div>
                                                            <div class="sep md:d-block">❘</div>
                                                            <div class="md:d-block">
                                                                <div class="post-date hstack gap-narrow">
                                                                    <span>{{ $kini->created_at->diffForHumans() }}</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <h5
                                                            class="post-title dark:text-white text-dark lg:h4 m-0 text-truncate-4">
                                                            <a class="text-none hover:text-primary duration-150"
                                                                href="{{ route('bytitle', ['slug' => $kini->slug]) }}">{{ $kini->title }}</a>
                                                        </h5>
                                                        <p class="fs-6 opacity-60 text-truncate-2">
                                                            {!! Str::limit($kini->content, 100) !!}
                                                        </p>
                                                        <div
                                                            class="post-meta panel hstack justify-between fs-7 fw-medium text-gray-900 dark:text-white text-opacity-60 d-none md:d-flex">
                                                            <div class="meta">
                                                                <div class="hstack gap-2">
                                                                    <div>
                                                                        <div class="post-author hstack gap-1">
                                                                            <a href="{{ route('byauthor', ['slug' => $kini->user->slug]) }}"
                                                                                data-uc-tooltip="{{ $kini->user->name }}"><img
                                                                                    src="{{ asset('assets/images/avatars/icon-profile.webp') }}"
                                                                                    alt="{{ $kini->user->name }}"
                                                                                    class="w-24px h-24px rounded-circle"></a>
                                                                            <a href="{{ route('byauthor', ['slug' => $kini->user->slug]) }}"
                                                                                class="text-black dark:text-white text-none fw-bold">{{ $kini->user->name }}</a>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="actions">
                                                                <div class="hstack gap-1"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </article>
                                            </div>
                                </div>
                                <div>
                                    <div class="row child-cols-12 g-4 sep-x">
                                    @else
                                        <div>
                                            <article class="post type-post panel">
                                                <div class="row child-cols g-2" data-uc-grid>
                                                    <div class="col-auto">
                                                        <div
                                                            class="post-media panel uc-transition-toggle overflow-hidden max-w-150px min-w-100px lg:min-w-150px">
                                                            <div
                                                                class="featured-image bg-gray-25 dark:bg-gray-800 ratio ratio-16x9">
                                                                @if (!empty($kini->gambar) && is_array($kini->gambar))
                                                                    @php
                                                                        $firstImage = $kini->gambar[0];
                                                                    @endphp
                                                                    <img class="media-cover image uc-transition-scale-up uc-transition-opaque rounded"
                                                                        src="{{ asset('storage/' . $firstImage) }}"
                                                                        data-src="{{ asset('storage/' . $firstImage) }}"
                                                                        alt="{{ $kini->title }}"
                                                                        data-uc-img="loading: lazy" />
                                                                @endif
                                                            </div>
                                                            <a href="{{ route('bytitle', ['slug' => $kini->slug]) }}"
                                                                class="position-cover"></a>
                                                        </div>
                                                    </div>

                                                    <div>
                                                        <div class="post-header panel vstack justify-between gap-1">
                                                            <div
                                                                class="post-meta panel hstack justify-start gap-1 fs-7 fw-medium text-gray-900 dark:text-white text-opacity-60 d-none md:d-flex z-1">
                                                                <div>
                                                                    <div class="post-category hstack gap-narrow fw-medium">
                                                                        <a class="text-none text-primary dark:text-white"
                                                                            href="{{ route('bycategory', ['categorySlug' => $kini->kategori->slug]) }}">
                                                                            {{ $kini->kategori->nama_kategori }}
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <h6
                                                                class="post-title dark:text-white text-dark lg:h5 m-0 text-truncate-4">
                                                                <a class="text-none hover:text-primary duration-150"
                                                                    href="{{ route('bytitle', ['slug' => $kini->slug]) }}">
                                                                    {{ $kini->title }}
                                                                </a>
                                                            </h6>

                                                            <div
                                                                class="post-date hstack gap-narrow fs-7 text-gray-900 dark:text-white text-opacity-60">
                                                                <span>{{ $kini->created_at->diffForHumans() }}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </article>
                                        </div>
                                        @endif
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Category Berita Terkini End -->

    {{-- Iklan Bawah (Dekstop) --}}
    <div class="ad-banner" id="adBanner">
        <div class="ad-close">
            <button class="close-ad-btn" id="closeAdBtn">Tututp Iklan ✖</button>
        </div>
        <div class="ad-content">
            <p class="dark:text-dark">Advertisement</p>
            <img src="{{ asset('assets/images/common/ad-mobile(320x50).jpg') }}" alt="Advertisement" class="img-fluid">
        </div>
    </div>


    </div>

@endsection