@extends('tema.layout.home_master')
@section('title')
    <title>{{ $seodata->baslik }}</title>
    <meta name="description" content="{{ $seodata->description }}">
    <meta name="keywords" content="{{ $seodata->keywords }}">
@endsection

@section('cssler')

    @php
        $paket_renk1 = $renkayar->paket_renk1;
        $paket_renk2 = $renkayar->paket_renk2;
        $paket_renk3 = $renkayar->paket_renk3;
        $paket_buton = $renkayar->paket_buton;
        $paketfiyatrenk = $renkayar->paketfiyatrenk;
       $paketiconrenk = $renkayar->paketiconrenk;





    @endphp

    <style>
        .accordion {
            width: 90%;
            max-width: 1000px;
            margin: 2rem auto;
        }
        .accordion-item {
            background-color: #fff;
            color: #111;
            margin: 1rem 0;
            border-radius: 0.5rem;
            box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
        }
        .accordion-item-header {
            padding: 0.5rem 3rem 0.5rem 1rem;
            min-height: 3.5rem;
            line-height: 1.25rem;
            font-weight: bold;
            display: flex;
            align-items: center;
            position: relative;
            cursor: pointer;
            border-radius: 5px 5px 0 0;
        }
        .accordion-item-header::after {
            content: "\002B";
            font-size: 2rem;
            position: absolute;
            right: 1rem;
        }
        .accordion-item-header.active::after {
            content: "\2212";
        }

        .accordion-item-header.active {
            background-color: #162172;
            color: white;

        }


        .accordion-item-body {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
        }
        .accordion-item-body-content {
            padding: 1rem;
            line-height: 1.5rem;
            border-top: 1px solid;
            border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
        }
        .pricing-one__inner ul{
            padding-left: 0;
            list-style: none;
            margin-top: 25px;
            margin-bottom: 0;
        }

        .pricing-one__inner ul li{
            text-align: left;
            list-style: none;
        }

        @media(max-width:767px) {
            html {
                font-size: 14px;
            }
        }

        .pricing-one__inner ul li{
            font-size: 18px;
            padding: 7px 0;
        }

        .pricing-one__inner ul li i{
            margin-right: 10px;
            font-size: 18px;

        }

        .pricing-one__inner ul li:nth-child(odd){
            background: #f9f9f9 !important;

        }



        .pricing-one__inner ul{
            padding-left: 0;
            list-style: none;
            margin-top: 25px;
            margin-bottom: 0;
        }

        .pricing-one__inner ul li{
            padding-left: 0;
            list-style: none;
        }

        @media(max-width:767px) {
            html {
                font-size: 14px;
            }
        }

        .pricing-one__inner ul li{
            font-size: 16px;
            padding: 7px 20px;
        }

        .pricing-one__inner ul li:nth-child(odd){
            background: #f9f9f9 !important;

        }
        .tab-content{
            margin-top: 50px;
        }



        .pricing-item {
            -webkit-box-shadow: 0px 11px 35px 5px rgba(196, 196, 196, 0.21);
            box-shadow: 0px 11px 35px 5px rgba(196, 196, 196, 0.21);
            background: #fff;
        }

        .pricing-item-header {
            padding: 25px;
            padding-bottom: 73px;
            text-align: center;
            border-radius: 0 0 15px 15px;
            position: relative;
        }

        .pricing-item-header h3 {
            font-size: 26px;
            color: #fff;
            font-weight: 600;
            text-transform: uppercase;
        }

        .pricing-header-icon {
            width: 100px;
            height: 100px;
            background: #fff;
            padding: 10px;
            border-radius: 10px;
            position: absolute;
            bottom: 0;
            left: 50%;
            -webkit-transform: translate(-50%, 50%);
            transform: translate(-50%, 50%);
        }

        .pricing-icon-inner {
            background: linear-gradient(160deg, {{$paket_renk1}} 0%, {{$paket_renk2}} 50%, {{$paket_renk3}} 100%);
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            border-radius: 10px;
        }

        .pricing-icon-inner i {
            font-size: 45px;
            color: #fff;
        }

        .pricing-icon-inner i:before {
            font-size: 45px;
        }

        .pricing-item-amount {
            padding: 25px;
            padding-top: 85px;
            margin-top: -10px;
            border-radius: 0 0 15px 15px;
        }

        .pricing-item-amount p {
            font-size: 18px;
            color: #2647c8;
        }

        .pricing-item-amount .pricing-item-amount-number {
            font-size: 49px;
            color: {{$paketfiyatrenk}};
            font-weight: 500;
        }

        .pricing-item-amount .pricing-item-amount-number small {
            font-size: 22px;
            font-weight: 500;
        }

        .pricing-item-amount .pricing-item-amount-number span {
            font-size: 22px;
        }

        .pricing-item-body {
            padding: 25px;
        }

        .pricing-item-body .btn {
            margin-top: 15px;
            margin-bottom: 5px;
        }

        .pricing-body-list li {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: start;
            -ms-flex-align: start;
            align-items: flex-start;
            font-size: 17px;
            color: {{$paketiconrenk}};
            margin-bottom: 10px;
        }

        .pricing-body-list li .pricing-check-icon {
            -webkit-box-flex: 0;
            flex: 0 0 20px;
            -ms-flex: 0 0 20px;
            max-width: 20px;
            width: 20px;
            color: {{$paketiconrenk}};
            margin-right: 10px;
        }

        .pricing-body-list li .pricing-check-icon i {
            font-size: 20px;
        }

        .pricing-body-list li .pricing-check-icon i:before {
            font-size: 20px;
        }

        .pricing-body-list li .pricing-info-icon {
            margin-left: 5px;
            color: {{$paketiconrenk}};
            -webkit-transition: all 0.3s linear;
            transition: all 0.3s linear;
            vertical-align: middle;
        }

        .pricing-body-list li .pricing-info-icon i {
            font-size: 20px;
        }

        .pricing-body-list li .pricing-info-icon i:before {
            font-size: 20px;
        }

        .pricing-body-list li .pricing-info-icon:hover {
            color: #2647c8;
        }

        .default-pricing-mt {
            margin-top: 30px;
        }

        .default-pricing-mt:nth-child(2) {
            margin-top: 0;
            position: relative;
            z-index: 1;
        }

        .info-card-inner {
            padding: 30px;
            -webkit-box-shadow: 0px 11px 35px 5px rgba(196, 196, 196, 0.21);
            box-shadow: 0px 11px 35px 5px rgba(196, 196, 196, 0.21);
            position: relative;
            border-radius: 3px;
        }

        .info-card-inner-2 {
            padding: 30px;
            border: 1px solid #d8d8d8;
            position: relative;
            border-radius: 3px;
        }

        .info-card-thumb {
            padding: 25px;
        }

        .info-card-thumb a {
            display: block;
        }

        .info-card-thumb img {
            width: 100%;
        }

        .info-card-thumb.info-card-thumb-hover {
            overflow: hidden;
        }

        .info-card-thumb.info-card-thumb-hover img {
            -webkit-transition: all 0.3s linear;
            transition: all 0.3s linear;
        }

        .info-card-thumb.info-card-thumb-hover:hover img {
            -webkit-transform: scale(1.05);
            transform: scale(1.05);
        }

        .info-card-thumb-two {
            padding: 25px 25px 0;
        }

        .info-card-thumb-two img {
            width: 100%;
        }

        .info-card-content {
            margin-top: 20px;
        }

        .info-card-content h3 {
            font-size: 24px;
            color: #000c35;
            margin-bottom: 15px;
        }

        .info-card-content p {
            font-size: 16px;
            margin-bottom: 15px;
        }

        .info-card-content p:last-child {
            margin-bottom: 0;
        }

        .info-card-content .news-entry-list {
            margin-bottom: 15px;
        }

        .info-card-content a {
            font-size: 17px;
            display: -ms-inline-flexbox;
            display: inline-flex;
        }

        .info-card-content a span {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            overflow: hidden;
            position: relative;
            color: #2647c8;
            -webkit-text-fill-color: #2647c8;
            display: -ms-inline-flexbox;
            display: inline-flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            margin-left: 10px;
        }

        .info-card-content a span:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #c8d1f1;
            opacity: 1;
            -webkit-transition: all 0.3s linear;
            transition: all 0.3s linear;
        }

        .info-card-content a span:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(160deg, #2647c8 0%, #142d99 50%, #02126A 100%);
            opacity: 0;
            -webkit-transition: all 0.3s linear;
            transition: all 0.3s linear;
        }

        .info-card-content a span i {
            position: relative;
            font-size: 19px;
            z-index: 1;
        }

        .info-card-content a:hover span {
            color: #fff;
            -webkit-text-fill-color: #fff;
        }

        .info-card-content a:hover span:before {
            opacity: 0;
        }

        .info-card-content a:hover span:after {
            opacity: 1;
        }

        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
            .info-card-content a span {
                color: #2647c8;
                -webkit-text-fill-color: #2647c8;

            }
        }
        .blue-gradient {
            background: linear-gradient(160deg, {{$paket_renk1}} 0%, {{$paket_renk2}} 50%, {{$paket_renk3}} 100%);
        }


        .bg-off-white {
            background: #e8ebf8;
        }


    </style>
@endsection

@section('main')




    <section class="page-header">
        <div style="background-image: url({{asset($bannerdata->resimyol)}});" class="background-image-banner"></div>
        <div class="container bannerdetay">
            <h2>{{$seodata->baslik}}</h2>
            <ul class="list-unstyled thm-breadcrumb">
                <li><a href="{{route('home')}}">Anasayfa</a></li>
                <li><span>{{$seodata->baslik}}</span></li>
            </ul><!-- /.list-unstyled thm-breadcrumb -->
        </div><!-- /.container -->
    </section><!-- /.page-header -->



    <section style="margin-top: 50px" class="pricing-one pricing-one__home-two">
        <div class="container">
            <div class="block-title text-center">
                <div class="block-title__line line-two"></div><!-- /.block-title__line -->
                <h3>{{$bayiicerik->baslik1}}</h3>
                <p>{{$bayiicerik->alticerik}}</p>
            </div><!-- /.block-title text-center -->


                <livewire:bayiekle :bayiozellikler="$bayiozellikler" :veri="$bayipaketler" />


        </div>
    </section>


    <section style="margin-top: 50px" class="pricing-one pricing-one__home-two">
        <div class="container">
            <div class="block-title text-center">
                <div class="block-title__line line-two"></div><!-- /.block-title__line -->
                <h3>{{$bayiicerik->baslik1}}</h3>
                <p>{{$bayiicerik->alticerik}}</p>
            </div><!-- /.block-title text-center -->






            <div class="row">
                <div class="col-lg-6 wow fadeInLeft">
                    <div class="about-three__content">
                        <div class="block-title text-left">
                            <div class="block-title__line"></div><!-- /.block-title__line -->
                            <h3>{{$bayiicerik->baslik2}}</h3>
                            <p>{!! $bayiicerik->alticerik2 !!}</p>
                        </div><!-- /.block-title text-center -->


                    </div><!-- /.about-three__content -->
                </div><!-- /.col-lg-6 -->
                <div class="col-lg-6 d-flex wow fadeInRight">
                    <div class="my-auto">
                        <div class="about-three__image">
                            <img style="width: 100%" src="{{asset($bayiicerik->resimyol)}}" alt="{{$bayiicerik->resimyol_alt}}">
                        </div><!-- /.about-three__image -->
                    </div><!-- /.my-auto -->
                </div><!-- /.col-lg-6 -->


            </div>


            <div class="row mt-5">

                <div class="col-lg-6 d-flex wow fadeInLeft order-md-1 order-2">
                    <div class="my-auto">
                        <div class="about-three__image">
                            <img style="width: 100%;" src="{{asset($bayiicerik->resimyol2)}}" alt="{{$bayiicerik->resimyol2_alt}}">
                        </div><!-- /.about-three__image -->
                    </div><!-- /.my-auto -->
                </div><!-- /.col-lg-6 -->

                <div class="col-lg-6 wow fadeInRight order-md-2 order-1">
                    <div class="about-three__content">
                        <div class="block-title text-left">
                            <div class="block-title__line"></div><!-- /.block-title__line -->
                            <h3>{{$bayiicerik->baslik3}}</h3>
                            <p>{!! $bayiicerik->alticerik3 !!}</p>
                        </div><!-- /.block-title text-center -->


                    </div><!-- /.about-three__content -->
                </div><!-- /.col-lg-6 -->


            </div>


            <div class="row mt-5">

                <div class="col-md-6 wow fadeInLeft">
                    <div style="margin-bottom: 5px" class="block-title text-center">
                        <h3>{{$bayiicerik->sssbaslik}}</h3>
                    </div><!-- /.block-title text-center -->
                    <div class="accordion">
                        @foreach($bayisssler as $sss)
                            <div class="accordion-item">
                                <div class="accordion-item-header">
                                    {{$sss->baslik}}
                                </div>
                                <div class="accordion-item-body">
                                    <div class="accordion-item-body-content">
                                        {{$sss->icerik}}
                                    </div>
                                </div>
                            </div>

                        @endforeach

                    </div>
                </div>

                <div class="col-lg-6 d-flex wow fadeInRight">
                    <div class="my-auto">
                        <div class="about-three__image">
                            <img style="width: 100%;" src="{{asset($bayiicerik->sssresimyol)}}" alt="{{$bayiicerik->sssresimyol_alt}}">
                        </div><!-- /.about-three__image -->
                    </div><!-- /.my-auto -->
                </div><!-- /.col-lg-6 -->




            </div>

        </div><!-- /.container -->
    </section><!-- /.pricing-one -->




@endsection


@section('jsler')
    <script>
        const accordionItemHeaders = document.querySelectorAll(".accordion-item-header");

        accordionItemHeaders.forEach(accordionItemHeader => {
            accordionItemHeader.addEventListener("click", event => {

                // Uncomment in case you only want to allow for the display of only one collapsed item at a time!

                const currentlyActiveAccordionItemHeader = document.querySelector(".accordion-item-header.active");
                if(currentlyActiveAccordionItemHeader && currentlyActiveAccordionItemHeader!==accordionItemHeader) {
                    currentlyActiveAccordionItemHeader.classList.toggle("active");
                    currentlyActiveAccordionItemHeader.nextElementSibling.style.maxHeight = 0;
                }

                accordionItemHeader.classList.toggle("active");
                const accordionItemBody = accordionItemHeader.nextElementSibling;
                if(accordionItemHeader.classList.contains("active")) {
                    accordionItemBody.style.maxHeight = accordionItemBody.scrollHeight + "px";
                }
                else {
                    accordionItemBody.style.maxHeight = 0;
                }

            });
        });
    </script>
@endsection
