/* ============================================================
   Kıbrıstanbul — "Boyalı veya Değişen Parça" bileşeni (k-bdp)
   Bağımlılık: kibristanbul-tokens.css (önce yüklenmeli)
   Bootstrap 3.3.7 ile birlikte çalışır; tüm sınıflar k-bdp öneklidir.
   ============================================================ */

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

.k-bdp {
  /* Durum renkleri — dolgu (SVG/rozet), metin (ink), kenar (line) */
  --bdp-orijinal: #B3AEBF;      --bdp-orijinal-ink: #6C6779;  --bdp-orijinal-line: #8E889B;
  --bdp-lokal:    var(--k-amber-500);  --bdp-lokal-ink: var(--k-amber-700);  --bdp-lokal-line: var(--k-amber-700);
  --bdp-boyali:   var(--k-purple-500); --bdp-boyali-ink: var(--k-purple-600); --bdp-boyali-line: var(--k-purple-800);
  --bdp-degisen:  var(--k-danger);     --bdp-degisen-ink: var(--k-danger);    --bdp-degisen-line: #8E0C1C;
  position: relative;
  font-family: var(--k-font);
  font-size: 14px;
  line-height: 20px;
  color: var(--k-text);
}

/* data-status taşıyan her öğe kendi renk değişkenlerini alır */
.k-bdp [data-status="orijinal"]     { --s: var(--bdp-orijinal); --s-ink: var(--bdp-orijinal-ink); --s-line: var(--bdp-orijinal-line); }
.k-bdp [data-status="lokal_boyali"] { --s: var(--bdp-lokal);    --s-ink: var(--bdp-lokal-ink);    --s-line: var(--bdp-lokal-line); }
.k-bdp [data-status="boyali"]       { --s: var(--bdp-boyali);   --s-ink: var(--bdp-boyali-ink);   --s-line: var(--bdp-boyali-line); }
.k-bdp [data-status="degisen"]      { --s: var(--bdp-degisen);  --s-ink: var(--bdp-degisen-ink);  --s-line: var(--bdp-degisen-line); }

/* ---------- Başlık ---------- */
.k-bdp__head { margin: 0 0 10px; }
.k-bdp__title { margin: 0; font-size: 17px; line-height: 24px; font-weight: 700; color: var(--k-purple-900); }
.k-bdp__req { color: var(--k-danger); margin-left: 2px; }
.k-bdp__status { display: inline-block; margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--k-text-muted); white-space: nowrap; }
.k-bdp__status.is-complete { color: var(--k-success); font-weight: 500; }

/* ---------- Kutu ---------- */
.k-bdp__box {
  position: relative;
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-r-lg);
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}
@media (min-width: 768px) {
  .k-bdp__box { grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); gap: 20px 24px; }
}
@media (min-width: 992px) {
  .k-bdp__box { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 20px 32px; }
}
.k-bdp.is-invalid .k-bdp__box { border-color: var(--k-danger); box-shadow: 0 0 0 3px var(--k-danger-bg); }

/* ---------- Diyagram ---------- */
.k-bdp__diagram { display: flex; flex-direction: column; gap: 12px; }

.k-bdp__legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.k-bdp__legend li { display: flex; align-items: center; gap: 6px; font-weight: 500; color: var(--s-ink); white-space: nowrap; }
.k-bdp__swatch { width: 14px; height: 14px; border-radius: 4px; background: var(--s); display: inline-block; flex-shrink: 0; }

.k-bdp__svg { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; overflow: visible; }
.k-bdp__wheels circle { fill: #DCD9E4; stroke: var(--k-n-300); stroke-width: 1.5; }
.k-bdp__lights rect { fill: #E9E7EE; stroke: var(--k-n-300); stroke-width: 1.5; pointer-events: none; }
.k-bdp__body { fill: #E9E7EE; stroke: var(--k-n-300); stroke-width: 1.5; }
.k-bdp__inner { fill: none; stroke: rgba(29,26,36,.16); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.k-bdp__markers { pointer-events: none; }

.k-bdp__part {
  fill: #E9E7EE;
  stroke: var(--k-n-300);
  stroke-width: 1.5;
  cursor: pointer;
  outline: none;
  transition: fill .15s, stroke .15s;
}
.k-bdp__part:hover, .k-bdp__part.is-hover { fill: var(--k-purple-100); stroke: var(--k-purple-700); }
.k-bdp__part:focus-visible { stroke: var(--k-amber-400); stroke-width: 3; }
.k-bdp__part[data-status] { fill: var(--s); stroke: var(--s-line); }
.k-bdp__part[data-status]:hover, .k-bdp__part[data-status].is-hover { stroke: var(--k-purple-900); stroke-width: 2.5; }

.k-bdp__marker { pointer-events: none; }
.k-bdp__marker circle { fill: #fff; stroke: var(--k-purple-700); stroke-width: 1.5; }
.k-bdp__marker text { font: 700 15px var(--k-font); fill: var(--k-purple-700); text-anchor: middle; dominant-baseline: central; }
.k-bdp__marker[data-status] circle { stroke: var(--s-line); }
.k-bdp__marker[data-status] text { fill: var(--s-ink); font-size: 11px; }

.k-bdp__counts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 24px; }
.k-bdp__chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: var(--k-r-pill);
  font-size: 12px; font-weight: 700; color: var(--s-ink); white-space: nowrap;
  background: var(--k-n-50); border: 1px solid var(--k-n-200);
}
.k-bdp__chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--s); }
.k-bdp__chip--ok { color: var(--k-success); background: var(--k-success-bg); border-color: transparent; }
.k-bdp__chip--ok::before { display: none; }

/* ---------- Açılır seçici (SVG parçasına tıklandığında) ---------- */
.k-bdp__pop {
  position: absolute;
  z-index: var(--k-z-dropdown);
  width: 248px;
  background: #fff;
  border: 1px solid var(--k-n-200);
  border-radius: var(--k-r-lg);
  box-shadow: var(--k-sh-lg);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.k-bdp__pop[hidden] { display: none; }
.k-bdp__pop-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 0 2px 8px; }
.k-bdp__pop-title { font-size: 14px; font-weight: 700; color: var(--k-purple-900); }
.k-bdp__pop-close {
  width: 32px; height: 32px; border: 0; border-radius: 6px; background: transparent;
  color: var(--k-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.k-bdp__pop-close svg { width: 16px; height: 16px; }
.k-bdp__pop-close:hover { background: var(--k-purple-50); color: var(--k-purple-700); }
.k-bdp__pop-close:focus-visible { outline: none; box-shadow: var(--k-focus); }
.k-bdp__pop-opts { display: flex; flex-direction: column; }
.k-bdp__pop-opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: 40px; padding: 0 8px;
  border: 0; border-radius: 6px; background: transparent;
  font: 500 14px var(--k-font); color: var(--k-text); text-align: left; cursor: pointer;
}
.k-bdp__pop-opt:hover { background: var(--k-purple-50); }
.k-bdp__pop-opt:focus-visible { outline: none; box-shadow: var(--k-focus); }
.k-bdp__pop-opt .dot { width: 14px; height: 14px; border-radius: 4px; background: var(--s); flex-shrink: 0; }
.k-bdp__pop-opt.is-active { background: var(--k-purple-100); font-weight: 700; }
.k-bdp__pop-opt.is-active::after { content: "✓"; margin-left: auto; color: var(--k-purple-700); font-weight: 700; }
.k-bdp__pop-field { padding: 4px 8px 0; }
.k-bdp__pop-ok {
  height: 40px; border: 0; border-radius: 6px; background: var(--k-purple-700); color: #fff;
  font: 700 14px var(--k-font); cursor: pointer; margin-top: 2px;
}
.k-bdp__pop-ok:hover { background: var(--k-purple-800); }
.k-bdp__pop-ok:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--k-amber-400); }

/* ---------- Alanlar (detay / not) ---------- */
.k-bdp__field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 500; color: var(--k-text-muted); margin: 0; }
.k-bdp__select, .k-bdp__input {
  width: 100%; height: 40px; padding: 0 10px;
  border: 1px solid var(--k-n-300); border-radius: 6px; background: #fff;
  font: 400 14px var(--k-font); color: var(--k-text);
}
.k-bdp__select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345404F' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; }
.k-bdp__select:disabled { background-color: var(--k-n-50); color: var(--k-text-muted); cursor: not-allowed; }
.k-bdp__input::placeholder { color: var(--k-text-muted); }
.k-bdp__select:focus, .k-bdp__input:focus { outline: none; border-color: var(--k-purple-700); box-shadow: 0 0 0 3px var(--k-purple-100); }
.k-bdp__note-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }

/* ---------- Tablo ---------- */
.k-bdp__table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 18px; background: transparent; }
.k-bdp__table thead th {
  height: 36px; padding: 0 4px;
  font-size: 13px; font-weight: 700; color: var(--k-purple-900);
  text-align: center; vertical-align: middle; white-space: nowrap;
}
.k-bdp__table thead th.k-bdp__th-name { text-align: left; padding-left: 8px; }
.k-bdp__table thead th.k-bdp__th-col { width: 60px; color: var(--s-ink); }
.k-bdp__table thead th.k-bdp__th-detail { width: 52px; border-left: 1px solid var(--k-n-100); }
.k-bdp__table .short { display: none; }

.k-bdp__table tbody tr[data-part] { border-top: 1px solid var(--k-n-100); }
.k-bdp__table tbody tr[data-part]:hover, .k-bdp__table tbody tr.is-hover { background: var(--k-purple-50); }
.k-bdp__table tbody th { font-weight: 500; text-align: left; padding: 4px 8px; color: var(--k-text); vertical-align: middle; }
.k-bdp__table tbody td { padding: 0; text-align: center; vertical-align: middle; }
.k-bdp__table tbody td.k-bdp__td-detail { border-left: 1px solid var(--k-n-100); }
.k-bdp__table tr.is-missing th { color: var(--k-danger); }
.k-bdp__table tr.is-missing th::after { content: "•"; margin-left: 6px; }

.k-bdp__radio {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 0 auto;
  border-radius: 6px; cursor: pointer; font-weight: 400;
}
.k-bdp__radio:hover { background: var(--k-purple-50); }
.k-bdp__radio input[type="radio"] {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  width: 22px; height: 22px; margin: 0; flex-shrink: 0;
  border: 2px solid var(--k-n-300); border-radius: 50%; background: #fff;
  cursor: pointer; transition: border .12s;
}
.k-bdp__radio input[type="radio"]:hover { border-color: var(--k-purple-400); }
.k-bdp__radio input[type="radio"]:focus-visible { outline: none; box-shadow: var(--k-focus); }
.k-bdp__radio input[type="radio"]:checked { border-width: 7px; border-color: var(--s-ink); }

.k-bdp__detail {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; border-radius: 6px;
  background: transparent; color: var(--k-text-muted); cursor: pointer;
}
.k-bdp__detail svg { width: 16px; height: 16px; }
.k-bdp__detail:hover { background: var(--k-purple-50); color: var(--k-purple-700); }
.k-bdp__detail:focus-visible { outline: none; box-shadow: var(--k-focus); }
.k-bdp__detail[aria-expanded="true"] { background: var(--k-purple-100); color: var(--k-purple-700); }
.k-bdp__detail.has-note { color: var(--k-purple-700); }
.k-bdp__detail.has-note::after { content: ""; position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--k-amber-400); }

.k-bdp__note td { padding: 0 8px 12px; }

/* ---------- "Parçası yok" onayı ---------- */
.k-bdp__none {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; margin: 0; padding-top: 6px;
  border-top: 1px solid var(--k-n-100);
  font-size: 15px; font-weight: 500; color: var(--k-text); cursor: pointer; user-select: none;
}
.k-bdp__none input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.k-bdp__none .box {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 4px;
  border: 1.5px solid var(--k-n-300); background: #fff; color: #fff;
  display: flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s;
}
.k-bdp__none .box svg { width: 13px; height: 13px; opacity: 0; }
.k-bdp__none input:checked + .box { background: var(--k-purple-700); border-color: var(--k-purple-700); }
.k-bdp__none input:checked + .box svg { opacity: 1; }
.k-bdp__none input:focus-visible + .box { box-shadow: var(--k-focus); }

/* ---------- Hata ---------- */
.k-bdp__error {
  grid-column: 1 / -1;
  display: flex; gap: 8px; align-items: flex-start;
  margin: -8px 0 0; font-size: 13px; line-height: 18px; color: var(--k-danger);
}
.k-bdp__error svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.k-bdp__error[hidden] { display: none; }

/* ---------- Durumlar ---------- */
.k-bdp.is-none .k-bdp__table, .k-bdp.is-none .k-bdp__legend, .k-bdp.is-none .k-bdp__counts { opacity: .45; pointer-events: none; }
.k-bdp.is-none .k-bdp__svg { opacity: .7; }
.k-bdp.is-none .k-bdp__part { pointer-events: none; cursor: default; }

.k-bdp.is-readonly .k-bdp__part { cursor: default; }
.k-bdp.is-readonly .k-bdp__part:hover { stroke-width: 1.5; }
.k-bdp.is-readonly .k-bdp__part:not([data-status]):hover { fill: #E9E7EE; stroke: var(--k-n-300); }
.k-bdp.is-readonly .k-bdp__part[data-status]:hover { stroke: var(--s-line); }
.k-bdp.is-readonly .k-bdp__marker:not([data-status]) { display: none; }

/* Salt okunur liste (ilan detayı) */
.k-bdp__list-title { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--k-purple-900); text-transform: uppercase; letter-spacing: .04em; }
.k-bdp__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.k-bdp__list li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--k-n-100); }
.k-bdp__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--s); flex-shrink: 0; margin-top: 4px; }
.k-bdp__list b { font-weight: 700; }
.k-bdp__list-status { color: var(--s-ink); font-weight: 700; margin-left: 6px; }
.k-bdp__list-note { font-size: 13px; color: var(--k-text-muted); margin-top: 2px; }
.k-bdp__list-empty, .k-bdp__list-foot { margin: 8px 0 0; font-size: 13px; color: var(--k-text-muted); }

/* ---------- Duyarlı ---------- */
@media (max-width: 991px) {
  .k-bdp__svg { max-width: 260px; }
}
@media (max-width: 575px) {
  .k-bdp__box { padding: 12px; }
  .k-bdp__table .full { display: none; }
  .k-bdp__table .short { display: inline; }
  .k-bdp__table thead th.k-bdp__th-col { width: 48px; font-size: 11px; padding: 0 1px; }
  .k-bdp__table thead th.k-bdp__th-detail { width: 44px; }
  .k-bdp__table tbody th { padding: 4px 6px; font-size: 13px; }
  .k-bdp__title { font-size: 16px; }
  .k-bdp__note-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Kıbrıstanbul tema entegrasyonu — yukarısı tasarım teslimiyle
   (design_handoff_boyali_degisen_parca) birebir aynıdır; yalnızca
   bu bölüm eklendi.
   Yukarıdaki kırılımlar EKRAN genişliğine bakar; ilan formunda ise
   bileşen sağ kenar çubuklu dar bir sütunda durur (1200px ekranda
   ~800px, 992–1199px ekranda ~660px). 300px şema + tablo o
   genişlikte parça adlarını iki satıra kırıyordu. Burada KAPSAYICI
   (temalar/kibristanbul/inc/boyali-degisen-parca.php içindeki
   .kibris-bdp-alan) genişliği esas alınır:
   - 700–959px: tasarımın 768–991 oranı (şema 240px, tablo sağda)
   - <700px: tek sütun (şema üstte ortalı, tablo altta)
   ============================================================ */
.kibris-bdp-alan { container-type: inline-size; margin-top: 8px; }
@container (min-width: 700px) and (max-width: 959px) {
  .k-bdp__box { grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); gap: 20px 24px; }
}
@container (max-width: 699px) {
  .k-bdp__box { grid-template-columns: 1fr; }
}