/* Baskibu Designer 0.23.0-dev57 — compact mobile sheet + stable bottom nav + clean first open */

.bbd-app.bbd-pro-workspace-v0230-dev57 {
  --bbd-v57-nav-height: 68px;
  --bbd-v57-sheet-gap: 8px;
}

/* The canvas should open clean. The old "Tasarıma başlayın" card competes with
   the actual product surface and makes first open feel like another modal. */
.bbd-app.bbd-pro-workspace-v0230-dev57 #bbd-canvas-empty {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Compact navigation is driven by the editor's own layout state instead of a
   second CSS-only breakpoint. This prevents the 760px transition from leaving
   the rail half desktop / half mobile while the browser is being resized.
   -------------------------------------------------------------------------- */
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-workspace,
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-workspace,
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57.is-panel-collapsed .bbd-workspace,
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57.is-panel-collapsed .bbd-workspace {
  grid-template-columns: minmax(0,1fr) !important;
  grid-template-rows: minmax(0,1fr) !important;
}

.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar,
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar.bbd-premium-tool-rail,
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar.bbd-app-rail-v45,
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar,
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar.bbd-premium-tool-rail,
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar.bbd-app-rail-v45 {
  position: absolute !important;
  z-index: 9400 !important;
  inset: auto 0 0 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: var(--bbd-v57-nav-height) !important;
  min-height: var(--bbd-v57-nav-height) !important;
  display: grid !important;
  grid-template-columns: repeat(6,minmax(0,1fr)) !important;
  grid-template-rows: 1fr !important;
  grid-auto-flow: column !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 4px max(5px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left)) !important;
  overflow: visible !important;
  border: 0 !important;
  border-top: 1px solid #dfe5eb !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,.985) !important;
  box-shadow: 0 -10px 26px rgba(15,23,42,.10) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  contain: none !important;
}

.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar-active-indicator,
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-menu-rail-divider,
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar [data-bbd-menu-command],
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar-active-indicator,
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-menu-rail-divider,
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar [data-bbd-menu-command] {
  display: none !important;
}

.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool[data-bbd-v57-primary="0"],
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool[data-bbd-v57-primary="0"] {
  display: none !important;
}

.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool[data-bbd-v57-primary="1"],
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool[data-bbd-v57-primary="1"] {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 58px !important;
  min-height: 58px !important;
  display: flex !important;
  flex: 0 1 auto !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 5px 1px 4px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #667085 !important;
  box-shadow: none !important;
  transform: none !important;
}

.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool[data-bbd-v57-primary="1"]::before,
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool[data-bbd-v57-primary="1"]::before {
  display: none !important;
}

.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool[data-bbd-v57-primary="1"] svg,
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool[data-bbd-v57-primary="1"] svg {
  position: static !important;
  width: 19px !important;
  height: 19px !important;
  flex: 0 0 19px !important;
  margin: 0 !important;
}

.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool[data-bbd-v57-primary="1"] span,
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool[data-bbd-v57-primary="1"] span {
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: inherit !important;
  font-size: clamp(7px,2.25vw,8.2px) !important;
  font-weight: 760 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool[data-bbd-v57-primary="1"].is-active,
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool[data-bbd-v57-primary="1"].is-active {
  background: #fff1eb !important;
  color: #e54b14 !important;
}
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool[data-bbd-v57-primary="1"].is-active::after,
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool[data-bbd-v57-primary="1"].is-active::after {
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  left: 50% !important;
  width: 18px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: #ff5b1f !important;
  transform: translateX(-50%) !important;
}

.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-stage-area,
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-stage-area {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  padding-bottom: var(--bbd-v57-nav-height) !important;
}

/* --------------------------------------------------------------------------
   Phone: panel is a compact bottom sheet, not a second full-screen page.
   Canvas stays visible above it and the active panel scrolls internally.
   -------------------------------------------------------------------------- */
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-panel {
  position: absolute !important;
  z-index: 9350 !important;
  top: auto !important;
  right: var(--bbd-v57-sheet-gap) !important;
  bottom: calc(var(--bbd-v57-nav-height) + var(--bbd-v57-sheet-gap)) !important;
  left: var(--bbd-v57-sheet-gap) !important;
  width: auto !important;
  min-width: 0 !important;
  height: min(40dvh,330px) !important;
  min-height: min(220px,40dvh) !important;
  max-height: min(44dvh,360px) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid #dfe5eb !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.995) !important;
  box-shadow: 0 -16px 42px rgba(15,23,42,.16) !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-panel[hidden] {
  display: none !important;
}

.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-mobile-sheet-bar {
  position: relative !important;
  top: auto !important;
  z-index: 5 !important;
  min-height: 48px !important;
  display: grid !important;
  flex: 0 0 48px !important;
  grid-template-columns: 34px minmax(0,1fr) 34px !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 10px 6px !important;
  border-bottom: 1px solid #edf0f3 !important;
  background: #fff !important;
}
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-mobile-sheet-grip {
  top: 5px !important;
  width: 36px !important;
  height: 3px !important;
}
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 #bbd-mobile-sheet-back {
  visibility: hidden !important;
  pointer-events: none !important;
}
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 #bbd-mobile-sheet-title {
  overflow: hidden !important;
  color: #182230 !important;
  font-size: 12px !important;
  font-weight: 820 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 #bbd-mobile-sheet-close {
  grid-column: 3 !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: #f3f5f7 !important;
  color: #667085 !important;
  font-size: 20px !important;
}

.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-panel > .bbd-panel-section:not([hidden]) {
  min-height: 0 !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 10px 12px 14px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-panel > .bbd-panel-section[hidden] {
  display: none !important;
}
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-panel > .bbd-panel-edge-toggle {
  display: none !important;
}

/* Make the text panel immediately useful in the small sheet. */
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 [data-panel-content="text"] > h2 {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
}
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 [data-panel-content="text"] .bbd-text-mode-tabs,
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 [data-panel-content="text"] .bbd-search-field,
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 [data-panel-content="text"] .bbd-quick-add-row {
  margin-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   Tablet / narrow desktop: keep the same reliable full-width bottom nav, but
   use a floating side panel so the selected object remains visible.
   -------------------------------------------------------------------------- */
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-panel {
  position: absolute !important;
  z-index: 9350 !important;
  top: 74px !important;
  right: auto !important;
  bottom: calc(var(--bbd-v57-nav-height) + 10px) !important;
  left: 10px !important;
  width: min(360px,calc(100% - 20px)) !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid #dfe5eb !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.99) !important;
  box-shadow: 0 18px 48px rgba(15,23,42,.16) !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-panel[hidden] {
  display: none !important;
}
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-mobile-sheet-bar {
  min-height: 46px !important;
  display: grid !important;
  flex: 0 0 46px !important;
  grid-template-columns: 34px minmax(0,1fr) 34px !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 8px !important;
  border-bottom: 1px solid #edf0f3 !important;
  background: #fff !important;
}
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 #bbd-mobile-sheet-back {
  visibility: hidden !important;
  pointer-events: none !important;
}
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 #bbd-mobile-sheet-title {
  overflow: hidden !important;
  font-size: 12px !important;
  font-weight: 820 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 #bbd-mobile-sheet-close {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: #f3f5f7 !important;
  color: #667085 !important;
}
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-panel > .bbd-panel-section:not([hidden]) {
  min-height: 0 !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 12px 13px 16px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-panel > .bbd-panel-section[hidden],
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-panel > .bbd-panel-edge-toggle {
  display: none !important;
}

/* Preview should use the full compact viewport. */
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57.is-preview-mode .bbd-sidebar,
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57.is-preview-mode .bbd-panel,
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57.is-preview-mode .bbd-sidebar,
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57.is-preview-mode .bbd-panel {
  display: none !important;
}
.bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57.is-preview-mode .bbd-stage-area,
.bbd-modal[data-layout="drawer"] .bbd-app.bbd-pro-workspace-v0230-dev57.is-preview-mode .bbd-stage-area {
  padding-bottom: 0 !important;
}

@media (max-width:430px) {
  .bbd-app.bbd-pro-workspace-v0230-dev57 { --bbd-v57-nav-height: 64px; }
  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool[data-bbd-v57-primary="1"] {
    height: 54px !important;
    min-height: 54px !important;
  }
  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool[data-bbd-v57-primary="1"] span {
    font-size: 7px !important;
  }
  .bbd-modal[data-layout="bottom-sheet"] .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-panel {
    height: min(38dvh,300px) !important;
    min-height: min(210px,38dvh) !important;
    max-height: min(42dvh,320px) !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-panel,
  .bbd-app.bbd-pro-workspace-v0230-dev57 .bbd-sidebar .bbd-tool {
    transition: none !important;
  }
}