.pdip{
  width:100%;
  max-width:1500px;
  margin:20px auto;
  border:1px solid #dfe3e8;
  border-radius:10px;
  overflow:hidden;
  background:#fff
}

.pdip-toolbar{
  display:flex;
  gap:6px;
  padding:8px 10px;
  border-bottom:1px solid #dfe3e8;
  background:#fafafa
}

.pdip-tool{
  min-width:38px;
  height:34px;
  border:1px solid #cfd4da;
  border-radius:6px;
  background:#fff;
  cursor:pointer
}

.pdip-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 400px;
  height:680px;
  max-height:680px;
  min-height:680px
}

.pdip-viewer{
  position:relative;
  overflow:hidden;
  background:#f7f8fa;
  touch-action:none;
  cursor:grab;
  user-select:none
}

.pdip-viewer:active{cursor:grabbing}

.pdip-canvas{
  position:absolute;
  left:50%;
  top:50%;
  width:595.276px;
  height:841.89px;
  transform-origin:center;
  margin:-420.945px 0 0 -297.638px;
  will-change:transform
}

.pdip-svg-wrap,.pdip-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%
}

.pdip-svg{overflow:visible}

.pdip-layer2 [data-id]{cursor:pointer}

.pdip-svg-selected{
  stroke:#d63638!important;
  stroke-width:2.5px!important;
  filter:drop-shadow(0 0 2px rgba(214,54,56,.8))
}

.pdip-list-panel{
  min-width:0;
  height:680px;
  min-height:0;
  display:flex;
  flex-direction:column;
  border-left:1px solid #dfe3e8;
  overflow:hidden
}

.pdip-list-header{
  display:flex;
  justify-content:space-between;
  padding:14px;
  border-bottom:1px solid #dfe3e8;
  flex:0 0 auto
}

.pdip-search-wrap{
  padding:10px;
  border-bottom:1px solid #dfe3e8;
  background:#fff;
  flex:0 0 auto
}

#pdip-search{
  width:100%;
  height:38px;
  box-sizing:border-box;
  padding:0 10px;
  border:1px solid #cfd4da;
  border-radius:6px;
  outline:none;
  transition:border-color .15s ease,box-shadow .15s ease
}

#pdip-search:focus{
  border-color:#2271b1;
  box-shadow:0 0 0 2px rgba(34,113,177,.12)
}

.pdip-list{
  height:0;
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:#b8bec6 transparent
}

.pdip-list::-webkit-scrollbar{width:7px}
.pdip-list::-webkit-scrollbar-track{background:transparent}
.pdip-list::-webkit-scrollbar-thumb{
  background:#b8bec6;
  border-radius:10px
}
.pdip-list::-webkit-scrollbar-thumb:hover{background:#8f969f}

.pdip-row{
  width:100%;
  display:grid;
  grid-template-columns:24px 48px minmax(0,1fr) 34px;
  gap:6px;
  align-items:center;
  text-align:left;
  padding:9px 10px;
  border:0;
  border-bottom:1px solid #eef0f2;
  background:#fff;
  cursor:pointer;
  box-sizing:border-box;
  transition:background-color .12s ease,box-shadow .12s ease
}

.pdip-row:hover{background:#f5f7f9}

.pdip-row.is-selected{
  background:#e7f1fa;
  box-shadow:inset 4px 0 #2271b1
}

.pdip-row.is-selected:hover{background:#e2eef8}

.pdip-check{
  width:20px;
  height:20px;
  border:1px solid #c8cdd2;
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:transparent
}

.pdip-row.is-selected .pdip-check{
  color:#fff;
  background:#2271b1;
  border-color:#2271b1
}

.pdip-pos{
  font-weight:700;
  font-size:13px
}

.pdip-info{
  min-width:0;
  display:flex;
  flex-direction:column
}

.pdip-partno,.pdip-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.pdip-partno{
  font-size:13px;
  font-weight:700;
  line-height:1.25
}

.pdip-name{
  font-size:12px;
  color:#667085;
  line-height:1.35;
  margin-top:2px
}

.pdip-qty{
  font-size:12px;
  text-align:right;
  color:#667085
}

.pdip-help{
  position:absolute;
  bottom:8px;
  left:10px;
  padding:5px 8px;
  background:rgba(255,255,255,.9);
  border:1px solid #dfe3e8;
  border-radius:5px;
  color:#667085;
  font-size:11px
}

/* ===== PARÇA DETAYI ===== */

.pdip-detail{
  flex:0 0 auto;
  border-top:1px solid #dfe3e8;
  background:#fff;
  padding:14px
}

.pdip-detail-title{
  font-size:16px;
  font-weight:700;
  margin-bottom:12px
}

.pdip-detail-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:7px
}

.pdip-detail-grid>div{
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  gap:10px;
  align-items:center;
  min-width:0
}

.pdip-detail-grid>div>span{
  color:#667085;
  font-size:13px;
  line-height:1.3
}

.pdip-detail-grid>div>strong{
  display:block;
  min-width:0;
  padding:7px 9px;
  border-radius:5px;
  background:#f5f6f8;
  font-size:13px;
  line-height:1.3;
  overflow-wrap:anywhere
}

.pdip-detail-grid .pdip-detail-wide{
  grid-template-columns:92px minmax(0,1fr)
}

/* İleride parça fotoğrafı için hazır önizleme alanı */
.pdip-detail-image{
  width:100%;
  min-height:150px;
  max-height:190px;
  margin-bottom:12px;
  border:1px solid #dfe3e8;
  border-radius:7px;
  background:#fafbfc;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden
}

.pdip-detail-image img{
  display:block;
  max-width:100%;
  max-height:180px;
  width:auto;
  height:auto;
  object-fit:contain
}

.pdip-detail-image.is-empty::before{
  content:"Parça fotoğrafı önizleme";
  color:#98a2b3;
  font-size:12px
}

.pdip-detail-image img[hidden]{display:none}

/* WooCommerce */
.pdip-detail-woo-test{margin-top:10px}

.pdip-cart-btn{
  display:inline-block;
  margin-top:10px;
  padding:9px 14px;
  border:0;
  border-radius:8px;
  background:#111827;
  color:#fff;
  font-weight:600;
  cursor:pointer
}

.pdip-cart-btn:hover{opacity:.9}

@media(max-width:1100px){
  .pdip-layout{
    grid-template-columns:minmax(0,1fr) 370px
  }
}

@media(max-width:900px){
  .pdip-layout{
    grid-template-columns:1fr;
    height:auto;
    max-height:none;
    min-height:0
  }

  .pdip-viewer{
    height:65vh;
    min-height:460px
  }

  .pdip-list-panel{
    height:45vh;
    min-height:300px;
    border-left:0;
    border-top:1px solid #dfe3e8
  }

  .pdip-detail{
    padding:12px
  }
}