@extends('app.template.index')

@section('title', 'Berita')

@push('css')
    <style>
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(113, 113, 113, 0.423);
            z-index: 1;
        }

        .container {
            position: relative;
            z-index: 2;
            /* Pastikan konten berada di atas overlay */
        }

        .carousel {
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            width: 100%;
            margin: auto;
            background-color: #d0ecec;
        }

        .carousel-content {
            display: flex;
            transition: transform 0.3s ease-in-out;
            gap: 16px;
            padding: 16px;
        }

        .card {
            flex: 0 0 300px;
            background: #f9f9f9;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
            overflow: hidden;
        }

        .card img {
            width: 100%;
            height: 200px;
            padding-top: 3px;
            padding-left: 3px;
            padding-right: 3px;

            border-radius: 10px;
            object-fit: cover;
        }

        .card-content {
            padding: 16px;
        }

        .carousel-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: #01a19e;
            border: none;
            border-radius: 50%;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
            font-size: 1.5rem;
            /* Sesuaikan ukuran font */
            color: white;
            /* Tambahkan warna teks */
            padding-bottom: 7px;
        }

        .carousel-btn.prev {
            left: 10px;
            /* Posisi kiri */
        }

        .carousel-btn.next {
            right: 10px;
            /* Posisi kanan */
        }

        .carousel-btn:hover {
            background: #017c72;
        }

        /* Responsif untuk layar mobile */
        @media (max-width: 768px) {
            .carousel {
                padding: 15px;
            }

            .carousel-content {
                gap: 20px;
                /* Kurangi jarak antar kartu */
            }

            .card {
                width: 45%;
                /* Perbesar kartu untuk layar medium */
                padding: 8px;
            }

            .card img {
                width: 100%;
                /* Gambar memenuhi lebar kartu */
                margin-bottom: 8px;
            }

            .card-content {
                padding: 8px 0;
                /* Kurangi padding */
            }

            .carousel-btn {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                background: #01a19e;
                border: none;
                border-radius: 50%;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                cursor: pointer;
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 10;
                font-size: 1.5rem;
                /* Sesuaikan ukuran font */
                color: white;
                /* Tambahkan warna teks */
                padding-bottom: 7px;
            }
        }

        @media (max-width: 576px) {
            .carousel-content {
                gap: 15px;
                /* Kurangi jarak antar kartu lebih kecil */
            }

            .card {
                width: 80%;
                /* Perbesar lebar kartu untuk layar kecil */
                margin: 0 auto;
                /* Pusatkan kartu */
            }

            .carousel-btn {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                background: #01a19e;
                border: none;
                border-radius: 50%;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                cursor: pointer;
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 10;
                font-size: 1.5rem;
                /* Sesuaikan ukuran font */
                color: white;
                /* Tambahkan warna teks */
                padding-bottom: 7px;
            }

            .carousel-btn.prev {
                left: 5px;
            }

            .carousel-btn.next {
                right: 5px;
            }
        }

        .article-container {
            display: flex;
            align-items: flex-start;
            background-color: #fff;
            padding: 20px;
            margin: 20px 20px;
        }

        .image-wrapper {
            flex: 1;
            margin-right: 20px;
        }

        .image-wrapper img {
            width: 100%;
            height: auto;
            border-radius: 8px;
            object-fit: cover;
        }

        .content-wrapper {
            flex: 2;
            display: flex;
            flex-direction: column;
        }

        .content-wrapper h2 {
            font-size: 1.5rem;
            margin-bottom: 10px;
            color: #333;
        }

        .content-wrapper .date {
            font-size: 0.9rem;
            color: #666;
            margin-bottom: 10px;
        }

        .content-wrapper .description {
            font-size: 1rem;
            color: #555;
            margin-bottom: 20px;
            line-height: 1.5;
        }

        .read-more {
            padding: 10px 20px;
            background-color: #e0f7fa;
            color: #009688;
            border: none;
            border-radius: 5px;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .read-more:hover {
            background-color: #b2ebf2;
            color: #333;
        }

        @media (max-width: 576px) {
            .article-container {
                flex-direction: column;
                align-items: center;
                padding: 10px;
            }

            .image-wrapper {
                margin-right: 0;
                margin-bottom: 15px;
            }

            .content-wrapper {
                text-align: center;
            }
        }
    </style>
@endpush

@section('content')