{#
/**
 * @file
 * Template for the main page.
 */
#}
<div class="flex flex-col min-h-screen lg:pl-80">
  <!-- SECTION: HEADER START -->
  <header class="fixed top-0 left-0 right-0 z-[75] border-b border-base-200 bg-base-100">
    <!-- TOP UTILITY / ANNOUNCEMENT BAR -->
    <nav aria-label="Top Utility" class="navbar bg-base-100 border-b border-base-200 min-h-[32px] py-1 px-4 lg:pl-80 relative z-[100]">
      <!-- REGION START: header_top_start -->
      {% if page.header_top_start %}
        <div class="region region-header-top-start navbar-start flex-none justify-start gap-4 text-[9px] font-black uppercase tracking-widest text-base-content/60 w-auto">
          {{ page.header_top_start }}
        </div>
      {% endif %}
      <!-- REGION END: header_top_start -->
      <div class="flex-1"></div>
      <!-- REGION START: header_top_end -->
        <div class="region region-header-top-end navbar-end hidden lg:flex flex-none justify-end gap-3 lg:gap-5 w-auto">
          {{ page.header_top_end }}
          <div class="w-px h-3 bg-base-content/10"></div>
          <!-- BLOCK START: Theme Switcher -->
          <div id="block-theme-switcher">
            <label class="flex cursor-pointer gap-2 items-center opacity-60 hover:opacity-100 transition-opacity" aria-label="Tema Değiştir">
              <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="5" />
                <path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" />
              </svg>
              <input type="checkbox" id="theme-toggle" data-toggle-theme="dark,light" data-act-class="ACTIVECLASS" class="toggle toggle-primary scale-[0.6] -mx-1.5 theme-change-controller" />
              <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
              </svg>
            </label>
          </div>
          <!-- BLOCK END: Theme Switcher -->
        </div>
      <!-- REGION END: header_top_end -->
    </nav>

    <nav aria-label="Main Navigation" class="navbar w-full px-4 lg:pl-80 lg:pr-0">
      <!-- REGION START: header_main_start -->
      {% if page.header_main_start %}
        <div class="region region-header-main-start navbar-start flex-none justify-start w-auto gap-2 flex items-center px-0 lg:px-8">
          {{ page.header_main_start }}
        </div>
      {% endif %}
      <!-- REGION END: header_main_start -->

      <!-- REGION START: header_main_middle -->
      {% if page.header_main_middle %}
        <div class="region region-header-main-middle navbar-center flex-1 lg:hidden flex items-center justify-center">
          {{ page.header_main_middle }}
        </div>
      {% endif %}
      <!-- REGION END: header_main_middle -->

      <!-- Mobile Menu Toggle Checkbox & Overlay -->
      <input type="checkbox" id="unified-mobile-menu" class="peer hidden" aria-label="Mobil Menüyü Aç/Kapat" />
      <label for="unified-mobile-menu" class="fixed inset-0 bg-black/50 z-40 hidden peer-checked:block lg:hidden" aria-label="Menüyü Kapat"></label>

      <!-- Unified Responsive Navigation Menu (Mobile Drawer & Desktop Header) -->
      <div class="fixed inset-y-0 left-0 w-full bg-base-100 z-[200] -translate-x-full peer-checked:translate-x-0 transition-transform duration-300 ease-in-out lg:static lg:translate-x-0 lg:flex-1 lg:justify-center lg:bg-transparent lg:flex lg:flex-row lg:items-center lg:gap-1 lg:ml-0 lg:z-50 overflow-hidden lg:overflow-visible flex flex-col h-full">
        <!-- Mobile Menu Header (Standardized Stacked with Top Close) -->
        <div class="flex flex-col p-4 pb-0 lg:hidden sticky top-0 bg-base-100 z-10 shrink-0">
          <!-- TOP CLOSE BUTTON -->
          <div class="flex justify-end mb-2">
            <label for="unified-mobile-menu" class="btn btn-ghost btn-circle btn-sm">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </label>
          </div>
          <!-- REGIONS -->
          <!-- REGION START: navigation_drawer_top -->
          {% if page.navigation_drawer_top %}
            <div class="region region-navigation-drawer-top drawer-start mb-2">
              {{ page.navigation_drawer_top }}
            </div>
          {% endif %}
          <!-- REGION END: navigation_drawer_top -->
        </div>

        <!-- REGION START: navigation_drawer_middle -->
        {% if page.navigation_drawer_middle %}
          <div class="region region-navigation-drawer-middle drawer-middle flex-grow overflow-y-auto lg:overflow-visible flex flex-col lg:flex-row lg:items-center p-4 lg:p-0 w-full lg:w-auto">
            {{ page.navigation_drawer_middle }}
          </div>
        {% endif %}
        <!-- REGION END: navigation_drawer_middle -->

        <!-- REGION START: navigation_drawer_end -->
        {% if page.navigation_drawer_end %}
          <div class="region region-navigation-drawer-end drawer-end p-4 border-t border-base-200 lg:hidden mt-auto shrink-0 bg-base-50">
            <div class="flex items-center justify-between w-full">
              {{ page.navigation_drawer_end }}
            </div>
          </div>
        {% endif %}
        <!-- REGION END: navigation_drawer_end -->
      </div>

      <!-- REGION START: header_main_end -->
      {% if page.header_main_end %}
        <div class="region region-header-main-end navbar-end flex-none justify-end w-auto gap-3 items-center text-base-content/70 lg:pr-8">
          {{ page.header_main_end }}
        </div>
      {% endif %}
      <!-- REGION END: header_main_end -->
    </nav>
  </header>
  <!-- SECTION: HEADER END -->

  <!-- SECTION: MAIN CONTENT START -->
  <main id="main-content" class="region region-content flex-grow overflow-x-hidden pt-[105px] pb-20 px-4 lg:pb-0">
    {{ page.content }}
  </main>
  <!-- SECTION: MAIN CONTENT END -->

  <!-- SECTION: FOOTER START -->
  <!-- REGION START: footer_main -->
  {% if page.footer_main %}
    <footer class="region region-footer-main hidden md:block w-full bg-base-100 text-black">
      <div class="footer grid gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 p-4 lg:px-8 py-10 border-b border-base-200">
        {{ page.footer_main }}
      </div>

      <!-- FOOTER BOTTOM BAR -->
      <div class="flex flex-col lg:flex-row items-center justify-between p-4 lg:px-8 py-4 gap-4">
        <!-- Left: Payment Methods -->
        <!-- REGION START: footer_bottom_start -->
        {% if page.footer_bottom_start %}
          <div class="region region-footer-bottom-start w-full lg:w-auto">
            {{ page.footer_bottom_start }}
          </div>
        {% endif %}
        <!-- REGION END: footer_bottom_start -->

        <!-- Right: Copyright & 18+ Warning -->
        <!-- REGION START: footer_bottom_end -->
        {% if page.footer_bottom_end %}
          <div class="region region-footer-bottom-end w-full lg:w-auto text-left lg:text-right text-[10px] md:text-xs">
            {{ page.footer_bottom_end }}
          </div>
        {% endif %}
        <!-- REGION END: footer_bottom_end -->
      </div>
    </footer>
  {% endif %}
  <!-- SECTION: FOOTER START -->

  <aside aria-label="Sidebar Navigation" class="drawer lg:drawer-open fixed inset-0 pointer-events-none z-[200] lg:z-[100]">
    <input id="left-drawer" type="checkbox" class="drawer-toggle" aria-label="Sol Panel" />
    <div class="drawer-side">
      <label for="left-drawer" aria-label="close sidebar" class="drawer-overlay pointer-events-auto"></label>
      <div class="w-full lg:w-80 shrink-0 border-r border-base-200 bg-base-100 flex flex-col sticky top-0 h-full lg:h-screen overflow-hidden pointer-events-auto">
        <!-- DRAWER HEADER: TOP CLOSE + STACKED REGIONS -->
        <div class="flex flex-col p-4 pb-0 flex-grow overflow-hidden">
          <!-- TOP CLOSE BUTTON (MOBILE ONLY) -->
          <div class="flex justify-end mb-2 lg:hidden">
            <label for="left-drawer" class="btn btn-ghost btn-circle btn-sm">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </label>
          </div>
          <!-- REGION START: first_sidebar_start -->
          {% if page.first_sidebar_start %}
            <div class="drawer-start mb-4 flex flex-col items-center">
              {{ page.first_sidebar_start }}
            </div>
          {% endif %}
          <!-- REGION END: first_sidebar_start -->

          <!-- REGION START: first_sidebar_middle -->
          {% if page.first_sidebar_middle %}
            <div class="region region-first-sidebar-middle drawer-middle flex-grow overflow-y-auto mb-4">
              {{ page.first_sidebar_middle }}
            </div>
          {% endif %}
          <!-- REGION END: first_sidebar_middle -->

          <!-- REGION START: first_sidebar_end -->
          {% if page.first_sidebar_end %}
            <div class="region region-first-sidebar-end drawer-end mt-auto shrink-0 mb-4">
              {{ page.first_sidebar_end }}
            </div>
          {% endif %}
          <!-- REGION END: first_sidebar_end -->
        </div>
      </div>
    </div>
  </aside>
  <!-- END DRAWER: (LEFT SIDE) -->

  <!-- DRAWER: CART (RIGHT SIDE) -->
  <aside aria-label="Cart" class="drawer drawer-end fixed inset-0 pointer-events-none z-[100]">
    <input id="cart-drawer" type="checkbox" class="drawer-toggle" aria-label="Sepet Çekmecesini Aç/Kapat" />
    <div class="drawer-side">
      <label for="cart-drawer" class="drawer-overlay" aria-label="Sepeti Kapat"></label>
      <div id="block-cart-drawer" class="w-full sm:w-96 h-full overflow-hidden bg-base-100 shadow-2xl flex flex-col pt-4 pointer-events-auto">
        <!-- DRAWER HEADER: TOP CLOSE + STACKED REGIONS -->
        <div class="flex flex-col p-4 pb-0 flex-grow overflow-hidden">
          <!-- TOP CLOSE BUTTON -->
          <div class="flex justify-end mb-2">
            <label for="cart-drawer" class="btn btn-ghost btn-circle btn-sm">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </label>
          </div>
          <!-- REGION START: second_drawer_start -->
          {% if page.second_drawer_start %}
            <div class="region region-second-drawer-start drawer-start mb-4">
              {{ page.second_drawer_start }}
            </div>
          {% endif %}
          <!-- REGION END: second_drawer_start -->

          <!-- REGION START: second_drawer_middle -->
          {% if page.second_drawer_middle %}
            <div class="region region-second-drawer-middle drawer-middle flex-grow overflow-y-auto mb-4">
              {{ page.second_drawer_middle }}
            </div>
          {% endif %}
          <!-- REGION END: second_drawer_middle -->

          <!-- REGION START: second_drawer_end -->
          {% if page.second_drawer_end %}
            <div class="region region-second-drawer-end drawer-end mt-auto shrink-0 mb-4">
              {{ page.second_drawer_end }}
            </div>
          {% endif %}
          <!-- REGION END: second_drawer_end -->
        </div>
      </div>
    </div>
  </aside>
  <!-- DRAWER: CART (RIGHT SIDE) END -->
</div>
