{{-- demo1.html: center-nav, !bg-[#fff8ee], #fab758 vurgu --}}
<header class="relative wrapper !bg-[#fff8ee]">
  <nav class="navbar navbar-expand-lg center-nav transparent navbar-light">
    <div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
      <div class="navbar-brand w-full">
        <a href="{{ url('/') }}">
          <img src="{{ asset('assets/img/truncgil-yatay.svg') }}" alt="{{ setting('site_name', config('app.name')) }}" width="134" height="43" fetchpriority="high" decoding="async">
        </a>
      </div>
      <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
        <div class="offcanvas-header xl:!hidden lg:!hidden flex items-center justify-between flex-row p-6">
          <a href="{{ url('/') }}">
            <img class="!h-[2.2rem]" src="{{ asset('assets/img/truncgil-yatay-dark.svg') }}" alt="{{ setting('site_name', config('app.name')) }}" width="134" height="43" decoding="async">
          </a>
          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="{{ __('Close') }}"></button>
        </div>
        <div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
          <div class="xl:!hidden lg:!hidden w-full pb-4 mb-2 border-b border-[#e2e8f0]">
            @include('components.custom.language-selector', ['variant' => 'offcanvas'])
          </div>
          @include('components.custom.menu')
          <div class="offcanvas-footer xl:!hidden lg:!hidden !mt-auto">
            <div>
              @if(setting('contact_email'))
              <a href="mailto:{{ setting('contact_email') }}" class="link-inverse">{{ setting('contact_email') }}</a>
              <br>
              @endif
              @if(setting('contact_phone'))
              <a href="tel:{{ preg_replace('/\s+/', '', setting('contact_phone')) }}">{{ setting('contact_phone') }}</a>
              <br>
              @endif
              @php $social_media = json_decode(setting('social_links'), true) ?? []; @endphp
              <nav class="nav social social-white !mt-4">
                @if(!empty($social_media['Twitter']))
                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="{{ $social_media['Twitter'] }}" target="_blank" rel="noopener noreferrer" aria-label="{{ t('Twitter') }}"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]" aria-hidden="true"></i></a>
                @endif
                @if(!empty($social_media['Facebook']))
                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="{{ $social_media['Facebook'] }}" target="_blank" rel="noopener noreferrer" aria-label="{{ t('Facebook') }}"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]" aria-hidden="true"></i></a>
                @endif
                @if(!empty($social_media['Instagram']))
                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="{{ $social_media['Instagram'] }}" target="_blank" rel="noopener noreferrer" aria-label="{{ t('Instagram') }}"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]" aria-hidden="true"></i></a>
                @endif
                @if(!empty($social_media['Youtube']))
                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="{{ $social_media['Youtube'] }}" target="_blank" rel="noopener noreferrer" aria-label="{{ t('YouTube') }}"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]" aria-hidden="true"></i></a>
                @endif
              </nav>
            </div>
          </div>
        </div>
      </div>
      <div class="navbar-other w-full !flex !ml-auto header-language-desktop">
        <ul class="navbar-nav !flex-row !items-center !ml-auto">
          <li class="nav-item hidden xl:block lg:block md:block">
            @include('components.custom.language-selector')
          </li>
        
          <li class="nav-item xl:!hidden lg:!hidden">
            <button class="hamburger offcanvas-nav-btn" type="button" data-bs-toggle="offcanvas" data-bs-target=".offcanvas-nav" aria-label="{{ t('Menüyü aç') }}"><span></span></button>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

<script>
document.addEventListener('DOMContentLoaded', function () {
  var offcanvases = document.querySelectorAll('.offcanvas-nav');
  var hamburgers = document.querySelectorAll('.hamburger.offcanvas-nav-btn');
  if (offcanvases.length > 0 && hamburgers.length > 0) {
    offcanvases.forEach(function (oc) {
      oc.addEventListener('show.bs.offcanvas', function () {
        hamburgers.forEach(function (h) { h.classList.add('is-active'); });
      });
      oc.addEventListener('hide.bs.offcanvas', function () {
        hamburgers.forEach(function (h) { h.classList.remove('is-active'); });
      });
    });
  }
});
</script>