/*


 * GlomaxGPT — Paylaşımlı Sayfa Layout Sistemi v1.0


 * ============================================================


 * Tüm sayfalarda ortak layout kurallarının tek kaynağı.


 * head_assets() içinde yüklenir.


 * Kapsam: app shell, sidebar, main-content, mobile header,


 *         tema geçişi, scroll, safe-area, touch targets


 * ============================================================


 */





/* ── 1. TEMEL RESET ── */


*, *::before, *::after { box-sizing: border-box; }


html, body { margin: 0; padding: 0; width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; }


body {


  font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);


  background: var(--bg-main, #ffffff);


  color: var(--text-primary, #1a1a1a);


  line-height: 1.5;


  -webkit-font-smoothing: antialiased;


  -moz-osx-font-smoothing: grayscale;


}


[data-theme="dark"] body { background: var(--bg-main, #111111); color: var(--text-primary, #f0f0f0); }





/* ── 2. TEMA GEÇİŞ ANİMASYONU ── */


html.theme-transitioning,


html.theme-transitioning *,


html.theme-transitioning *::before,


html.theme-transitioning *::after {


  transition: background-color 0.2s ease, color 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;


}





/* ── 3. APP SHELL ── */


.app-with-sidebar {


  display: flex !important;


  flex-direction: row !important;


  width: 100% !important;


  max-width: 100vw !important;


  height: 100dvh !important;


  overflow: hidden !important;


  background: var(--bg-main, #ffffff);


  position: relative;


}


[data-theme="dark"] .app-with-sidebar { background: var(--bg-main, #111111); }





/* ── 4. MAIN CONTENT ── */


.main-content, #main-content {


  flex: 1 1 0 !important;


  min-width: 0 !important;


  height: 100dvh !important;


  min-height: 0 !important;


  display: flex !important;


  flex-direction: column !important;


  overflow: hidden !important;


  background: var(--bg-main, #ffffff);


  position: relative;


}


[data-theme="dark"] .main-content,


[data-theme="dark"] #main-content { background: var(--bg-main, #111111); }





/* ── 5. SAYFA İÇİ SCROLL ALANLARI ── */


.page-main, .explore-main, .settings-main, .profile-main, .pricing-main,


.history-main, .images-main, .voice-main, .models-main, .tools-main,


.plugins-main, .projects-main, .support-main, .stats-main,


.subscription-main, .changelog-main, .favorites-main,


.notifications-main, .security-main, .files-main,


.scheduled-main, .prompt-library-main, .auth-page-wrap {


  flex: 1 1 0 !important;


  overflow-y: auto !important;


  overflow-x: hidden !important;


  -webkit-overflow-scrolling: touch !important;


  min-height: 0 !important;


  overscroll-behavior-y: contain;


}





/* ── 6. DESKTOP SIDEBAR ── */


@media (min-width: 769px) {


  .app-with-sidebar > aside.sidebar,


  .app-with-sidebar > .sidebar,


  body > aside.sidebar,


  body > .sidebar {


    position: sticky !important;


    top: 0 !important;


    height: 100dvh !important;


    align-self: flex-start !important;


    flex-shrink: 0 !important;


    width: var(--gx-sidebar-w, 260px) !important;


    min-width: var(--gx-sidebar-w, 260px) !important;


    overflow-y: auto !important;


    overflow-x: hidden !important;


    z-index: var(--z-sidebar, 400) !important;


  }


  .app-with-sidebar > aside.sidebar.collapsed,


  .app-with-sidebar > .sidebar.collapsed {


    width: var(--gx-sidebar-collapsed, 60px) !important;


    min-width: var(--gx-sidebar-collapsed, 60px) !important;


  }


}





/* ── 7. MOBİL SIDEBAR DRAWER ── */


@media (max-width: 768px) {


  .app-with-sidebar > aside.sidebar,


  .app-with-sidebar > .sidebar,


  body > aside.sidebar {


    position: fixed !important;


    top: 0 !important; left: 0 !important;


    width: min(85vw, 300px) !important;


    max-width: 300px !important;


    height: 100dvh !important;


    z-index: var(--z-sidebar, 400) !important;


    transform: translateX(-100%) !important;


    visibility: hidden !important;


    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), visibility 0.28s !important;


    overflow-y: auto !important;


    overflow-x: hidden !important;


  }


  .app-with-sidebar > aside.sidebar.open,


  .app-with-sidebar > .sidebar.open,


  body.sidebar-open > aside.sidebar,


  body.sidebar-open > .sidebar {


    transform: translateX(0) !important;


    visibility: visible !important;


    box-shadow: 4px 0 32px rgba(0,0,0,0.5) !important;


  }


  .main-content, #main-content { width: 100% !important; min-width: 0 !important; }


}


/* ── 8. SIDEBAR OVERLAY ── */


.sidebar-overlay, #sidebar-overlay {


  display: none !important;


  position: fixed !important;


  inset: 0 !important;


  background: rgba(0,0,0,0.55) !important;


  z-index: var(--z-overlay, 390) !important;


  cursor: pointer !important;


  backdrop-filter: blur(2px);


  -webkit-backdrop-filter: blur(2px);


  transition: opacity 0.25s ease !important;


}


body.sidebar-open .sidebar-overlay,


body.sidebar-open #sidebar-overlay { display: block !important; }





/* ── 9. MOBİL PAGE HEADER ── */


.mobile-page-header {


  display: none !important;


  align-items: center !important;


  justify-content: space-between !important;


  padding: 0 16px !important;


  height: 52px !important;


  min-height: 52px !important;


  flex-shrink: 0 !important;


  background: var(--bg-main, #ffffff) !important;


  border-bottom: 1px solid var(--border-subtle, #e8e8e8) !important;


  position: sticky !important;


  top: 0 !important;


  z-index: 110 !important;


  width: 100% !important;


}


[data-theme="dark"] .mobile-page-header {


  background: var(--bg-main, #111111) !important;


  border-bottom-color: var(--border-subtle, #2e2e2e) !important;


}


.mobile-page-header .mph-left,


.mobile-page-header .mph-right { display: flex !important; align-items: center !important; gap: 8px !important; }


.mobile-page-header .mph-title { font-size: .875rem !important; font-weight: 600 !important; color: var(--text-primary, #1a1a1a) !important; }


[data-theme="dark"] .mobile-page-header .mph-title { color: var(--text-primary, #f0f0f0) !important; }


@media (max-width: 768px) { .mobile-page-header { display: flex !important; } }





/* ── 10. HAMBURGER & HEADER BUTONLARI ── */


.mobile-hamburger, .mobile-header-btn {


  display: flex !important;


  align-items: center !important;


  justify-content: center !important;


  width: 40px !important; height: 40px !important;


  border-radius: 10px !important;


  background: none !important;


  border: none !important;


  color: var(--text-primary, #1a1a1a) !important;


  cursor: pointer !important;


  -webkit-tap-highlight-color: transparent !important;


  transition: background 0.12s !important;


  flex-shrink: 0 !important;


}


.mobile-hamburger:hover, .mobile-header-btn:hover { background: var(--bg-hover, rgba(0,0,0,0.06)) !important; }


[data-theme="dark"] .mobile-hamburger, [data-theme="dark"] .mobile-header-btn { color: var(--text-primary, #f0f0f0) !important; }


[data-theme="dark"] .mobile-hamburger:hover, [data-theme="dark"] .mobile-header-btn:hover { background: var(--bg-hover, rgba(255,255,255,0.08)) !important; }





/* ── 11. TOPBAR ── */


.topbar, #topbar, .gx-topbar {


  position: sticky !important;


  top: 0 !important;


  z-index: var(--z-topbar, 100) !important;


  height: var(--gx-topbar-h, 56px) !important;


  min-height: var(--gx-topbar-h, 56px) !important;


  flex-shrink: 0 !important;


  display: flex !important;


  align-items: center !important;


  width: 100% !important;


  background: var(--glass-bg, rgba(255,255,255,0.92)) !important;


  border-bottom: 1px solid var(--border-subtle, #e8e8e8) !important;


  backdrop-filter: blur(12px);


  -webkit-backdrop-filter: blur(12px);


}


[data-theme="dark"] .topbar,


[data-theme="dark"] #topbar,


[data-theme="dark"] .gx-topbar {


  background: var(--glass-bg, rgba(17,17,17,0.92)) !important;


  border-bottom-color: var(--border-subtle, #2e2e2e) !important;


}





/* ── 12. SCROLLBAR ── */


* { scrollbar-width: thin; scrollbar-color: var(--border2, #444444) transparent; }


*::-webkit-scrollbar { width: 5px; height: 5px; }


*::-webkit-scrollbar-track { background: transparent; }


*::-webkit-scrollbar-thumb { background: var(--border2, #444444); border-radius: 10px; }


[data-theme="light"] *::-webkit-scrollbar-thumb { background: var(--border2, #cccccc); }





/* ── 13. SAFE AREA — iPhone notch / home bar ── */


@supports (padding: max(0px)) {


  .app-with-sidebar {


    padding-left: env(safe-area-inset-left, 0px);


    padding-right: env(safe-area-inset-right, 0px);


  }


  .mobile-page-header {


    padding-left: max(16px, env(safe-area-inset-left, 0px)) !important;


    padding-right: max(16px, env(safe-area-inset-right, 0px)) !important;


  }


  .gx-composer-wrap, .voice-bottom-bar, .gx-input-wrap {


    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));


  }


}





/* ── 14. TABLET BREAKPOINT ── */


@media (min-width: 769px) and (max-width: 1024px) {


  .app-with-sidebar > aside.sidebar,


  .app-with-sidebar > .sidebar {


    width: 240px !important;


    min-width: 240px !important;


  }


}





/* ── 15. TOUCH TARGET — Minimum 44px (WCAG) ── */


@media (max-width: 768px) {


  button, a[role="button"], [role="button"] { min-height: 44px; }


  body { touch-action: pan-y; }


}





/* ── 16. REDUCED MOTION ── */


@media (prefers-reduced-motion: reduce) {


  *, *::before, *::after {


    animation-duration: 0.01ms !important;


    animation-iteration-count: 1 !important;


    transition-duration: 0.01ms !important;


    scroll-behavior: auto !important;


  }


}





/* ── 17. FOCUS VISİBİLİTY ── */


:focus-visible { outline: 2px solid var(--focus-ring, #333333); outline-offset: 2px; }


[data-theme="dark"] :focus-visible { outline-color: var(--focus-ring, #d4d4d4); }





/* ── 18. GENEL PAGE LAYOUT ── */


.page-layout {


  max-width: var(--gx-content-max, 860px);


  margin: 0 auto;


  padding: 32px 24px 100px;


  width: 100%;


}


@media (max-width: 768px) { .page-layout { padding: 20px 14px 80px; } }





/* ── 19. GX KART ── */


.gx-card {


  background: var(--bg-surface, var(--surface, #f5f5f5));


  border: 1px solid var(--border-default, var(--border, #e0e0e0));


  border-radius: 16px;


  padding: 24px;


  transition: box-shadow 0.15s ease, border-color 0.15s ease;


}


[data-theme="dark"] .gx-card { background: var(--bg-surface, #1a1a1a); border-color: var(--border-default, #2e2e2e); }


.gx-card:hover { box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.1)); }





/* ── 20. SWIPE GESTURE YARDIMCI ── */


@media (max-width: 768px) {


  .swipe-area { touch-action: pan-y; }


}