/**
 * Tek panel düzeni:
 * .app-layout > main#app-main > .page-shell > .page-shell__inner > {% block content %}
 * Ortalama ve max-width yalnızca .page-shell__inner; kabuk yüzeyi .page-shell.
 */

.app-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  position: relative;
  /* Dekorun (bg-shapes z-index 0) üstünde kalsın. Bootstrap modal + backdrop body’de ~1050;
     modal markup’ı bu kabın içinde kalırsa stacking yüzünden backdrop tüm sayfayı (modal dahil) kilitler
     — tabbed dashboard’da portal script ile body’e taşınıyor. */
  z-index: 2;
  box-sizing: border-box;
}

/* Ana sütun: cam kabuk .page-shell’de; main şeffaf taşıyıcı */
main#mainContent.app-main {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
}

/* global.css .main-content padding’i: yatay/alt burada; üst base’te (header) */
main#mainContent.app-main:not(.no-sidebar) {
  /* Sol: sidebar rail + gap. Sağ: aynı değer — dar sağ padding içeriği viewport ortasına göre sağa iter */
  padding-left: var(--tm-main-outer-pad-x-with-sidebar) !important;
  padding-right: var(--tm-main-outer-pad-x-with-sidebar) !important;
  padding-bottom: calc(var(--tm-layout-gap) + 2px) !important;
}

main#mainContent.app-main.no-sidebar {
  padding-left: var(--tm-layout-gap) !important;
  padding-right: var(--tm-layout-gap-right, 16px) !important;
  padding-bottom: calc(var(--tm-layout-gap) + 2px) !important;
}

/* --- Sayfa kabuğu (glass) — tüm panel içeriği --- */
.page-shell {
  position: relative;
  /* overflow:hidden sticky’yi kırar; yatay taşmayı kes, dikeyde görünür bırak */
  overflow-x: clip;
  overflow-y: visible;
  isolation: isolate;
  width: 100%;
  max-width: min(100%, var(--tm-page-shell-column-max));
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  min-height: calc(100vh - 28px);
  padding: var(--tm-page-pad);
  border-radius: var(--tm-page-shell-radius, 28px);
  background: var(--tm-page-shell-bg) !important;
  /* backdrop-filter kaldırıldı: her scroll/repaint’te tüm alt pikseli yeniden örnekler */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--tm-page-shell-border);
  box-shadow: var(--tm-page-shell-shadow);
}

.page-shell__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--tm-page-shell-inner-max, 1680px);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Doğrudan inner altında: yalnızca dikey ritim; genişlik/padding shell’de */
.page-shell__inner > .page-stack {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-sizing: border-box;
}

/* Dikey ritim (isteğe bağlı sarmalayıcı) */
.page-stack {
  display: flex;
  flex-direction: column;
  gap: var(--tm-section-gap);
  width: 100%;
  box-sizing: border-box;
}

/* Bootstrap kökü doğrudan inner içindeyse çift gutter olmasın */
.page-shell__inner > .container,
.page-shell__inner > .container-fluid {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Sayfa kök sınıfları: dış kutu shell; burada yatay/max-width/arka plan sıfırlanır */
.page-shell__inner .page-container,
.page-shell__inner .dashboard-wrapper,
.page-shell__inner .dashboard-page,
.page-shell__inner .content-wrapper,
.page-shell__inner .order-profit-page,
.page-shell__inner .order-analysis-page,
.page-shell__inner .wide-container,
.page-shell__inner .xml-page,
.page-shell__inner .xml-sources-page,
.page-shell__inner .xml-upload-page,
.page-shell__inner .module-page,
.page-shell__inner .brand-studio-page,
.page-shell__inner .buybox-control-module,
.page-shell__inner .app-container {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-sizing: border-box;
}

/* Hesap / mağaza sayfaları — aynı inner; dış wrapper şeffaf */
.page-shell__inner .account-page-wrapper,
.page-shell__inner .profile-page-wrapper,
.page-shell__inner .subscription-page-wrapper,
.page-shell__inner .shipping-page-wrapper,
.page-shell__inner .security-page-wrapper,
.page-shell__inner .notifications-page-wrapper,
.page-shell__inner .balance-page-wrapper,
.page-shell__inner .integration-page-wrapper,
.page-shell__inner .cart-page-wrapper,
.page-shell__inner .favorites-page-wrapper,
.page-shell__inner .orders-page-wrapper,
.page-shell__inner #pricing-page,
.page-shell__inner .pricing-page,
.page-shell__inner .xml-pricing-page {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-sizing: border-box;
}

/* XML ekleme: iç içe Bootstrap container ile dar sütun / çift gutter oluşmasın */
.page-shell__inner .xml-upload-page > .container,
.page-shell__inner .xml-upload-page > .container-fluid,
.page-shell__inner .xml-upload-page .container,
.page-shell__inner .xml-upload-page .container-fluid {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-sizing: border-box;
}

/* İç bölümler: kabuktan bir kademe daha opak (isteğe bağlı sınıf) */
.page-shell__inner .section-card,
.page-shell__inner .tm-section-card {
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #dbe5ef);
  border-radius: var(--radius-token-lg, 18px);
  box-shadow: var(--shadow-card, 0 8px 24px rgba(15, 23, 42, 0.06));
  box-sizing: border-box;
}

html.dark-mode .page-shell__inner .section-card,
html.dark-mode .page-shell__inner .tm-section-card {
  background: var(--color-surface, #1e293b);
  border-color: var(--color-border, #334155);
  box-shadow: var(--shadow-card, 0 6px 20px rgba(0, 0, 0, 0.2));
}

/* Üst site header — main ile aynı yatay şerit; .page-shell ile aynı sütun genişliği (ortada) */
/* Legacy: #tmv2App v2 shell’de üst şerit tm-header-v2; çift rail padding olmasın */
body:not(:has(#tmv2App)):has(main#mainContent.app-main:not(.no-sidebar)) .header-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding-left: var(--tm-main-outer-pad-x-with-sidebar) !important;
  padding-right: var(--tm-main-outer-pad-x-with-sidebar) !important;
  padding-top: 12px !important;
  padding-bottom: 10px !important;
  box-sizing: border-box !important;
}

body:not(:has(#tmv2App)):has(main#mainContent.app-main.no-sidebar) .header-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding-left: var(--tm-layout-gap) !important;
  padding-right: var(--tm-layout-gap-right, 16px) !important;
  padding-top: 12px !important;
  padding-bottom: 10px !important;
  box-sizing: border-box !important;
}

body:not(:has(#tmv2App)):has(main#mainContent.app-main) .header-bar {
  flex-shrink: 0 !important;
  width: min(100%, var(--tm-page-shell-column-max)) !important;
  max-width: min(100%, var(--tm-page-shell-column-max)) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  border-radius: var(--tm-page-shell-radius, 28px);
}

@media (max-width: 1024px) {
  main#mainContent.app-main:not(.no-sidebar) {
    padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
    padding-right: 10px !important;
  }

  body:not(:has(#tmv2App)):has(main#mainContent.app-main:not(.no-sidebar)) .header-wrapper {
    padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
    padding-right: 10px !important;
  }
}

@media (max-width: 768px) {
  main#mainContent.app-main:not(.no-sidebar) {
    padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
    padding-right: 8px !important;
    padding-bottom: 10px !important;
  }

  main#mainContent.app-main.no-sidebar {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body:not(:has(#tmv2App)):has(main#mainContent.app-main:not(.no-sidebar)) .header-wrapper,
  body:not(:has(#tmv2App)):has(main#mainContent.app-main.no-sidebar) .header-wrapper {
    padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
    padding-right: 8px !important;
  }

  .page-shell {
    border-radius: 18px;
    padding: max(12px, env(safe-area-inset-left, 12px));
  }
}

@media (prefers-contrast: more) {
  .page-shell {
    background: var(--tm-bg-primary) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--tm-border-color) !important;
    box-shadow: none !important;
  }

}