/* Baskı İşleri V17.3 — clean responsive designer layout.
   Loaded LAST. This file intentionally overrides historical designer rules. */

html{overflow-x:clip!important}
body.designer-page{
  width:100%!important;
  max-width:100%!important;
  overflow-x:clip!important;
  overflow-y:visible!important;
}
body.designer-page main,
body.designer-page .designer-section,
body.designer-page .designer-section>.container,
body.designer-page #designerApp{
  min-width:0!important;
  max-width:100%!important;
  overflow:visible!important;
  contain:none!important;
}
body.designer-page .designer-section>.container{
  width:min(1480px,calc(100% - 28px))!important;
  margin-inline:auto!important;
}
body.designer-page #designerApp{
  display:grid!important;
  align-items:start!important;
  gap:22px!important;
}
body.designer-page .designer-preview-panel,
body.designer-page .designer-controls,
body.designer-page .control-card{
  min-width:0!important;
  max-width:100%!important;
}
body.designer-page .designer-controls{display:grid!important;gap:16px!important}

/* Never allow the product tabs to make the sticky preview taller than the viewport. */
body.designer-page .designer-preview-panel .preview-toolbar{
  display:block!important;
  margin:0 0 10px!important;
  min-width:0!important;
}
body.designer-page .designer-preview-panel .product-tabs{
  display:flex!important;
  flex-wrap:nowrap!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  gap:7px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  padding:0 0 5px!important;
  margin:0!important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
  scrollbar-width:thin;
}
body.designer-page .designer-preview-panel .product-tab{
  flex:0 0 auto!important;
  min-width:max-content!important;
  white-space:nowrap!important;
  line-height:1.1!important;
}
body.designer-page .designer-preview-panel .preview-help,
body.designer-page .designer-preview-panel .print-note{display:none!important}
body.designer-page .designer-preview-panel .canvas-wrap{
  width:100%!important;
  max-width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
}
body.designer-page #designCanvas{
  display:block!important;
  width:auto!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  margin:auto!important;
}

/* Desktop: controls left, preview right. Preview always fits below sticky header. */
@media (min-width:1181px){
  body.designer-page #designerApp{
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important;
  }
  body.designer-page .designer-controls{
    grid-column:1!important;
    grid-row:1!important;
  }
  body.designer-page .designer-preview-panel{
    grid-column:2!important;
    grid-row:1!important;
    position:sticky!important;
    top:var(--bi-designer-top,118px)!important;
    align-self:start!important;
    width:100%!important;
    margin:0!important;
    padding:14px!important;
    z-index:900!important;
    background:#fff!important;
    border-radius:20px!important;
    box-shadow:0 14px 38px rgba(20,28,45,.08)!important;
  }
  body.designer-page .designer-preview-panel .product-tab{
    padding:8px 12px!important;
    font-size:11px!important;
  }
  body.designer-page .designer-preview-panel .canvas-wrap{
    height:clamp(340px,calc(100dvh - var(--bi-designer-top,118px) - 105px),650px)!important;
    min-height:0!important;
    max-height:none!important;
    border-radius:15px!important;
  }
}

/* Tablet / narrow desktop: single column, compact sticky preview. */
@media (min-width:721px) and (max-width:1180px){
  body.designer-page #designerApp{grid-template-columns:minmax(0,1fr)!important;gap:16px!important}
  body.designer-page .designer-preview-panel{
    grid-column:1!important;
    grid-row:auto!important;
    position:sticky!important;
    top:var(--bi-designer-top,8px)!important;
    align-self:start!important;
    width:min(100%,860px)!important;
    margin-inline:auto!important;
    padding:12px!important;
    z-index:900!important;
    background:#fff!important;
    border-radius:18px!important;
    box-shadow:0 12px 34px rgba(20,28,45,.10)!important;
  }
  body.designer-page .designer-controls{grid-column:1!important;grid-row:auto!important}
  body.designer-page .designer-preview-panel .product-tab{padding:8px 11px!important;font-size:10.5px!important}
  body.designer-page .designer-preview-panel .canvas-wrap{
    height:clamp(300px,46dvh,500px)!important;
    min-height:0!important;
    max-height:none!important;
    border-radius:14px!important;
  }
}

/* Phone + installed PWA: preview sticks to top, controls scroll underneath. */
@media (max-width:720px){
  body.designer-page .designer-section{padding-top:14px!important}
  body.designer-page .designer-section>.container{width:calc(100% - 14px)!important}
  body.designer-page #designerApp{
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
  }
  body.designer-page .designer-preview-panel{
    grid-column:1!important;
    grid-row:auto!important;
    position:sticky!important;
    top:max(0px,env(safe-area-inset-top))!important;
    left:auto!important;
    right:auto!important;
    align-self:start!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:8px!important;
    z-index:900!important;
    background:#fff!important;
    border-radius:0 0 15px 15px!important;
    box-shadow:0 10px 28px rgba(15,23,42,.16)!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    transform:none!important;
  }
  body.designer-page .designer-controls{
    grid-column:1!important;
    grid-row:auto!important;
    width:100%!important;
  }
  body.designer-page .designer-preview-panel .preview-toolbar{margin-bottom:5px!important}
  body.designer-page .designer-preview-panel .product-tabs{gap:5px!important;padding-bottom:4px!important;scrollbar-width:none}
  body.designer-page .designer-preview-panel .product-tabs::-webkit-scrollbar{display:none!important}
  body.designer-page .designer-preview-panel .product-tab{
    padding:7px 10px!important;
    font-size:10px!important;
    border-radius:999px!important;
  }
  body.designer-page .designer-preview-panel .canvas-wrap{
    height:clamp(205px,34dvh,315px)!important;
    min-height:0!important;
    max-height:none!important;
    border-radius:12px!important;
  }
  body.designer-page .mobile-edit-dock:not([hidden]){
    display:block!important;
    max-height:105px!important;
    overflow:auto!important;
    margin-top:5px!important;
    padding-top:5px!important;
  }
  body.designer-page .mobile-edit-head{margin-bottom:3px!important}
  body.designer-page .mobile-edit-head span{display:none!important}
  body.designer-page .mobile-edit-row{margin-top:3px!important}
  body.designer-page .control-card{
    width:100%!important;
    padding:14px!important;
    border-radius:16px!important;
  }
  body.designer-page .control-grid.two{grid-template-columns:minmax(0,1fr)!important}
  body.designer-page .preset-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* Very short phone windows (browser bars / landscape / small PWA viewport). */
@media (max-width:720px) and (max-height:700px){
  body.designer-page .designer-preview-panel .canvas-wrap{height:clamp(185px,29dvh,245px)!important}
  body.designer-page .mobile-edit-dock:not([hidden]){max-height:86px!important}
}

/* Safety: old V17.2 fallback classes must never switch the whole preview to fixed. */
body.designer-page .designer-preview-placeholder{display:none!important;height:0!important}
body.designer-page .designer-preview-panel.bi-preview-fixed-fallback{
  position:sticky!important;
  left:auto!important;
  right:auto!important;
  width:100%!important;
  max-width:100%!important;
}