/* ==========================================================================
   MEKÂN PLANI ÇİZİCİ
   Masaüstü: 240px | esnek tuval | 300px
   Mobil: tek sütun — ölçüler, tuval, ürünler alt alta
   ========================================================================== */

.plan-sayfa { display: block; }


/* --- 1. AMAÇ SEÇİMİ --------------------------------------------------------
   Sayfanın ilk ekranı: ziyaretçi iki yoldan birini seçer. Kartlar gerçek
   birer düğme olduğu için düğme gibi görünmeleri gerekiyor — çerçeveli sönük
   kutular tıklanabilir okunmuyordu.                                        */

.plan-giris {
  padding: var(--bolum-y) 0;
  display: flex; align-items: center;
  /* Sayfa kısa: alt bilgiye yapışmasın, ekranın ortasında dursun */
  min-height: calc(100vh - var(--ust-bar-h) - 120px);
  /* Kartlar beyaz — zemin de beyaz olsaydı kartların kenarı kaybolurdu */
  background: var(--renk-panel);
}

.plan-giris-ic {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--bo-9);
  width: 100%;
}

/* Başlık bloğu okuma genişliğinde dar, kartlar geniş */
.plan-giris-basi { max-width: 60ch; text-align: center; }

.plan-amac {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bo-6);
  width: 100%; max-width: 880px;
  text-align: left;
}

.plan-amac-kart {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--bo-5);
  padding: var(--bo-8);
  background: var(--renk-beyaz);
  border: 1.5px solid var(--cizgi-16);
  border-radius: var(--yari-3);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--gecis), transform var(--gecis), box-shadow var(--gecis);
}
.plan-amac-kart:hover,
.plan-amac-kart:focus-visible {
  border-color: var(--renk-turuncu);
  transform: translateY(-3px);
  box-shadow: var(--golge-kart);
}
.plan-amac-kart:focus-visible { outline: 2px solid var(--renk-turuncu); outline-offset: 3px; }
.plan-amac-kart:active { transform: translateY(-1px); }

/* Simge kutusu */
.plan-amac-simge {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  background: var(--renk-vurgu-zemin);
  border-radius: var(--yari-3);
  color: var(--renk-turuncu);
  flex: none;
}
.plan-amac-simge svg { width: 28px; height: 28px; display: block; }

.plan-amac-ad {
  font: 700 var(--p-h3)/1.3 var(--yazi-baslik);
  color: var(--renk-koyu);
}
.plan-amac-alt {
  font: 400 var(--p-govde-2)/1.7 var(--yazi-govde);
  color: var(--renk-metin-2);
  /* Alt satırdaki çağrıyı kartın en altına iter — iki kart eşit hizalanır */
  flex: 1 0 auto;
}

/* "Çizmeye başla →" — kartın düğme olduğunu açık eden satır */
.plan-amac-git {
  display: inline-flex; align-items: center; gap: var(--bo-2);
  margin-top: auto;
  font: 700 var(--p-govde-2)/1 var(--yazi-baslik);
  /* Parlak turuncu beyaz üzerinde 3,39:1 — 15px yazı için yetersiz.
     Koyu turuncu 4,75:1 veriyor, marka renginin içinde kalıyor. */
  color: var(--renk-turuncu-koyu);
}
.plan-amac-git span:last-child { transition: transform var(--gecis); }
.plan-amac-kart:hover .plan-amac-git span:last-child,
.plan-amac-kart:focus-visible .plan-amac-git span:last-child { transform: translateX(4px); }

/* Alt not — ayraçla ayrılır, silik ama okunur */
.plan-giris-not {
  display: flex; align-items: flex-start; gap: var(--bo-3);
  max-width: 56ch;
  padding-top: var(--bo-7);
  border-top: 1px solid var(--cizgi);
  font: 400 var(--p-mini)/1.7 var(--yazi-govde);
  color: var(--renk-metin-2);
  text-align: left;
}
.plan-giris-not svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--renk-metin-3); }

@media (max-width: 700px) {
  .plan-amac { grid-template-columns: minmax(0, 1fr); gap: var(--bo-5); }
  .plan-giris { min-height: 0; padding: var(--bo-9) 0; }
  .plan-giris-ic { gap: var(--bo-8); }
  .plan-amac-kart { padding: var(--bo-7); gap: var(--bo-4); }
  .plan-amac-simge { width: 44px; height: 44px; }
  .plan-amac-simge svg { width: 24px; height: 24px; }
}


/* --- 2. ÇİZİM EKRANI ------------------------------------------------------- */

.plan-ekran {
  display: flex; flex-direction: column;
  min-height: 78vh;
  background: var(--renk-panel);
  border-top: 1px solid var(--cizgi);
  border-bottom: 1px solid var(--cizgi);
}

.plan-ust {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--bo-4);
  padding: 12px 20px;
  background: var(--renk-beyaz);
  border-bottom: 1px solid var(--cizgi);
}
.plan-ust-sol, .plan-ust-sag { display: flex; align-items: center; gap: 10px; }

.plan-geri-dugme {
  font: 500 13px/1 var(--yazi-govde);
  color: var(--renk-metin-2);
  padding: 8px 10px; border-radius: var(--yari-3);
}
.plan-geri-dugme:hover { background: var(--renk-panel); }

.plan-amac-etiket {
  padding: 5px 11px;
  background: var(--renk-vurgu-zemin, #FDECE2);
  color: #A8410E;
  border-radius: 3px;
  font: 600 11px/1.4 var(--yazi-govde);
  text-transform: uppercase; letter-spacing: .1em;
}

.plan-arac {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 8px 12px;
  border: 1px solid var(--cizgi-20);
  border-radius: var(--yari-3);
  background: var(--renk-beyaz);
  font: 500 13px/1 var(--yazi-govde);
  cursor: pointer;
}
.plan-arac:hover:not(:disabled) { border-color: var(--renk-koyu); }
.plan-arac:disabled { opacity: .35; cursor: default; }
.plan-arac.plan-sil { color: var(--renk-hata, #C0392B); border-color: rgba(192,57,43,.3); }
.plan-arac.plan-sil:hover { background: var(--renk-hata, #C0392B); color: #fff; }


/* --- Üç sütun --- */

.plan-govde {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 300px;
  flex: 1;
  min-height: 0;
}

.plan-sol, .plan-sag {
  padding: 18px;
  background: var(--renk-beyaz);
  overflow-y: auto;
  max-height: 74vh;
}
.plan-sol { border-right: 1px solid var(--cizgi); }
.plan-sag { border-left: 1px solid var(--cizgi); }

.plan-baslik {
  font: 600 11px/1 var(--yazi-govde);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--renk-metin-3);
  margin: 0 0 12px;
}
.plan-baslik:not(:first-child) { margin-top: 24px; }
.plan-baslik small { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .7; }


/* --- Şekil seçimi --- */

.plan-sekiller { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.plan-sekil {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px;
  border: 1px solid var(--cizgi-16);
  border-radius: var(--yari-3);
  background: var(--renk-beyaz);
  font: 500 11px/1.2 var(--yazi-govde);
  color: var(--renk-metin-2);
  cursor: pointer;
}
.plan-sekil:hover { border-color: var(--renk-koyu); }
.plan-sekil.aktif { border-color: var(--renk-turuncu); color: var(--renk-turuncu); background: #FDF6F1; }
.plan-sekil-ikon { display: block; color: currentColor; }


/* --- Ölçü alanları --- */

.plan-olcu-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.plan-alan { display: flex; flex-direction: column; gap: 5px; }
.plan-alan > span {
  font: 500 11px/1.2 var(--yazi-govde);
  color: var(--renk-metin-3);
  display: flex; justify-content: space-between; align-items: baseline; gap: 6px;
}
.plan-alan > span small { font: 600 11px/1 ui-monospace, Menlo, monospace; color: var(--renk-turuncu); }
.plan-alan input[type=number] {
  width: 100%; min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--cizgi-20);
  border-radius: var(--yari-3);
  font: 500 15px/1 ui-monospace, Menlo, monospace;
  background: var(--renk-beyaz);
}
.plan-alan input[type=number]:focus { border-color: var(--renk-turuncu); outline: none; }
.plan-alan input[type=range] { width: 100%; accent-color: var(--renk-turuncu); }

.plan-alan-bilgi {
  margin-top: 14px;
  font: 400 13px/1.5 var(--yazi-govde);
  color: var(--renk-metin-2);
}
.plan-alan-bilgi strong { font: 600 15px/1 ui-monospace, Menlo, monospace; color: var(--renk-koyu); }

.plan-ipucu {
  margin-top: 22px; padding: 12px 14px;
  background: var(--renk-panel);
  border-radius: var(--yari-3);
  font: 400 12px/1.65 var(--yazi-govde);
  color: var(--renk-metin-2);
}
.plan-ipucu b { display: block; color: var(--renk-koyu); margin-bottom: 4px; font-size: 12px; }


/* --- Orta: tuval --- */

.plan-orta { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.plan-tuval-kutu {
  position: relative;
  flex: 1;
  min-height: 380px;
  background: #F2EFE9;
}
/* Canvas kutusuna hapsedilir. Eskiden "height: 100%" flex kutusunda
   çözülemiyor, canvas kendi piksel yüksekliğinde kalıp ALT PANELİN
   ÜSTÜNE biniyordu — seçili parça bilgileri ekranda kayboluyordu
   (20 Ağu: kutu 560px iken canvas 777px ölçüldü). */
.plan-tuval-kutu canvas {
  display: block;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  touch-action: none;
}
.plan-tuval-kutu.uzerinde { outline: 2px dashed var(--renk-turuncu); outline-offset: -6px; }

/* Planda ölçü rakamına tıklanınca açılan giriş kutusu.
   Küçükken içine tıklamak zordu: yanına denk gelen tıklama kutuyu
   kapatıp altındaki duvarı seçiyordu. */
.plan-olcu-giris {
  position: absolute;
  width: 84px;
  min-height: 38px;
  padding: 8px 8px;
  border: 2px solid var(--renk-turuncu);
  border-radius: 4px;
  background: var(--renk-beyaz);
  font: 700 15px/1 ui-monospace, Menlo, monospace;
  color: var(--renk-koyu);
  text-align: center;
  box-shadow: 0 4px 14px rgba(20, 22, 26, .2);
  z-index: 5;
}
.plan-olcu-giris:focus { outline: none; }
/* Sayı okları yer kaplamasın */
.plan-olcu-giris::-webkit-outer-spin-button,
.plan-olcu-giris::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.plan-olcu-giris { -moz-appearance: textfield; appearance: textfield; }

/* Kısa bildirim — mobilde "eklendi" gibi geri bildirim.
   Üstte değil ALTTA: üstte "Duvarları önden gör" düğmesiyle çakışıyordu. */
.plan-bildirim {
  position: absolute; left: 50%; bottom: 14px;
  transform: translateX(-50%);
  padding: 9px 16px;
  background: rgba(20, 22, 26, .9);
  color: #fff;
  border-radius: 20px;
  font: 600 12px/1 var(--yazi-govde);
  white-space: nowrap;
  pointer-events: none;
  z-index: 4;
  animation: plan-bildirim-gel .2s ease;
}
.plan-bildirim.gider { opacity: 0; transition: opacity .3s ease; }

@keyframes plan-bildirim-gel {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.plan-bos-uyari {
  position: absolute; left: 50%; bottom: 22px;
  transform: translateX(-50%);
  padding: 9px 16px;
  background: rgba(20, 22, 26, .82);
  color: #fff;
  border-radius: 20px;
  font: 500 12px/1 var(--yazi-govde);
  pointer-events: none;
  white-space: nowrap;
}


/* --- Seçili parça paneli --- */

.plan-secili {
  padding: 14px 18px;
  background: var(--renk-beyaz);
  border-top: 1px solid var(--cizgi);
  /* Sütun düzeninde sıkışmasın: tuvalin min-height'i yer kapınca panel
     eziliyor, içindeki son satır (duvar mesafeleri) panelin dışına
     taşıp alt bandın altında kalıyordu (20 Ağu). */
  flex: 0 0 auto;
}
.plan-secili-basi {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.plan-secili-basi b { font: 600 15px/1.2 var(--yazi-baslik); }
.plan-secili-eylem { display: flex; gap: 8px; }

.plan-secili-olcu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }

.plan-onayar { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.plan-cip {
  padding: 6px 10px;
  border: 1px solid var(--cizgi-16);
  border-radius: 3px;
  background: var(--renk-beyaz);
  font: 500 11px/1 ui-monospace, Menlo, monospace;
  color: var(--renk-metin-2);
  cursor: pointer;
}
.plan-cip:hover { border-color: var(--renk-koyu); }
.plan-cip.aktif { background: var(--renk-koyu); color: var(--acik-metin, #fff); border-color: var(--renk-koyu); }

.plan-secili-alt {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--cizgi);
}
/* ⚠ Sınıf adı bilerek "plan-mesafeler": sayfalar.css'te ANA SAYFA
   tanıtım animasyonuna ait, aynı adlı bir .plan-uzaklik kuralı var
   (position:absolute; opacity:0; animation). Aynı adı kullanınca
   çizicideki mesafe satırı da mutlak konumlanıp görünmez oluyordu
   ve rakamlar 7px'lik animasyon yazısına dönüyordu (20 Ağu). */
.plan-mesafeler {
  font: 500 12px/1.5 var(--yazi-govde);
  color: var(--renk-metin-3);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  /* Düğme satırının ALTINDA ayrı bir satır (HTML'de de ayrıldı):
     dört mesafe etiketi düğmelerin yanına sığmıyordu (20 Ağu). */
  margin-top: 8px;
}

/* Duvar mesafeleri — "sağ duvardan 100 cm" (20 Ağu).
   Küçük etiket kutucukları hâlinde: dört duvar yan yana yazınca
   düz metin okunmuyordu. */
.plan-mesafe {
  padding: 3px 8px;
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  background: var(--renk-zemin-2, #F6F3EE);
  white-space: nowrap;
}
.plan-mesafe b {
  color: var(--renk-metin); font-weight: 700;
  font-size: inherit; vertical-align: baseline;
}

/* Duvar yönü simgesi: kalın çizgi o duvarı, ok da hangi duvara ölçüldüğünü
   gösterir. "sol duvardan" yazısının yerini alır (20 Ağu) — tam yazı
   title/aria-label olarak duruyor. */
.plan-mesafe { display: inline-flex; align-items: center; gap: 5px; }

.plan-yon { flex: none; display: block; }
.plan-yon path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.plan-yon-duvar { stroke: var(--renk-koyu, #14161A); stroke-width: 2.2; }
.plan-yon-ok    { stroke: var(--renk-turuncu, #E8621B); stroke-width: 1.4; }


/* --- Sağ: ürün listesi --- */

.plan-sekme { display: flex; gap: 6px; margin-bottom: 14px; }
.plan-sekme-dugme {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--cizgi-16);
  border-radius: var(--yari-3);
  background: var(--renk-beyaz);
  font: 600 13px/1 var(--yazi-baslik);
  cursor: pointer;
}
.plan-sekme-dugme.aktif { background: var(--renk-koyu); color: var(--acik-metin, #fff); border-color: var(--renk-koyu); }

.plan-sag-bilgi {
  font: 400 12px/1.6 var(--yazi-govde);
  color: var(--renk-metin-3);
  margin-bottom: 12px;
}

.plan-urunler { display: flex; flex-direction: column; gap: 6px; }
.plan-urun {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--cizgi-16);
  border-radius: var(--yari-3);
  background: var(--renk-beyaz);
  cursor: grab;
  text-align: left;
}
.plan-urun:hover { border-color: var(--renk-turuncu); background: #FDF6F1; }
.plan-urun:active { cursor: grabbing; }
.plan-urun b    { font: 600 13px/1.2 var(--yazi-govde); }
.plan-urun span { font: 400 11px/1 ui-monospace, Menlo, monospace; color: var(--renk-metin-3); }


/* --- Alt bar --- */

.plan-alt {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--bo-4); flex-wrap: wrap;
  padding: 14px 20px;
  background: var(--renk-beyaz);
  border-top: 1px solid var(--cizgi);
}
.plan-sayac { font: 500 13px/1 var(--yazi-govde); color: var(--renk-metin-3); }


/* --- 3. DUVAR KESİTİ ------------------------------------------------------- */

/* Masaüstünde "Ölçüyü elle gir" gereksiz — alanlar zaten görünür */
.plan-olcu-ac { display: none; }

.plan-kesit-dugme {
  position: absolute; right: 14px; top: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px;
  background: var(--renk-beyaz);
  border: 1px solid var(--cizgi-20);
  border-radius: var(--yari-3);
  font: 600 12px/1 var(--yazi-govde);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(20, 22, 26, .08);
}
.plan-kesit-dugme:hover { border-color: var(--renk-turuncu); color: var(--renk-turuncu); }

/* "Ekrana sığdır" — yalnızca yakınlaştırma yapılmışken görünür */
.plan-sigdir {
  position: absolute; left: 14px; top: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  background: var(--renk-koyu);
  color: var(--acik-metin, #fff);
  border-radius: var(--yari-3);
  font: 600 12px/1 var(--yazi-govde);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(20, 22, 26, .18);
  z-index: 3;
}

.modal-kutu-genis { width: min(1100px, 100%); }

/* Kesit penceresinin başlık satırı: geri · başlık · kapat */
[data-kesit-modal] .modal-basi { display: flex; align-items: center; gap: var(--bo-4); }
[data-kesit-modal] .modal-basi .h3 { flex: 1; }

.kesit-govde { padding: var(--bo-5) var(--bo-6) var(--bo-6); display: flex; flex-direction: column; gap: var(--bo-4); }

.kesit-sekme { display: flex; gap: 8px; flex-wrap: wrap; }
.kesit-sekme-dugme {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--cizgi-16);
  border-radius: var(--yari-3);
  background: var(--renk-beyaz);
  font: 600 13px/1 var(--yazi-baslik);
  cursor: pointer;
  text-transform: capitalize;
}
.kesit-sekme-dugme span { font: 400 11px/1 ui-monospace, Menlo, monospace; color: var(--renk-metin-3); }
.kesit-sekme-dugme b {
  min-width: 18px; padding: 2px 5px;
  background: var(--renk-panel); border-radius: 9px;
  font: 700 10px/1.4 var(--yazi-govde);
}
.kesit-sekme-dugme:hover { border-color: var(--renk-koyu); }
.kesit-sekme-dugme.aktif { background: var(--renk-koyu); color: var(--acik-metin, #fff); border-color: var(--renk-koyu); }
.kesit-sekme-dugme.aktif span { color: rgba(255, 255, 255, .6); }
.kesit-sekme-dugme.aktif b { background: rgba(255, 255, 255, .16); }

.kesit-bilgi { font: 400 12px/1.6 var(--yazi-govde); color: var(--renk-metin-3); }

.kesit-tuval-kutu {
  position: relative;
  height: min(46vh, 420px);
  min-height: 280px;
  background: #F2EFE9;
  border-radius: var(--yari-3);
  overflow: hidden;
}
.kesit-tuval-kutu canvas { display: block; width: 100%; height: 100%; touch-action: none; }

/* Boş duvar uyarısı — kendi kutusunda, yükseklik cetveliyle çakışmasın */
.kesit-bos {
  position: absolute; left: 50%; bottom: 18px;
  transform: translateX(-50%);
  max-width: min(320px, 84%);
  padding: 12px 18px;
  background: rgba(255, 255, 255, .95);
  border: 1px solid var(--cizgi-16);
  border-radius: var(--yari-3);
  text-align: center;
  font: 400 12px/1.55 var(--yazi-govde);
  color: var(--renk-metin-2);
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(20, 22, 26, .07);
}

.kesit-secili {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 130px minmax(0, 1fr);
  gap: var(--bo-4);
  align-items: end;
  padding: var(--bo-4);
  background: var(--renk-panel);
  border-radius: var(--yari-3);
}
.kesit-secili > b { font: 600 14px/1.3 var(--yazi-baslik); align-self: center; }

.kesit-ust {
  align-self: center;
  font: 500 12px/1.4 ui-monospace, Menlo, monospace;
  color: var(--renk-metin-3);
}
.kesit-ust.uyari { color: var(--renk-hata, #C0392B); font-weight: 700; }

.kesit-alt {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--bo-4); flex-wrap: wrap;
}
.kesit-olcu { font: 500 12px/1.4 var(--yazi-govde); color: var(--renk-metin-3); }

/* "← Plana dön" — masaüstünde sade, mobilde belirgin */
.kesit-geri {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  border-radius: var(--yari-3);
  font: 600 13px/1 var(--yazi-govde);
  color: var(--renk-metin-2);
  cursor: pointer;
}
.kesit-geri:hover { background: var(--renk-panel); color: var(--renk-koyu); }

/* --- MOBİL: kesit üstten görünümün YERİNE geçer ---------------------------
   Küçük ekranda pencere içinde pencere olmaz. Kesit tam ekranı kaplar,
   "← Plana dön" en üstte durur — nereye döneceği belli olsun.          */

@media (max-width: 860px) {
  [data-kesit-modal] { padding: 0; }

  [data-kesit-modal] .modal-kutu {
    width: 100%;
    max-height: none;
    height: 100dvh;
    border-radius: 0;
    display: flex; flex-direction: column;
  }

  [data-kesit-modal] .modal-basi {
    position: sticky; top: 0; z-index: 2;
    background: var(--renk-beyaz);
    border-bottom: 1px solid var(--cizgi);
  }
  [data-kesit-modal] .modal-basi .h3 { font-size: 15px; }

  .kesit-geri {
    background: var(--renk-koyu);
    color: var(--acik-metin, #fff);
    padding: 10px 14px;
  }
  .kesit-geri:hover { background: var(--renk-koyu); color: var(--acik-metin, #fff); }

  /* Sağ üstteki × gereksiz — geri düğmesi zaten var */
  [data-kesit-modal] .modal-kapat { display: none; }

  .kesit-govde { flex: 1; min-height: 0; overflow-y: auto; }
  .kesit-tuval-kutu { height: 46vh; min-height: 240px; }

  /* Duvar sekmeleri tek satırda kalsın, parmakla kaydırılsın —
     alt alta dizilince ekranın yarısını yiyordu. */
  .kesit-sekme {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 calc(var(--bo-4) * -1);
    padding: 0 var(--bo-4) 2px;
  }
  .kesit-sekme::-webkit-scrollbar { display: none; }
  .kesit-sekme-dugme { flex: 0 0 auto; }
}

@media (max-width: 700px) {
  .kesit-secili { grid-template-columns: 1fr 1fr; }
  .kesit-secili > b { grid-column: 1 / -1; }
  .kesit-ust { grid-column: 1 / -1; }
  .kesit-govde { padding: var(--bo-4); }
  .plan-kesit-dugme { right: 10px; top: 10px; padding: 8px 11px; font-size: 11px; }

  /* Alt bardaki ikinci "plana dön" düğmesi mobilde gereksiz */
  .kesit-alt .dugme { display: none; }
}


/* --- 4. GÖNDERME ÖZETİ ----------------------------------------------------- */

.plan-ozet {
  display: flex; flex-direction: column; gap: var(--bo-4);
  padding: var(--bo-4);
  background: var(--renk-panel);
  border-radius: var(--yari-3);
}
.plan-ozet-resim {
  border: 1px solid var(--cizgi-16);
  border-radius: var(--yari-3);
  overflow: hidden;
  background: #fff;
}
.plan-ozet-resim img { display: block; width: 100%; height: auto; }

.plan-ozet-bilgi { display: flex; flex-direction: column; gap: 6px; }
.plan-ozet-bilgi b    { font: 700 13px/1 var(--yazi-baslik); text-transform: uppercase; letter-spacing: .1em; color: var(--renk-turuncu); }
.plan-ozet-bilgi span { font: 400 13px/1.6 var(--yazi-govde); color: var(--renk-metin-2); }

.plan-ozet-liste {
  margin: 6px 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 4px;
  max-height: 180px; overflow-y: auto;
}
.plan-ozet-liste li {
  font: 400 12px/1.5 var(--yazi-govde);
  color: var(--renk-metin-2);
  padding-left: 14px; position: relative;
}
/* Duvarlara açıklık: parçanın ölçülerinin ALTINDA ayrı satır (20 Ağu).
   Aynı satıra eklenince "120×35×70 cm · yerden 145 cm · sol duvardan
   20 cm · …" okunmaz hâle geliyordu. */
.plan-ozet-mesafe {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  margin-top: 2px;
  color: var(--renk-metin-3);
  font-size: 11px;
}
.plan-ozet-yon { display: inline-flex; align-items: center; gap: 4px; }
.plan-ozet-yon .plan-yon { width: 13px; height: 13px; }

.plan-ozet-liste li::before {
  content: "·"; position: absolute; left: 4px;
  color: var(--renk-turuncu); font-weight: 700;
}
.plan-ozet-bos { font-style: italic; color: var(--renk-metin-3); }
.plan-ozet-duvarlar {
  font: 500 12px/1.5 ui-monospace, Menlo, monospace !important;
  color: var(--renk-metin-3) !important;
}

/* Açılır seçim kutusu (alt kenar hizası) */
.plan-alan select {
  width: 100%; min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--cizgi-20);
  border-radius: var(--yari-3);
  background: var(--renk-beyaz);
  font: 500 14px/1 var(--yazi-govde);
}
.plan-alan select:focus { border-color: var(--renk-turuncu); outline: none; }


/* --- Mobil sekme şeridi (masaüstünde gizli) -------------------------------- */

.plan-mobil-sekme { display: none; }


/* ==========================================================================
   MOBİL DÜZEN
   --------------------------------------------------------------------------
   ⚠ ÖLÇÜLEN SORUN: eski düzende sayfa 3,6 ekran uzunluğundaydı ve PLANI
     GÖRMEK İÇİN 713 px kaydırmak gerekiyordu. Çizim aracında ilk görülen
     şey plan olmalı.

   Yeni düzen — tek ekrana sığar, sayfa kaydırılmaz:
       üst çubuk  ·  TUVAL (ekranın yarısı)  ·  seçili parça  ·
       sekme şeridi  ·  kaydırılabilir panel  ·  gönder çubuğu
   ========================================================================== */

@media (max-width: 1000px) {

  /* Plan ekranı tam ekranı kaplar; sadece alt panel kaydırılır */
  .plan-ekran {
    height: 100dvh;
    min-height: 520px;
    overflow: hidden;
    border: 0;
  }

  .plan-govde {
    grid-template-columns: minmax(0, 1fr);
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  /* Tuval: ekranın üst yarısı, hep görünür */
  .plan-orta { flex: 0 0 auto; }
  .plan-tuval-kutu {
    height: 42dvh;
    min-height: 220px;
  }

  /* Sekme şeridi */
  .plan-mobil-sekme {
    display: flex;
    gap: 0;
    background: var(--renk-beyaz);
    border-top: 1px solid var(--cizgi);
    border-bottom: 1px solid var(--cizgi);
    flex: 0 0 auto;
    order: -1;                       /* tuvalin ALTINDA dursun diye aşağıda düzeltilir */
  }
  .plan-mobil-sekme button {
    flex: 1;
    min-height: 48px;
    padding: 12px 10px;
    font: 600 13px/1 var(--yazi-baslik);
    color: var(--renk-metin-3);
    border-bottom: 2px solid transparent;
    cursor: pointer;
  }
  .plan-mobil-sekme button.aktif {
    color: var(--renk-turuncu);
    border-bottom-color: var(--renk-turuncu);
  }

  /* Sıra: tuval → sekme şeridi → seçilen panel */
  .plan-orta        { order: 0; }
  .plan-mobil-sekme { order: 1; }
  .plan-sol, .plan-sag {
    order: 2;
    max-height: none;
    border: 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px;
  }

  /* Aynı anda tek panel görünür — JS sekmeyle değiştirir */
  .plan-sol[hidden], .plan-sag[hidden] { display: none !important; }

  /* Ürünler ızgara: dikey liste çok uzundu (783 px) */
  .plan-urunler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .plan-urun { min-height: 56px; justify-content: center; }

  /* Şekil seçimi daha küçük — dört kart ekranın yarısını yiyordu */
  .plan-sekiller { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .plan-sekil { padding: 8px 4px; font-size: 10px; gap: 3px; }
  .plan-sekil-ikon svg { width: 28px; height: 24px; }

  /* Dokunma hedefleri en az 44 px */
  .plan-alan input[type=number] { min-height: 46px; font-size: 16px; }
  .plan-arac { min-height: 44px; min-width: 44px; }
  .plan-olcu-ac { display: inline-flex; }

  /* Kesit düğmesi sağ ALT köşeye: üstte ölçü çizgisini kapatıyordu */
  .plan-kesit-dugme {
    top: auto; bottom: 12px; right: 12px;
    min-height: 44px; padding: 12px 14px;
    font-size: 12px;
  }
  .plan-sigdir { min-height: 44px; padding: 12px 14px; top: auto; bottom: 12px; left: 12px; }

  /* Bildirim kesit düğmesinin üstünde çıksın */
  .plan-bildirim { bottom: 66px; }

  /* "Bir parçaya dokunun" balonu da düğmenin üstüne — dar ekranda ikisi
     de altta olduğu için üst üste biniyorlardı (20 Ağu). */
  .plan-bos-uyari { bottom: 66px; }

  /* --- Seçili parça kartı — mobilde kompakt ---
     Ölçülen sorun: kart ekranın üçte birini yiyor, ürün listesi aşağı
     itiliyordu. Artık: başlık satırında araçlar, ölçüler tek satırda,
     çipler ve döndür yatay kaydırmalı. */
  .plan-secili { padding: 8px 12px; }
  .plan-secili-basi { margin-bottom: 8px; }
  .plan-secili-basi b { font-size: 14px; }
  .plan-secili-eylem .plan-arac { min-height: 40px; padding: 8px 10px; font-size: 12px; }

  .plan-secili-olcu { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .plan-secili-olcu .plan-alan > span { font-size: 10px; }
  .plan-secili-olcu input[type=number] { min-height: 44px; padding: 6px; font-size: 15px; }

  .plan-onayar {
    overflow-x: auto; flex-wrap: nowrap;
    margin-top: 0; margin-bottom: 8px;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .plan-onayar::-webkit-scrollbar { display: none; }
  .plan-cip { flex: 0 0 auto; min-height: 40px; padding: 10px 12px; font-size: 12px; }

  /* Elle ölçü girme alanları katlı; "Ölçüyü elle gir" ile açılır */
  .plan-secili-olcu { display: none; }
  .plan-secili-olcu.acik { display: grid; margin-bottom: 8px; }

  /* Döndür ve uzaklık bilgisi tek satırda */
  .plan-secili-alt { margin-top: 8px; padding-top: 8px; }
  .plan-secili-alt .plan-arac { min-height: 40px; font-size: 12px; }
  .plan-mesafeler { font-size: 11px; }

  /* --- Üst çubuk tek satır --- */
  .plan-ust { padding: 8px 12px; gap: 8px; }
  .plan-ust-sol { gap: 6px; min-width: 0; }
  .plan-geri-dugme { padding: 8px; font-size: 0; }          /* yalnız ok kalsın */
  .plan-geri-dugme::before { content: "←"; font-size: 18px; }
  .plan-amac-etiket {
    font-size: 10px; padding: 5px 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 42vw;
  }
  .plan-ust-sag { gap: 6px; }
  .plan-ust .plan-arac { padding: 10px; font-size: 12px; }

  /* Gönder çubuğu her zaman altta */
  .plan-alt { padding: 10px 14px; }
  .plan-sayac { display: none; }
  .plan-alt .satir { flex: 1; }
  .plan-alt .dugme { flex: 1; justify-content: center; min-height: 48px; }

  /* Sitenin alt çağrı çubuğu bu sayfada gizlenir: plan aracının kendi
     "Planı gönder" düğmesi var, iki ayrı çağrı hem kafa karıştırıyor
     hem ekranın altından 90 px yiyordu. */
  body:has(.plan-sayfa) .mobil-cubuk { display: none !important; }
}

@media (max-width: 560px) {
  .plan-olcu-ikili { grid-template-columns: 1fr 1fr; gap: 8px; }
  .plan-ipucu { font-size: 11px; padding: 10px 12px; }

  /* "Temizle" dar ekranda yalnız simge */
  .plan-ust-sag .plan-arac:last-child { font-size: 0; padding: 12px; }
  .plan-ust-sag .plan-arac:last-child::before { content: "✕"; font-size: 14px; }
}


/* --- Çizim ekranı tam yükseklik ---------------------------------------------
   20 Ağu: sayfa her ekranda kayıyordu (1920×1040'ta 1412px) ve tuval
   olduğundan küçük kalıyordu. Çizici açıkken sayfa kilitlenir, plan alanı
   pencerenin tamamını kullanır.

   900px altında UYGULANMAZ: telefonda sol panel ile tuval alt alta akıyor,
   kilitlemek çizimi kullanılmaz hâle getirirdi.                            */

@media (min-width: 901px) {
  html.plan-tam-ekran,
  html.plan-tam-ekran body {
    overflow: hidden;
    height: 100%;
  }

  /* Çizici açıkken üstteki her şey (üst bant, menü) gizlenir —
     çalışma alanı kazanılır, "← Geri" düğmesi zaten plan çubuğunda. */
  html.plan-tam-ekran .ust,
  html.plan-tam-ekran .ust-bant,
  html.plan-tam-ekran footer,
  html.plan-tam-ekran .mobil-cubuk { display: none; }

  html.plan-tam-ekran .plan-ekran {
    height: 100dvh;
    min-height: 520px;
  }

  /* Sol panel kendi içinde kaysın, sayfa değil */
  html.plan-tam-ekran .plan-sol {
    overflow-y: auto;
    max-height: 100%;
  }
}

/* --- "Yarım kalan planınız var" penceresi -----------------------------------
   Tarayıcının confirm() kutusunun yerini aldı (20 Ağu): düğmelerde
   "Tamam / İptal" değil ne yapacağı yazıyor.                              */

.plan-devam .modal-kutu { max-width: 460px; }

.plan-devam-yazi {
  margin: 0 0 18px;
  font: 400 15px/1.6 var(--yazi-govde);
  color: var(--renk-metin-2);
}
.plan-devam-yazi b { color: var(--renk-metin); font-weight: 700; }

.plan-devam-dugmeler { display: flex; flex-direction: column; gap: 10px; }
.plan-devam-dugmeler .dugme { width: 100%; justify-content: center; }

.plan-devam-not {
  display: block; margin-top: 14px;
  font: 400 12px/1.5 var(--yazi-govde);
  color: var(--renk-silik, #6B7280);
}