/* ==========================================================================
   PLANLAYICI ARACLARI (oda + masa)

   Kaynak: eski temanin `tools.css`'i (v10 yedegi). Sinif adlari KORUNDU --
   tasinan motor (`planners.js`) onlara bagli. Yapilan tek sey token
   sozlesmesini V13'e cevirmek ve kapsami `.k-site .k-planner` yapmak.

   ⚠ MOBIL ONCELIKLI: uc sutunlu masaustu duzeni `@media (min-width: 1060px)`
     ile EKLENIR. Input'lar >=16px (iOS zorla yakinlastirmasin), dokunma
     hedefleri >=44px, sahne kendi kutusunda kayar.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Kök + sıfırlama (yalnız araç ağacı içinde)
   -------------------------------------------------------------------------- */

.k-site .k-planner {
  font-family: var(--font-sans);
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.55;
}

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

.k-site .k-planner button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  margin: 0;
  cursor: pointer;
}

.k-site .k-planner input {
  font-family: inherit;
}

/* ⚠⚠ `hidden` ÖZELLİĞİ ÇALIŞMIYORDU — ölçüldü, tahmin değil.
   Motor görünürlüğü `el.hidden = true` ile yönetiyor (`#sel-info`, `#btn-flip`,
   `#btn-chairs`, `#btn-desktool`, `#btn-rot`, `#btn-dup`). Bunun karşılığı
   tarayıcı sayfasındaki `[hidden] { display: none }` kuralı ve o kuralın
   özgüllüğü 0,1,0. Bizim `.k-site .k-planner .tb-btn { display: inline-flex }`
   ve `.k-site .k-planner .sel-info { display: flex }` kurallarımız 0,3,0 — yani
   `hidden` HER ZAMAN eziliyordu: hiçbir şey seçili değilken bile "Döndür ·
   Yön Değiştir · Koltukları Diz · Masa Üstünü Planla · Kopyala · Sil"
   satırı duruyordu. Masaüstünde göze fazlalık, mobilde ise 46dvh'lik tuval
   alanından kalıcı olarak bir satır çalıyordu.
   `!important` burada gerçekten gerekli: kural nereye konursa konsun aynı
   özgüllükteki `display` bildirimlerini yenmesi gerekiyor. */
.k-site .k-planner [hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   1. Yerleşim — MOBİL taban: tek sütun, sahne en üstte
   -------------------------------------------------------------------------- */

.k-site .k-planner .app {
  display: flex;
  flex-direction: column;
  border-block: 1px solid var(--border-hairline);
  min-width: 0;
}

.k-site .k-planner .col {
  padding: var(--space-5);
  min-width: 0;
}

/* Sahne mobilde önce gelir: kullanıcı önce ne yaptığını görür, sonra ayar yapar. */
.k-site .k-planner .canvas-col {
  order: -1;
  display: flex;
  flex-direction: column;
  background: var(--surface-subtle);
  min-width: 0;
}

/* Bölüm başlığı — `.k-label` dili: DM Sans 12px uppercase 500,
   letter-spacing NORMAL (sözleşme §4: uppercase'e tracking eklenmez). */
.k-site .k-planner .col h2 {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: normal;
  color: var(--text-tertiary);
  margin: var(--space-7) 0 var(--space-3);
}

.k-site .k-planner .col h2:first-child {
  margin-top: 0;
}

.k-site .k-planner .col h2 .count {
  color: var(--text-tertiary);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   2. Mobil akordiyon panelleri (<details>)
   -------------------------------------------------------------------------- */

.k-site .k-planner details.panel {
  border-top: 1px solid var(--border-hairline);
  min-width: 0;
}

.k-site .k-planner details.panel > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 52px;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: normal;
  color: var(--text-primary);
  cursor: pointer;
  transition: color var(--duration-base) var(--ease-standard);
}

.k-site .k-planner details.panel > summary::-webkit-details-marker {
  display: none;
}

.k-site .k-planner details.panel > summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--text-tertiary);
  border-bottom: 1.5px solid var(--text-tertiary);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--duration-base) var(--ease-standard);
}

.k-site .k-planner details.panel[open] > summary::after {
  transform: translateY(2px) rotate(225deg);
}

.k-site .k-planner details.panel > summary:hover {
  color: var(--brand-burgundy);
}

.k-site .k-planner details.panel > summary:hover::after {
  border-color: var(--brand-burgundy);
}

.k-site .k-planner details.panel .col {
  padding-top: 0;
}

/* --------------------------------------------------------------------------
   3. Kütüphane (sol sütun)
   -------------------------------------------------------------------------- */

.k-site .k-planner .search-wrap {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface-page);
  padding-block: var(--space-2) var(--space-4);
}

/* ⚠ 16px ALT SINIR — pazarlık dışı. Daha küçük bir input'a odaklanınca iOS
   Safari sayfayı otomatik yakınlaştırır ve kullanıcı geri uzaklaştıramaz.
   Kaynakta 13px'ti. */
.k-site .k-planner #search {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-chip);
  background: var(--surface-page);
  color: var(--text-primary);
  font-size: 1rem;
  line-height: 1.4;
  outline: none;
  transition: border-color var(--duration-base) var(--ease-standard);
  -webkit-appearance: none;
  appearance: none;
}

.k-site .k-planner #search::placeholder {
  color: var(--text-tertiary);
}

.k-site .k-planner #search:focus {
  border-color: var(--brand-burgundy);
}

.k-site .k-planner .obj-list {
  display: flex;
  flex-direction: column;
}

.k-site .k-planner .obj-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  text-align: left;
  font-size: 0.9rem;
  line-height: 1.35;
  transition: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.k-site .k-planner .obj-item:hover {
  background: var(--surface-subtle);
  border-color: var(--border-hairline);
}

.k-site .k-planner .obj-item:active {
  background: var(--surface-sunken);
}

.k-site .k-planner .obj-item .nm {
  font-weight: 500;
  min-width: 0;
}

/* ⚠ `.brd` YALNIZ masa aracında yaşar: oradaki markalar müşterinin KENDİ
   cihazları (monitör/klavye), tedarikçi markası değil. Oda planlayıcının
   mobilya veri setinden tedarikçi markası (`brand`) tamamen kaldırıldı ve
   bu sınıfı üreten kod orada silindi. */
.k-site .k-planner .obj-item .brd {
  color: var(--text-tertiary);
  font-size: 0.8rem;
  font-weight: 400;
}

.k-site .k-planner .obj-item .dim {
  margin-left: auto;
  flex: none;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  letter-spacing: normal;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.k-site .k-planner .empty-note {
  color: var(--text-tertiary);
  font-size: 0.9rem;
  padding: var(--space-3);
}

/* --------------------------------------------------------------------------
   4. Tuval araç çubuğu
   -------------------------------------------------------------------------- */

.k-site .k-planner .canvas-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-hairline);
  background: var(--surface-page);
}

/* `.k-btn--outline` dili, araç çubuğu ölçeğinde. Dokunma hedefi 44px. */
.k-site .k-planner .tb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-chip);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: normal;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

.k-site .k-planner .tb-btn:hover,
.k-site .k-planner .tb-btn:focus-visible {
  border-color: var(--brand-burgundy);
  color: var(--brand-burgundy);
}

  /* ⚠⚠ V10 — KOYU DOLGU KALDIRILDI. DS: "no button in this system ever has
     a black or dark fill, in any state, on any surface." Birincil buton
     --grey-150 zemin + mürekkep metin + --grey-200 hairline + pill yarıçap. */
.k-site .k-planner .tb-btn.primary {
  border-color: #dedee3;
  background: #e8e8ed;
  color: var(--text-primary);
  font-weight: 500;
  box-shadow: none;
}

.k-site .k-planner .tb-btn.primary:hover,
.k-site .k-planner .tb-btn.primary:focus-visible {
  border-color: #c7c7cc;
  background: #dedee3;
  color: var(--text-primary);
}

.k-site .k-planner .tb-btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}

.k-site .k-planner .tb-sep {
  flex: none;
  width: 1px;
  align-self: stretch;
  margin-inline: var(--space-2);
  background: var(--border-hairline);
}

.k-site .k-planner .tb-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding-inline: var(--space-2);
  font-size: 0.875rem;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.k-site .k-planner .tb-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--brand-burgundy);
  cursor: pointer;
}

/* Anlık ölçü — rozet kutusu DEĞİL, düz künye metni (çerçeve/dolgu yok). */
.k-site .k-planner .dim-badge {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: normal;
  color: var(--text-secondary);
  white-space: nowrap;
}

.k-site .k-planner .sel-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  width: 100%;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.k-site .k-planner .sel-info b {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--text-primary);
}

/* Taşma / kapı uyarı şeridi. ⚠ Kaynak pembe zemin + kırmızı çerçeveydi;
   aksan GENİŞ YÜZEY DOLGUSU olamaz → nötr zemin + tek aksan çubuğu. */
.k-site .k-planner .ovf {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-hairline);
  border-left: 3px solid var(--brand-burgundy);
  background: var(--surface-sunken);
  color: var(--brand-burgundy);
  font-size: 0.875rem;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   5. SVG sahne
   ⚠ Sahne kendi kutusunda kayar. Sayfa gövdesinde yatay kaydırma ASLA olmaz.
   -------------------------------------------------------------------------- */

.k-site .k-planner #stage-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  min-height: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.k-site .k-planner #stage {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 54vh;
  touch-action: none; /* sürükleme dokunmatikte sayfayı kaydırmasın */
  user-select: none;
  -webkit-user-select: none;
}

.k-site .k-planner #stage text {
  font-family: var(--font-sans);
}

/* --------------------------------------------------------------------------
   6. Sonuç sütunu — metrik, puan, hüküm
   -------------------------------------------------------------------------- */

.k-site .k-planner .metric-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-hairline);
}

.k-site .k-planner .metric-row .lbl {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.k-site .k-planner .metric-row .val {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: normal;
  white-space: nowrap;
}

.k-site .k-planner .metric-row .val small {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-tertiary);
}

/* Tek vurgulanan çıktı: önerilen ölçü. Aksan burada bir DURUM işareti
   ("aradığın sayı bu"), zemin dolgusu değil. */
.k-site .k-planner .metric-row.hero .val {
  font-size: 1.45rem;
  color: var(--brand-burgundy);
}

.k-site .k-planner .metric-row .val.sm {
  font-size: 1rem;
}

.k-site .k-planner .score-block {
  margin-top: var(--space-2);
}

.k-site .k-planner .score-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
}

.k-site .k-planner .score-num {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: normal;
}

.k-site .k-planner .score-status {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: normal;
  text-align: right;
}

.k-site .k-planner .bar {
  position: relative;
  height: 4px;
  margin: var(--space-3) 0 var(--space-2);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  overflow: hidden;
}

.k-site .k-planner .bar i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--text-primary);
  transition: width var(--duration-base) var(--ease-standard);
}

/* Hüküm kutusu — düz yüzey, çerçevesiz. Sorun varsa TEK aksan çubuğu. */
.k-site .k-planner .verdict {
  margin-top: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.k-site .k-planner .verdict.bad {
  border-left: 3px solid var(--brand-burgundy);
  color: var(--brand-burgundy);
}

/* --------------------------------------------------------------------------
   7. Ölçü kontrolleri (stepper) ve çipler
   -------------------------------------------------------------------------- */

.k-site .k-planner .size-ctrl {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-2) 0;
}

.k-site .k-planner .size-ctrl .lbl {
  width: 72px;
  flex: none;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.k-site .k-planner .size-ctrl .lbl.unit {
  width: auto;
}

.k-site .k-planner .stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-chip);
  background: var(--surface-page);
  overflow: hidden;
}

.k-site .k-planner .stepper button {
  width: 44px;
  height: 44px;
  flex: none;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--text-secondary);
  transition: background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.k-site .k-planner .stepper button:hover,
.k-site .k-planner .stepper button:focus-visible {
  background: var(--surface-sunken);
  color: var(--brand-burgundy);
}

.k-site .k-planner .stepper .num {
  width: 66px;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: normal;
}

.k-site .k-planner .chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.k-site .k-planner .chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: normal;
  transition: background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

.k-site .k-planner .chip:hover,
.k-site .k-planner .chip:focus-visible {
  border-color: var(--brand-burgundy);
  color: var(--brand-burgundy);
}

.k-site .k-planner .chip.active {
  border-color: #c7c7cc; /* V10: DS secili cip */
  background: #dedee3;
  color: var(--text-primary);
}

/* Ölçü karşılaştırma satırı (yalnız masa aracı) */
.k-site .k-planner .cmp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  text-align: left;
  font-size: 0.9rem;
  transition: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.k-site .k-planner .cmp-row:hover {
  background: var(--surface-subtle);
  border-color: var(--border-hairline);
}

.k-site .k-planner .cmp-row.current {
  border-color: var(--border-default);
}

.k-site .k-planner .cmp-row .sz {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: normal;
}

.k-site .k-planner .cmp-row .st {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.k-site .k-planner .cmp-row .st.warn {
  color: var(--brand-burgundy);
}

/* --------------------------------------------------------------------------
   8. Kurulum listesi, iç bağlantılar, açıklama, paylaşım
   -------------------------------------------------------------------------- */

.k-site .k-planner .setup-list {
  font-size: 0.9rem;
}

.k-site .k-planner .setup-list .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-hairline);
}

.k-site .k-planner .setup-list .rm {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  font-size: 1.15rem;
  line-height: 1;
  transition: color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}

.k-site .k-planner .setup-list .rm:hover,
.k-site .k-planner .setup-list .rm:focus-visible {
  background: var(--surface-sunken);
  color: var(--brand-burgundy);
}

/* Katalog / diğer araç bağlantısı — düz yüzey, çerçeve yok. */
.k-site .k-planner .kavela-link {
  display: block;
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-subtle);
  color: var(--text-primary);
  text-decoration: none;
  transition: background-color var(--duration-base) var(--ease-standard);
}

.k-site .k-planner .kavela-link:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.k-site .k-planner .kavela-link .go {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
  transition: color var(--duration-base) var(--ease-standard);
}

.k-site .k-planner .kavela-link:hover .go {
  color: var(--brand-burgundy);
}

.k-site .k-planner .kavela-link .sub {
  display: block;
  margin-top: 2px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.k-site .k-planner .legend {
  margin-top: var(--space-3);
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--text-tertiary);
}

.k-site .k-planner .legend i {
  display: inline-block;
  width: 14px;
  height: 3px;
  vertical-align: middle;
  margin-right: 4px;
}

.k-site .k-planner .legend i.crit {
  background: var(--brand-burgundy);
}

.k-site .k-planner .legend i.warn {
  background: var(--text-secondary);
}

/* ⚠ ÜÇÜNCÜ düğme (PDF) eklendiğinde `flex: 1` dar sonuç panelinde her hedefi
   ~90px'e sıkıştırıyordu — "Bağlantıyı Kopyala" taşıyordu. Artık sarıyor:
   sığmayan düğme alt satıra iner, dokunma hedefi (44px) korunur. Proje MOBİL
   ÖNCELİKLİ (~%90 mobil/iOS), o yüzden sıkıştırmak değil sarmak doğru. */
.k-site .k-planner .share-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.k-site .k-planner .share-row .tb-btn {
  flex: 1 1 8.75rem;
  min-width: 8.75rem;
}

/* Çıktı hazırlanırken düğme `disabled` + metni "Hazırlanıyor…" oluyor
   (bkz. `runExport`). Yeni kural gerekmiyor: `.tb-btn:disabled` zaten
   sönükleştirip tıklamayı kesiyor, `flex-basis` de genişliği sabitliyor. */

.k-site .k-planner .credit {
  margin-top: var(--space-3);
  font-size: 0.8rem;
  color: var(--text-tertiary);
}

/* Toast — sistemdeki ikinci gerçek gölge (--shadow-menu). Üçüncüsü icat edilmedi.

   ⚠⚠ GİZLENME ARTIK `transform`A BAĞLI DEĞİL — ölçülerek bulundu.
   Eski kural toast'ı yalnız `translateY(80px)` ile saklıyordu: "ekranın 80px
   altına it". Bu, `bottom: 22px` sabitken çalışan bir KAZAYDI, kural değil.
   §11'de sheet açıkken toast `bottom: calc(52dvh + 22px)`e çıkınca 80px'lik
   itiş artık ekran dışına çıkarmıyor; boş kutu ekranın tam ortasında koyu bir
   hap olarak beliriyordu (390×844'te ölçüldü: [179, 439, 211, 463]).

   Doğru kural: görünürlük OPAKLIK + `visibility` ile ifade edilir, konumla
   değil. `bottom` nereye giderse gitsin toast mesajsız boyanmaz.
   ⚠ `visibility` geçişi kasten gecikmeli: açılırken 0s (anında görünür),
   kapanırken `var(--duration-base)` (kaybolma animasyonu bitmeden düğüm yok olmasın). */
.k-site .k-planner #toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 1200;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-chip);
  background: var(--text-primary);
  color: var(--text-inverse);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  box-shadow: var(--shadow-3);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(80px);
  transition: transform var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard),
    visibility 0s linear var(--duration-base);
  pointer-events: none;
}

.k-site .k-planner #toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: transform var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard),
    visibility 0s;
}

/* ⚠ İKİNCİ KAPI, `.show`TAN SONRA gelmeli: içi boş bir toast, sınıfı ne olursa
   olsun boyanmaz. `:empty` ve `.show` aynı özgüllükte (0,3,1 + sözde-sınıf) —
   kazanan kaynak sırası. Motor önce `textContent` yazıp sonra `.show` eklediği
   için gerçek mesaj bundan etkilenmiyor. */
.k-site .k-planner #toast:empty {
  opacity: 0;
  visibility: hidden;
}

/* --------------------------------------------------------------------------
   9. Araç altındaki açıklama/SSS bloğu
   -------------------------------------------------------------------------- */

/* Araç sayfasının başlık bloğu — kırıntı yolundan sonra nefes payı. */
.k-site .k-planner-head {
  margin-top: var(--space-5);
}

.k-site .k-planner-doc {
  max-width: 68ch;
}

.k-site .k-planner-doc h2 {
  margin-top: var(--space-9);
  margin-bottom: var(--space-4);
}

.k-site .k-planner-doc h2:first-child {
  margin-top: 0;
}

.k-site .k-planner-doc h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: var(--space-7);
  margin-bottom: var(--space-2);
}

.k-site .k-planner-doc p {
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.k-site .k-planner-doc__table {
  max-width: 100%;
  overflow-x: auto;
  margin: var(--space-5) 0;
}

.k-site .k-planner-doc table {
  border-collapse: collapse;
  width: 100%;
  min-width: 380px;
  font-size: 0.9rem;
}

.k-site .k-planner-doc th {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: normal;
  text-align: left;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-default);
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  white-space: nowrap;
}

.k-site .k-planner-doc td {
  border-bottom: 1px solid var(--border-hairline);
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  color: var(--text-secondary);
}

.k-site .k-planner-doc td:first-child {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: normal;
  color: var(--text-primary);
  white-space: nowrap;
}

/* Araç indeksi kartları */
.k-site .k-plannercards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.k-site .k-plannercard {
  display: block;
  padding: var(--space-7);
  border-radius: var(--radius-xl);
  background: var(--surface-subtle);
  color: var(--text-primary);
  transition: background-color var(--duration-base) var(--ease-standard);
}

.k-site .k-plannercard:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.k-site .k-plannercard h2 {
  font-size: 1.28rem;
  margin-bottom: var(--space-3);
  transition: color var(--duration-base) var(--ease-standard);
}

.k-site .k-plannercard:hover h2 {
  color: var(--brand-burgundy);
}

.k-site .k-plannercard p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: var(--space-4);
}

.k-site .k-plannercard__go {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   10. MASAÜSTÜ — üç sütunlu düzen buradan İTİBAREN eklenir
   -------------------------------------------------------------------------- */

@media screen and (min-width: 1060px) {
  .k-site .k-planner .app {
    display: grid;
    grid-template-columns: 284px minmax(0, 1fr) 316px;
    min-height: 640px;
  }

  /* ⚠ `position: static` GERİ ALMA: mobil taban tuvali ekranın üstüne
     yapıştırıyor (§11). Üç sütunlu düzende yapışacak bir şey yok — tuval
     zaten kendi sütununun tamamı. */
  .k-site .k-planner .canvas-col {
    order: 0;
    position: static;
    height: auto;
    border-inline: 1px solid var(--border-hairline);
  }

  .k-site .k-planner details.panel {
    border-top: none;
    min-width: 0;
  }

  .k-site .k-planner details.panel > summary {
    display: none;
  }

  .k-site .k-planner details.panel .col {
    padding-top: var(--space-5);
  }

  .k-site .k-planner .col.library,
  .k-site .k-planner .col.results {
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }

  .k-site .k-planner .search-wrap {
    top: calc(var(--space-5) * -1);
  }

  .k-site .k-planner #stage-wrap {
    padding: var(--space-7);
    min-height: 420px;
  }

  .k-site .k-planner #stage {
    max-height: 72vh;
  }

  /* İnce işaretleme cihazında (fare) hedefler küçülebilir — dokunmatikte
     44px korunur. */
  .k-site .k-planner .tb-btn,
  .k-site .k-planner .chip,
  .k-site .k-planner .obj-item,
  .k-site .k-planner .setup-list .row {
    min-height: 36px;
  }

  .k-site .k-planner .tb-toggle {
    min-height: 36px;
  }

  .k-site .k-planner .stepper button {
    width: 38px;
    height: 38px;
  }

  .k-site .k-planner .setup-list .rm {
    width: 32px;
    height: 32px;
  }

  .k-site .k-planner .sel-info {
    width: auto;
    margin-left: auto;
  }

  .k-site .k-plannercards {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
  }
}

/* ==========================================================================
   11. MOBİL — YAPIŞIK TUVAL + ALT SHEET (bottom sheet)

   ⚠⚠ KULLANICI ŞİKÂYETİ (birebir): "room ve table planner yeterince mobile
   uyumlu değil, altta mobilya seçerken yerleştir butonu üstte kalıyor."

   Teşhis: mobilde düzen tek sütun ve AKIŞ hâlindeydi — tuval üstte, kütüphane
   akordiyonu altta. Kullanıcı kütüphaneye ulaşmak için aşağı kaydırınca hem
   TUVAL hem de tuval çubuğundaki birincil eylem ("Otomatik Yerleştir") ekranın
   dışında kalıyordu. Yani seçim yapılıyor ama sonucu da eylemi de görünmüyor.

   Çözüm üç parça:
     (a) Tuval ekranın üstüne YAPIŞIR (`position: sticky`) ve sabit yükseklik
         alır. Kütüphane kaydırılırken plan gözden kaybolmaz; eklenen mobilya
         anında görünür.
     (b) Kütüphane açıldığında akış öğesi değil ALT SHEET olur: ekranın alt
         yarısında sabit panel, kendi içi kayar.
     (c) Birincil eylem sheet'in İÇİNDE, en altta yapışık durur — başparmağın
         olduğu yerde. Sheet açıkken tuval çubuğundaki KOPYASI gizlenir; aynı
         eylem iki kez görünmez.

   ⚠ SCRIM (karartma katmanı) YOK — bilinçli. Sheet'in tek varlık sebebi
     "seçerken planı gör". Arkayı karartan bir katman tam da bu faydayı
     öldürürdü. Yan fayda: `position: fixed` + `backdrop-filter` tuzağına
     hiç girilmiyor (bu projede sabit katmanı bozduğu kayıtlı).

   ⚠ HOVER'A BAĞLI ETKİLEŞİM YOK. Headless Chrome `hover: none` /
     `pointer: coarse` bildiriyor; `@media (hover: hover)` ardına saklanan bir
     düğme hem gerçek dokunmatikte hem de masaüstü ekran görüntüsünde
     ERİŞİLEMEZ olur. Buradaki her eylem kalıcı ve tıklanabilir.

   ⚠ `100vh` YOK: iOS Safari'de adres çubuğu yüzünden taşar. Her ölçü önce
     `vh` sonra `dvh` olarak İKİ KEZ yazılıyor — `dvh`yi tanımayan tarayıcı
     ikinci bildirimi düşürüp birincisini kullanır. Aynı şeyi custom property
     ile yapmak MÜMKÜN DEĞİL: özel değerler doğrulanmadan saklandığı için
     `dvh` tanınmasa bile "geçerli" sayılır ve geri dönüş hiç devreye girmez.

   ⚠ Bu blok bilinçli olarak `max-width` — dosyanın geri kalanı mobil-önce.
     Sheet bir MOBİL SUNUM biçimi; tabana yazılsaydı §10'da on beş satırlık
     geri-alma gerekirdi ve her yeni kural iki yerde bakım isterdi.
   ========================================================================== */

/* Sheet kabuğu VARSAYILAN OLARAK YOK: masaüstünde de, JS gelmeden önce de.
   `.sheet` sarmalayıcısının kendisi masaüstünde saydam bir `div`. */
.k-site .k-planner .sheet-head,
.k-site .k-planner .sheet-foot {
  display: none;
}

/* --------------------------------------------------------------------------
   11.1 KATMAN MERDİVENİ — sheet açıkken ekranda kim kimin üstünde?

   ⚠⚠ İlk turda sheet 80'e konmuştu ve ÜÇ çakışma ölçüldü (390×844, sheet
   kutusu [0, 405, 390, 844]):
     · `.q-toggle` (70) — "sheet'in altında kalır" varsayımı YANLIŞ çıktı:
       sheet'in alt bandı o noktada opak değil, düğme "Otomatik Yerleştir"in
       sağında ayrı bir koyu kare olarak görünüyordu.
     · `.k-rails` (90) — sheet'in ÜSTÜNDE. Görünür hasar yoktu ama katman
       sırası ters: bir alt sayfa, sayfa raylarının üstünde olmalı.
     · `#toast` (1200) — boş hâlde boyanıyordu; o ayrı bir kusur (§8'de
       çözüldü, gizlenme artık opaklıkla ifade ediliyor) ama katman olarak
       toast'ın sheet'in ÜSTÜNDE kalması DOĞRU: mesaj her şeyi geçer.

   Sheet açıkken geçerli merdiven (küçükten büyüğe):
        3  yapışık tuval           (.canvas-col — sayfa akışının üstü)
       70  teklif düğmesi          → sheet açıkken GİZLİ (aşağıdaki kural)
       90  site rayları            (.k-rails)
       95  ALT SHEET               ← rayların üstü, site çekmecesinin altı
     1000  yapışkan başlık         (.k-header.is-sticky — sheet ekranın
                                    ALTINDA, çakışma yok)
     1100  site menü çekmecesi     (gezinme her şeyi kapatır)
     1200  toast                   (mesaj her şeyi geçer — kasten)

   Kural: sheet 90 ile 1000 ARASINDA kalmalı. 90'ın altı rayların altına
   düşürür, 1000'in üstü gezinmeyi kapatır.
   -------------------------------------------------------------------------- */

/* ⚠ Sheet açıkken teklif düğmesi TAMAMEN gizlenir — katman sırasıyla
   çözülemez, çünkü kusur örtüşme değil GÖRÜNÜRLÜK: düğme sheet'in alt
   bandının yanında duruyor ve birincil eylemin komşusu oluyor. Kullanıcı
   mobilya yerleştirirken teklif çekmecesine ihtiyaç duymuyor; sheet kapanınca
   düğme geri geliyor, yani iş kaybı yok.
   ⚠ `:has()` — araç sayfasını işaretleyen bir gövde sınıfı yok ve `layout.tsx`
   kapsam dışı (aynı gerekçe dosyanın sonundaki `k-mrails` kuralında).
   Desteklemeyen tarayıcıda kural düşer; sonuç ilk turdaki davranış olur. */
.site:has(.k-tool--live.k-sheet-open) .q-toggle {
  display: none;
}

@media screen and (max-width: 1059.98px) {
  /* ⚠ `--live` KAPISI: sheet kuralları yalnız motor ayağa kalktıktan sonra
     uygulanır. İşaretlemede panel `open` geliyor (masaüstü sütunu ilk boyada
     dolu olsun diye); kapı olmasaydı JS'ten önceki tek karede mobilde ekranın
     yarısını kaplayan bir sheet yanıp sönerdi. Motor `open` durumunu ayarlayan
     satırla AYNI blokta bu sınıfı ekliyor. */

  /* ---- (a) tuval: ekranın üstüne yapışır ---- */
  .k-site .k-planner .canvas-col {
    position: sticky;
    top: var(--header-h);
    z-index: 3;
    height: 46vh;
    height: 46dvh;
    border-bottom: 1px solid var(--border-hairline);
  }

  /* Sheet açıkken tuval kısalır: başlık + tuval + sheet toplamı ekranı tam
     doldurur, sheet planın üstüne binmez. */
  .k-site .k-planner.k-sheet-open .canvas-col {
    height: 40vh;
    height: 40dvh;
    /* Sheet açıkken tuvalin üstünden sayfa kaydırılmasın. ⚠ `none` DEĞİL
       `pan-x`: araç çubuğu ve seçim şeridi yatay kayan şeritler, `none` onları
       da kilitlerdi. Sahnenin kendi `touch-action: none`u daha dar olduğu için
       sürükleme etkilenmiyor (zincirde en dar kısıt geçerli). */
    touch-action: pan-x;
  }

  .k-site .k-planner #stage-wrap {
    min-height: 0;
  }

  /* Ölçü artık kutudan geliyor (motor `clientHeight` okuyor); sabit `54vh`
     tavanı burada kutuyu YANLIŞ hesaplatırdı. */
  .k-site .k-planner #stage {
    max-height: 100%;
  }

  /* Araç çubuğu tek satır: sarınca 46dvh'lik tuvalden üç satır çalıyordu.
     Sığmayan kısım YATAY kayar — sayfa gövdesi kaymaz. */
  .k-site .k-planner .canvas-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-block: var(--space-3);
  }

  .k-site .k-planner .canvas-toolbar::-webkit-scrollbar {
    display: none;
  }

  .k-site .k-planner .canvas-toolbar > * {
    flex: none;
  }

  /* Seçim eylemleri (Döndür · Kopyala · Sil) tuvalin ALT kenarına iner —
     ekranın en üstü telefonda en zor ulaşılan yer.
     ⚠ Mutlak konumlanan bu kutu `.canvas-toolbar`ın `overflow-x`i tarafından
     KIRPILMAZ: kapsayıcı bloğu `.canvas-col` ve o, kırpan kutunun ATASI. */
  .k-site .k-planner .sel-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--border-hairline);
    background: var(--surface-page);
  }

  .k-site .k-planner .sel-info::-webkit-scrollbar {
    display: none;
  }

  .k-site .k-planner .sel-info > * {
    flex: none;
  }

  /* Seçim çubuğu planın üstünü örtmesin. `:has()` desteklemeyen tarayıcıda
     kural düşer; sonuç bugünkü davranış olur (bozulma değil). */
  .k-site .k-planner .canvas-col:has(.sel-info:not([hidden])) #stage-wrap {
    padding-bottom: 60px;
  }

  /* ---- (b) kütüphane paneli: tetik satırı tuvalin altına yapışır ---- */
  /* ⚠ Yapışan öğe `<summary>` DEĞİL `<details>`: sticky bir öğe yalnız KENDİ
     ebeveyninin kutusu içinde yol alabilir. Sheet kapalıyken `<details>`
     zaten yalnız summary yüksekliğinde — summary'yi yapıştırmak hiçbir yol
     bırakmazdı. `<details>`in ebeveyni `.app` ve o, sonuç paneli boyunca
     uzuyor; tetik orada sabit kalıyor. */
  .k-site .k-planner #lib-panel {
    position: sticky;
    top: calc(var(--header-h) + 46vh);
    top: calc(var(--header-h) + 46dvh);
    z-index: 2;
    background: var(--surface-page);
  }

  .k-site .k-planner.k-sheet-open #lib-panel {
    top: calc(var(--header-h) + 40vh);
    top: calc(var(--header-h) + 40dvh);
  }

  /* Tetik satırı = sheet'in TEK giriş kapısı. "Mobilya ekle" bir EYLEM adı;
     "Mobilya kütüphanesi" bir bölüm başlığıydı ve dokunulabilir okunmuyordu.
     Artı ikonu Lucide dilinde (24 kutu, 1.5 stroke) — emoji yok. */
  .k-site .k-planner #lib-panel > summary {
    background: var(--surface-page);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-hairline);
  }

  .k-site .k-planner .sum-lbl {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
  }

  /* ---- sheet gövdesi ---- */
  .k-site .k-planner #lib-panel[open] > .sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Katman değeri için §11.1'deki merdivene bak — dağınık z değerleri
       ölçülmüş üç çakışma üretmişti. */
    z-index: 95;
    display: flex;
    flex-direction: column;
    height: 52vh;
    height: 52dvh;
    border-top: 1px solid var(--border-default);
    background: var(--surface-page);
    box-shadow: var(--shadow-3);
  }

  /* Tutamak — yalnız görsel ipucu; sürükleme davranışı YOK, dolayısıyla
     sürüklemeyi bilmeyen kullanıcı hiçbir şey kaybetmiyor. */
  .k-site .k-planner #lib-panel[open] > .sheet::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    width: 36px;
    height: 4px;
    border-radius: var(--radius-md);
    background: var(--border-default);
    transform: translateX(-50%);
    opacity: 0.5;
  }

  .k-site .k-planner .sheet-head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: none;
    min-height: 48px;
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
    border-bottom: 1px solid var(--border-hairline);
  }

  .k-site .k-planner .sheet-head b {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: normal;
    color: var(--text-secondary);
  }

  .k-site .k-planner .sheet-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    margin-left: auto;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    transition: color var(--duration-fast) var(--ease-standard);
  }

  .k-site .k-planner .sheet-x:hover,
  .k-site .k-planner .sheet-x:focus-visible {
    color: var(--brand-burgundy);
  }

  /* Liste sheet'in İÇİNDE kayar; taşan kaydırma sayfaya SIÇRAMAZ. */
  .k-site .k-planner #lib-panel .col.library {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-top: 0;
  }

  /* ---- (c) birincil eylem: sheet'in dibinde, yapışık ---- */
  .k-site .k-planner .sheet-foot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    flex: none;
    padding: var(--space-3) var(--space-5);
    /* iOS ana ekran çizgisi düğmenin üstüne binmesin. */
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border-hairline);
    background: var(--surface-page);
  }

  .k-site .k-planner .sheet-count {
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--text-tertiary);
  }

  .k-site .k-planner .sheet-acts {
    display: flex;
    gap: var(--space-3);
  }

  .k-site .k-planner .sheet-acts .tb-btn {
    flex: none;
  }

  .k-site .k-planner .sheet-acts .tb-btn.primary {
    flex: 1;
    min-width: 0;
  }

  /* Sheet açıkken tuval çubuğundaki KOPYA gizlenir — aynı eylem tek yerde. */
  .k-site .k-planner.k-sheet-open .canvas-toolbar [data-sheet-dup] {
    display: none;
  }

  /* Toast sabit `bottom: 22px` — sheet açıkken tam düğmelerin üstüne
     düşüyordu, o yüzden sheet'in üstüne çıkarılıyor.
     ⚠ Bu kaydırma İLK TURDA BOŞ TOAST'I GÖRÜNÜR YAPMIŞTI: eski gizlenme
     `translateY(80px)` idi ve `bottom: 22px`e bağlıydı. Artık gizlenme
     opaklıkla ifade ediliyor (§8), yani `bottom` serbestçe oynatılabilir. */
  .k-site .k-planner.k-sheet-open #toast {
    bottom: calc(52vh + 22px);
    bottom: calc(52dvh + 22px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .k-site .k-planner *,
  .k-site .k-planner *::after {
    transition: none !important;
  }
}

/* ==========================================================================
   ⚠⚠ KENAR RAYI ÇAKIŞMASI — ölçülerek bulundu, tahmin değil.

   Araç ızgarası sayfa genişliğini sonuna kadar kullanıyor; site kabuğundaki
   sabit sosyal/paylaşım rayları (`.k-rail`) ise sol ve sağ kenarda duruyor.
   1440px'te ölçülen kutular:

       .k-rail--left    18 →   58     (40px geniş, kenardan 18px içeride)
       .k-rail--right 1382 → 1422
       .k-tool .app     15 → 1425

   Yani ray HER İKİ YANDA 43px boyunca kütüphane/sonuç kolonunun ÜSTÜNE
   biniyordu: ekran görüntüsünde WhatsApp/X/Facebook ikonları "Çalışma masası
   120×60" satırlarını örtüyordu.

   Raylar `min-width: 1025px`ten itibaren görünür (site.css T16 notu), araç
   ızgarası ise 1060px'te açılıyor — eşikler ÖRTÜŞMÜYOR. Bu yüzden içerim
   ızgara eşiğine değil RAY eşiğine bağlanıyor; 1025–1060 aralığındaki tek
   kolonlu yerleşim de korunuyor.

   64px = 58 (rayın dış kenarı) + 6 nefes payı.
   ========================================================================== */

@media screen and (min-width: 1025px) {
  .k-site .k-planner .app {
    margin-inline: 64px;
  }
}

/* ==========================================================================
   ⚠⚠ MOBİLDE YÜZEN KÜME ARAÇ KONTROLLERİNİ ÖRTÜYORDU.

   390×844'te ölçüldü: sol alt köşedeki `k-mrails` (yukarı-çık · paylaş ·
   WhatsApp) oda ölçüsü satırlarının üstüne biniyor ve etiketler okunmuyor —
   ekran görüntüsünde "Genişlik" → "…şlik", "Derinlik" → "…k" olarak kesik.

   Bu, kaydırma payıyla çözülemez: küme `position: fixed`, yani içerik ne
   kadar kaydırılırsa kaydırılsın aynı ekran noktasını işgal ediyor. Araç
   sayfasında o nokta HER ZAMAN bir kontrolün üstüne denk geliyor, çünkü
   sonuç paneli baştan sona etiket+giriş satırlarından oluşuyor.

   Karar: araç sayfalarında WhatsApp/paylaş kümesi ve sol sosyal ray GİZLİ.
   Gerekçe: burası bir uygulama yüzeyi; yüzen bir katman dekoratif değil,
   kontrolü fiilen ERİŞİLEMEZ kılıyor. İletişim kanalları kaybolmuyor —
   header'daki "Teklif alın", footer ve sayfanın kendi CTA'ları duruyor.
   ⚠ Kümenin TAMAMI gizleniyor, yalnız WhatsApp değil: küme dikey bir yığın
     ve en alttaki düğme kaldırılınca üstteki (yukarı-çık) onun yerine
     kayıp AYNI kontrolü örtüyor. Yarım çözüm sorunu bir satır yukarı taşır.
   ⚠ Teklif listesi düğmesi (sağ alt) DOKUNULMADI: farklı köşede ve araç
     kontrolleriyle çakışmıyor.
   ⚠ Kayıp: bu üç sayfada mobil "yukarı çık" yok. Kabul edildi — alternatifi
     form kontrolünün üstünde duran ve dokunuşu yiyen bir düğme.

   ⚠ `:has()` kullanılıyor — araç sayfasını işaretleyen bir gövde sınıfı yok
     ve `layout.tsx` bu turda kapsam dışı. Destek olmayan eski tarayıcıda
     kural hiç uygulanmaz; sonuç bugünkü davranış olur (bozulma değil,
     yalnız iyileştirmenin yokluğu).
   ========================================================================== */

.site:has(.k-tool) .k-mrails,
.site:has(.k-tool) .k-rail--left {
  display: none;
}

/* === R19: sonuc-onde yerlesim === */
/* Sonuc blogu sonuc sutununun BASINDA: musteri "ne cikti" sorusunu aramasin.
   Onceden puan 4., onerilen olcu 3. basliktaydi; ikisi de kaydirma gerektiriyordu. */
.k-site .k-planner .res-hero {
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  margin-bottom: var(--space-6);
}

.k-site .k-planner .res-hero .score-block {
  margin: 0;
}

.k-site .k-planner .res-hero__rows {
  margin-top: var(--space-4);
}

/* Ayirac cizgi YOK: gruplar bosluk ve baslik ritmiyle ayrilir. */
.k-site .k-planner details.k-mini {
  margin-top: var(--space-6);
}

.k-site .k-planner details.k-mini > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: normal;
  color: var(--text-tertiary);
}

.k-site .k-planner details.k-mini > summary::-webkit-details-marker {
  display: none;
}

.k-site .k-planner details.k-mini > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-inline-start: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--duration-base) var(--ease-standard);
}

.k-site .k-planner details.k-mini[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.k-site .k-planner details.k-mini > summary:hover {
  color: var(--text-primary);
}

/* Iki olcu kontrolu mobilde yan yana: alt alta 4 satir suruyordu. */
.k-site .k-planner .size-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-4);
}

.k-site .k-planner .size-grid .size-ctrl {
  margin: 0;
  flex-wrap: wrap;
}

/* Gorunum anahtarlari araç cubugundan buraya tasindi. */
.k-site .k-planner .view-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-3);
}

.k-site .k-planner .view-row .tb-toggle {
  min-height: 44px;
}

.k-site .k-planner .view-row .legend {
  margin-top: var(--space-2);
}

/* Sonuc masaustunde sutunla birlikte kaymasin. */
@media screen and (min-width: 1060px) {
  .k-site .k-planner .col.results .res-hero {
    position: sticky;
    top: 0;
    z-index: 2;
  }
}

/* Mobil: dokunma hedefleri ve yatay tasma emniyeti. */
@media screen and (max-width: 1059.98px) {
  .k-site .k-planner .res-hero {
    padding: var(--space-4);
  }

  .k-site .k-planner .chips {
    gap: var(--space-2);
  }

  .k-site .k-planner .col.results {
    overflow-x: hidden;
  }
}

/* === R19b: mobilde sonuc tuvalden ONCE + bant sarmasi === */
/* `.res-hero` artik `.app`'in dogrudan cocugu — sonuc sutunundan cikarildi.
   Gerekce: mobilde (%90 trafik) sonuc kutusu tuvalin ALTINDA kaliyordu ve
   ilk ekranda gorunmuyordu. Ic ice sarmalayicidan `order` ile disari
   cikarilamiyor, bu yuzden isaretleme seviyesinde tasindi. */
.k-site .k-planner .res-hero {
  margin-bottom: 0;
  border-radius: 0;
}

/* ⚠ Tasma bandi tek satirdi ve 390px'te sag kenardan KIRPILIYORDU
   ("...400x300 cm oday|"). Uyari okunamiyorsa uyari degildir. */
.k-site .k-planner .ovf {
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: pretty;
  line-height: 1.45;
}

@media screen and (min-width: 1060px) {
  /* Sag rayin ustu: sonuc, altinda kaydirilabilir ayarlar sutunu. */
  .k-site .k-planner .app {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .k-site .k-planner .res-hero {
    grid-column: 3;
    grid-row: 1;
    padding: var(--space-5);
  }

  .k-site .k-planner #lib-panel {
    grid-column: 1;
    grid-row: 1 / -1;
  }

  .k-site .k-planner .canvas-col {
    grid-column: 2;
    grid-row: 1 / -1;
  }

  .k-site .k-planner #res-panel {
    grid-column: 3;
    grid-row: 2;
  }

  .k-site .k-planner .col.results {
    max-height: none;
  }
}

@media screen and (max-width: 1059.98px) {
  /* Tuval `order: -1`; sonuc ondan da once. */
  .k-site .k-planner .res-hero {
    order: -2;
    padding: var(--space-4) var(--space-5);
  }

  /* Sonuc kutusu tepede yer aldi: tuval biraz kisaldi ki ikisi de ilk
     ekranda kalsin (390x844'te olculdu). */
  .k-site .k-planner .canvas-col {
    height: 40vh;
    height: 40dvh;
  }

  .k-site .k-planner.k-sheet-open .canvas-col {
    height: 36vh;
    height: 36dvh;
  }

  /* Puan satiri ile olcu satirlari yan yana: dikey yer kazanci. */
  .k-site .k-planner .res-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--space-3) var(--space-5);
    align-items: start;
  }

  .k-site .k-planner .res-hero .score-block {
    min-width: 0;
  }

  .k-site .k-planner .res-hero__rows {
    margin-top: 0;
    min-width: 0;
  }

  .k-site .k-planner .res-hero .verdict {
    grid-column: 1 / -1;
  }
}

/* R19b-tight: mobil sonuc kutusu yuksekligi */
@media screen and (max-width: 1059.98px) {
  .k-site .k-planner .res-hero .metric-row {
    padding-block: 1px;
  }

  .k-site .k-planner .res-hero .score-num {
    font-size: 2rem;
  }

  .k-site .k-planner .res-hero .bar {
    margin-top: var(--space-2);
  }
}

/* === R19c: mobil sonuc kutusu tek sutun === */
/* ⚠⚠ R19b'de sonuc kutusu mobilde iki sutuna alinmisti (yukseklik kazanci
   icin). 390px'te sag sutun viewport kenarindan KIRPILIYORDU: "Rahat eder
   450 × 400 · 18 m²" satirinin yalnizca "450 ×" kismi okunuyordu, doluluk
   orani hic gorunmuyordu. Kutuyu one almanin butun amaci O SAYIYDI.
   Yukseklik kazanci sayinin okunmasindan onemli degil -> tek sutun. */
@media screen and (max-width: 1059.98px) {
  .k-site .k-planner .res-hero {
    display: block;
  }

  .k-site .k-planner .res-hero__rows {
    margin-top: var(--space-3);
  }

  /* Etiket kisalabilir, DEGER kisalamaz. */
  .k-site .k-planner .res-hero .metric-row {
    gap: var(--space-4);
    padding-block: 3px;
  }

  .k-site .k-planner .res-hero .metric-row .lbl {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .k-site .k-planner .res-hero .metric-row .val {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
  }
}

/* ==========================================================================
   20. R20 — TUVAL KAHRAMAN OLSUN (masaüstü)

   ⚠ ÖNCEKİ ÜÇ TUR (R19 / R19b / R19c) yalnız SONUÇ PANELİNİ ve MOBİLİ ele
   aldı. Masaüstünde asıl şikâyet ("dar ve karışık") ölçülmemişti. 1440×1000'de
   ölçüldü:

     .k-arch içerik    1192 px
     .app               1064 px  → `.app { margin-inline: 64px }` (§ray içerimi)
     sütunlar        284 / 464 / 316
     #stage-wrap      462 × 1200
     #stage           414 ×  381
     plan çizimi      334 ×  267  → tuvalin YALNIZ %16'sı; ~820 px beyaz boşluk

   Üç ayrı sebep üst üste biniyordu:

   (a) `margin-inline: 64px` yüzen sağ/sol raylara yer açmak içindi. Ama araç
       sayfalarında o rayların TAMAMI gizli (aynı dosyada, "MOBİLDE YÜZEN KÜME"
       bölümü). DOM'da tek bir ray düğümü yok — ölçüldü. Yani 128 px bedelsiz
       kayıp; tuval sütununun dörtte biri kadar.

   (b) Satır yüksekliği sağ rayın DOĞAL boyundan geliyordu (res-hero 331 +
       sonuç 930 = 1261). Tuval sütunu o boya geriliyor, ama genişliği 464'te
       sabit kaldığı için SVG genişliğe göre ölçekleniyor ve 381 px'te kalıyor.
       Aradaki 820 px hiçbir işe yaramayan beyaz alan oluyordu.

   (c) Motorun `fit()` işlevi kutuyu `wrap.clientWidth - 8` ile ölçüyor;
       `clientWidth` DOLGUYU DA sayar. 24 px dolguda SVG, kutudan 40 px geniş
       hesaplanıp `max-width: 100%` tarafından kırpılıyor — yükseklik ise
       kırpılmadığı için oran bozuluyor ve SVG kendi içinde bir kez daha
       kutulanıyordu. Dolgu 4 px'e çekilince `clientWidth - 8` TAM içerik
       kutusuna eşitleniyor; JS'e dokunmadan hesap doğruluyor.

   Çözüm sırası: planlayıcı kapsayıcıdan genişler → `.app` yüksekliği bağlanır
   ve yan raylar KENDİ içinde kayar → tuval hem geniş hem yüksek kutuya oturur.
   ========================================================================== */

@media screen and (min-width: 1060px) {

  /* (a) Olmayan rayların içerimi geri alınır. */
  .k-site .k-planner .app {
    margin-inline: 0;
  }

  /* Araç yüzeyi metin sütununa sığmak zorunda değil: 1240'lık kapsayıcının
     dışına taşar. `100vw` kaydırma çubuğunu da saydığı için 64 px pay
     bırakılıyor — yatay taşma bu yüzden imkânsız. */
  .k-site .k-planner {
    --kp-w: min(1320px, calc(100vw - 64px));
    width: var(--kp-w);
    margin-inline: calc((100% - var(--kp-w)) / 2);
  }

  /* (b) Yükseklik bağlanır. Tuval artık satırın en uzun kardeşine göre
     gerilmiyor; sağ ve sol ray kendi içinde kayıyor. Araç yüzeyinin doğru
     davranışı bu: plan HER ZAMAN ekranda kalır. */
  .k-site .k-planner .app {
    height: clamp(560px, calc(100dvh - 200px), 780px);
    min-height: 560px;
  }

  .k-site .k-planner details.panel {
    min-height: 0;
  }

  /* (c) Dolgu = `fit()`in düştüğü 8 px. Nefes payı zaten SVG'nin kendi
     `viewBox` payında (her kenarda 60 birim ≈ %10) duruyor. */
  .k-site .k-planner #stage-wrap {
    padding: 4px;
    min-height: 0;
  }

  /* `72vh` tavanı JS'in hesapladığı boyu kısa ekranlarda kırpıyordu. */
  .k-site .k-planner #stage {
    max-height: 100%;
  }

  /* Skor bloğu sağ rayın SABİT üst katmanı — altındaki ayarlar kayarken o
     yerinde kalır. Bu yüzden yer kaplaması sıkılaştırıldı (331 → ~250 px):
     kazanılan her piksel kaydırılan ayar sütununa gidiyor. */
  .k-site .k-planner .res-hero {
    padding: var(--space-4) var(--space-5);
  }

  .k-site .k-planner .res-hero .metric-row {
    padding-block: 3px;
  }

  .k-site .k-planner .res-hero__rows {
    margin-top: var(--space-3);
  }
}

/* --------------------------------------------------------------------------
   20b. SOL LİSTE — AYNI ÖLÇÜ İKİ KEZ YAZILMASIN

   Ölçüldü: 42 öğenin 16'sında ölçü hem adın içinde hem sağdaki rozette
   ("Çalışma masası 120×60" + "120×60"). Ad uzadığı için 4 öğe iki satıra
   kırılıyordu. Tekrar `template-planner.php` içindeki küçük bir normalleştirici
   ile addan siliniyor; rozet TEK kaynak olarak kalıyor. Rozet artık ayırt edici
   bilgi olduğu için fısıltı tonundan çıkarılıyor.
   ⚠ Yalnız ADIN İÇİNDEKİ ölçü rozetle BİREBİR aynıysa siliniyor; "L köşe masa
     160+120 / ~160×140" gibi rozetin ek bilgi taşıdığı satırlara dokunulmuyor.
   -------------------------------------------------------------------------- */

.k-site .k-planner .obj-item .dim {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   20c. ⚠⚠ DÜZELTME — YAN RAYLAR KUTULARINDAN TAŞIYORDU

   `.app` yüksekliği bağlandıktan sonra `.col.results { max-height: 100% }`
   ETKİSİZ kaldı: yüzde cinsinden `max-height`, ebeveynin yüksekliği `auto`
   ise "none" gibi davranır. `details.panel` bir ızgara ögesi olduğu için
   hesaplanan yüksekliği `auto`dur (görünen boy STRETCH'ten gelir). Sonuç:
   sağ sütun 930 px içeriğini 503 px'lik kutuya sığdırmak yerine ALTINA taştı ve
   Instagram şeridinin üstüne bindi (1440×1000 tam sayfa görüntüsünde görüldü).

   ⚠⚠ İLK DENEME DE TUTMADI: paneli `display: flex` yapıp `.col`'a `flex: 1`
   vermek işe yaramadı — ÖLÇÜLDÜ, `.col.results` hâlâ 930 px kaldı. Sebep:
   Chrome'da `<details>` içeriği artık `::details-content` sözde-ögesinin
   kutusuna sarılıyor. Yani `.col.results` panelin DOĞRUDAN esnek çocuğu
   DEĞİL; aradaki o kutu esnek zinciri kesiyor ve `flex: 1` hiçbir şeye
   bağlanmıyor. `<details>` üzerinden esnek/ızgara zinciri kurulamaz.

   Çözüm: zincir kurmak yerine KAYDIRMA KUTUSU PANELİN KENDİSİ olur.
   `details`e kesin yükseklik + `overflow-y: auto` verilir; içerideki `.col`
   doğal boyunda kalır ve panel onu kaydırır. Yapışkan arama alanı da bozulmaz:
   `position: sticky` en yakın kaydırılan ATAYA göre çalışır, o da artık panel.
   -------------------------------------------------------------------------- */

@media screen and (min-width: 1060px) {
  .k-site .k-planner #lib-panel,
  .k-site .k-planner #res-panel {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  .k-site .k-planner #lib-panel .sheet {
    display: block;
    height: auto;
    min-height: 0;
  }

  .k-site .k-planner .col.library,
  .k-site .k-planner .col.results {
    max-height: none;
    min-height: 0;
    overflow: visible;
  }

  .k-site .k-planner .canvas-col {
    min-height: 0;
    overflow: hidden;
  }
}

/* --------------------------------------------------------------------------
   20d. SKOR KUTUSUNDAKİ AYIRAÇ ÇİZGİLERİ

   `.metric-row` her satırın altına 1 px kural çiziyordu — dört satır, dört
   çizgi. Bu sitede dekoratif yatay kural / altçizgi kullanılmıyor; ritim
   boşlukla kurulur. Çizgiler kaldırıldı, satır aralığı bir tık açıldı.
   -------------------------------------------------------------------------- */

.k-site .k-planner .metric-row {
  border-bottom: 0;
}

/* --------------------------------------------------------------------------
   20e. YAPIŞKAN ARAMA KUTUSU — KAYDIRMA KUTUSU DEĞİŞTİ, DAYANAK DA DEĞİŞTİ

   Eski değer `top: calc(var(--space-5) * -1)` yani −16 px idi ve o sayı
   kaydırma kutusunun `.col.library` OLMASINA göre ayarlanmıştı: sütunun
   16 px'lik dolgusu vardı, negatif değer arama kutusunu tam o dolgunun
   üstüne oturtuyordu. §20c ile kaydırma kutusu `#lib-panel` oldu ve onun
   dolgusu YOK — aynı −16 px artık kutuyu görünür alanın 16 px DIŞINA itiyor.
   Ölçüldü: panel üstü 323, arama kutusu üstü 307 → yapışmıyor, kırpılıyor.

   `top: 0` doğru dayanak. Arka planı zaten opak (§`.search-wrap`), altından
   liste geçmez.
   -------------------------------------------------------------------------- */

@media screen and (min-width: 1060px) {
  .k-site .k-planner .search-wrap {
    top: 0;
    margin-top: calc(var(--space-5) * -1);
    padding-top: var(--space-5);
  }
}