/**
 * TASARIMCI — /tasarim sayfası.
 *
 * Tam ekran, üç sütunlu bir çalışma yüzeyi: araçlar · plan · önizleme.
 * Site kabuğunu (header/footer) kullanmıyor çünkü burası bir sayfa değil bir
 * uygulama; kaydırma çubuğu ve menü çizim yüzeyinden yer çalar.
 *
 * Renkler style.css'teki markadan geliyor ama burada YEREL olarak yeniden
 * tanımlı: sayfa kendi şablonunda çalışıyor ve ana stil dosyasına bağımlı
 * olmaması gerekiyor.
 */

:root {
	--tsr-bg: #f8f4ec;
	--tsr-yuzey: #ffffff;
	--tsr-murekkep: #221e1a;
	--tsr-murekkep-soft: #635c52;
	--tsr-murekkep-soluk: #948c7e;
	--tsr-cizgi: #e3d9c6;
	--tsr-altin: #fbb040;
	--tsr-altin-koyu: #e89f30;
	--tsr-hata: #c0392b;
	--tsr-iyi: #4a7c59;
	--tsr-panel: 272px;
}

/*
 * html'İ DE KİLİTLE, YALNIZ BODY'Yİ DEĞİL.
 *
 * style.css sitenin genelinde `html, body { overflow-x: hidden }` veriyor —
 * tek eksen verilince tarayıcı diğer ekseni sessizce `auto` yapıyor, yani
 * html gerçekte overflow-y: auto ile kayabilir durumda kalıyor. Aşağıdaki
 * .tasarim-page kuralı yalnızca body'yi kilitliyordu; html açık kaldığı için
 * sayfa (ve üstüne .tsr-liste-katman gibi fixed katmanlar) beklenmedik
 * şekilde kayabiliyordu. kitchen3d.css ve aura3d.css bu ikisini birden
 * kilitliyor, burada o kural hiç yoktu.
 */
html {
	overflow: hidden;
}

/* Tam ekran bir uygulama yüzeyiyiz; üstte WP'nin kendi çubuğu hem yer
   çalıyor hem de html'e margin-top ekleyip yukarıdaki kilidi bozuyordu. */
body.tasarim-page #wpadminbar {
	display: none;
}

.tasarim-page {
	margin: 0;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--tsr-murekkep);
	background: var(--tsr-bg);
	overflow: hidden;
}

.tsr {
	display: flex;
	flex-direction: column;
	height: 100vh;
	height: 100dvh;
}

/* --- Üst çubuk ---------------------------------------------------------- */

.tsr-ust {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 10px 16px;
	background: var(--tsr-yuzey);
	border-bottom: 1px solid var(--tsr-cizgi);
	flex: none;
}

/* Logo + başlık aynı bağlantı: tıklayınca siteye döner. */
.tsr-marka {
	display: flex;
	align-items: center;
	gap: 15px;
	flex: none;
	text-decoration: none;
	color: inherit;
}

.tsr-logo {
	display: block;
	height: 44px;
	width: auto;
}

.tsr-baslik {
	padding-left: 15px;
	border-left: 1px solid var(--tsr-cizgi);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--tsr-murekkep);
	white-space: nowrap;
}

.tsr-marka:hover .tsr-baslik { color: var(--tsr-altin-koyu); }

.tsr-adimlar {
	display: flex;
	gap: 6px;
	flex: 1;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.tsr-adimlar::-webkit-scrollbar { display: none; }

.tsr-adim {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 13px;
	border: 1px solid var(--tsr-cizgi);
	border-radius: 999px;
	background: transparent;
	color: var(--tsr-murekkep-soft);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s, border-color .15s, color .15s;
}

.tsr-adim:hover { border-color: var(--tsr-altin-koyu); color: var(--tsr-murekkep); }

.tsr-adim.is-aktif {
	background: var(--tsr-murekkep);
	border-color: var(--tsr-murekkep);
	color: #fff;
}

.tsr-adim-harf {
	display: grid;
	place-items: center;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: var(--tsr-altin);
	color: var(--tsr-murekkep);
	font-size: 11px;
	font-weight: 700;
}

.tsr-ust-sag { display: flex; gap: 8px; flex: none; }

.tsr-dugme {
	padding: 7px 13px;
	border: 1px solid var(--tsr-cizgi);
	border-radius: 6px;
	background: var(--tsr-yuzey);
	color: var(--tsr-murekkep-soft);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
}

.tsr-dugme:hover { border-color: var(--tsr-murekkep-soluk); color: var(--tsr-murekkep); }

/* --- İkon düğmeler (geri al / yinele / yardım) --------------------------- */

.tsr-ikon-dugme {
	display: grid;
	place-items: center;
	/* 34px: dokunma hedefi için alt sınır. Metin düğmeleri zaten bu yükseklikte,
	   ikonlar da onların altına düşmemeli. */
	width: 34px;
	height: 34px;
	border: 1px solid var(--tsr-cizgi);
	border-radius: 6px;
	background: var(--tsr-yuzey);
	color: var(--tsr-murekkep-soft);
	font: inherit;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.tsr-ikon-dugme:hover:not(:disabled) {
	border-color: var(--tsr-altin-koyu);
	color: var(--tsr-murekkep);
}

/* Geri alınacak bir şey yokken düğme sönük ama YERİNDE duruyor: kaybolan bir
   düğme, arayüzün her tıklamada yer değiştirmesi demek. */
.tsr-ikon-dugme:disabled { opacity: .35; cursor: default; }

.tsr-gerial { display: flex; gap: 4px; }

/* --- Gövde: araçlar · plan · önizleme ----------------------------------- */

.tsr-govde {
	display: grid;
	grid-template-columns: var(--tsr-panel) minmax(0, 1fr) minmax(0, 1fr);
	flex: 1;
	min-height: 0;
}

.tsr-yan {
	display: flex;
	flex-direction: column;
	background: var(--tsr-yuzey);
	border-right: 1px solid var(--tsr-cizgi);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/*
 * İPUCU — tek satır birincil talimat, gerisi "Ayrıntı" arkasında.
 *
 * Eskiden 400+ karakterlik bir paragraftı ve okunmuyordu; okunmayan bir ipucu
 * yer kaplamaktan başka bir iş yapmıyor.
 */
.tsr-ipucu {
	margin: 0;
	padding: 12px 16px;
	background: #fdf7e8;
	border-bottom: 1px solid var(--tsr-cizgi);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--tsr-murekkep-soft);
}

/* Taşıma sürerken ipucu rengi değişiyor: kip değiştiğini söylemenin en
   hızlı yolu, metni okumaya gerek kalmadan. */
.tsr-ipucu.is-tasima {
	background: #fdf0d8;
	border-left: 3px solid var(--tsr-altin);
	color: var(--tsr-murekkep);
	font-weight: 500;
}

.tsr-ipucu-ok {
	display: block;
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--tsr-altin-koyu);
	font: inherit;
	font-size: 11.5px;
	text-decoration: underline;
	cursor: pointer;
}

.tsr-ipucu-detay {
	margin: 8px 0 0;
	padding-left: 16px;
	font-size: 12px;
	line-height: 1.5;
}

.tsr-ipucu-detay li { margin-bottom: 5px; }

.tsr-grup { padding: 14px 16px; border-bottom: 1px solid var(--tsr-cizgi); }

.tsr-grup-baslik {
	margin: 0 0 9px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--tsr-murekkep-soluk);
}

.tsr-segment { display: flex; flex-wrap: wrap; gap: 6px; }

.tsr-segment-dugme {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 11px;
	border: 1px solid var(--tsr-cizgi);
	border-radius: 6px;
	background: transparent;
	color: var(--tsr-murekkep-soft);
	font: inherit;
	font-size: 12.5px;
	cursor: pointer;
}

.tsr-segment-dugme:hover { border-color: var(--tsr-murekkep-soluk); }

.tsr-segment-dugme.is-aktif {
	background: var(--tsr-murekkep);
	border-color: var(--tsr-murekkep);
	color: #fff;
}

.tsr-nokta {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	/* Koyu zeminde de görünsün diye ince bir halka. */
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}

/* --- Yön okları (ölçüyle kenar ekleme) ---------------------------------- */

/*
 * Oklar artı düzeninde: ↑ üstte, ← → yanlarda, ↓ altta. Dört düğmeyi yan yana
 * dizmek daha az yer kaplardı ama hangi okun hangi yön olduğunu okumak için
 * durup düşünmek gerekiyordu — burada yerleşimin kendisi söylüyor.
 */
.tsr-yonler {
	display: grid;
	grid-template-columns: repeat(3, 34px);
	grid-template-rows: repeat(3, 30px);
	gap: 4px;
	justify-content: center;
	margin-top: 10px;
}

.tsr-yon {
	border: 1px solid var(--tsr-cizgi);
	border-radius: 6px;
	background: var(--tsr-bg);
	color: var(--tsr-murekkep);
	font: inherit;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.tsr-yon:hover { border-color: var(--tsr-altin-koyu); background: #fdf7e8; }

/* Okların artı düzenindeki yerleri — kaynak sırası ↑ → ↓ ← */
.tsr-yonler .tsr-yon:nth-child(1) { grid-area: 1 / 2; }
.tsr-yonler .tsr-yon:nth-child(2) { grid-area: 2 / 3; }
.tsr-yonler .tsr-yon:nth-child(3) { grid-area: 3 / 2; }
.tsr-yonler .tsr-yon:nth-child(4) { grid-area: 2 / 1; }

.tsr-genis-dugme {
	width: 100%;
	margin-top: 9px;
	padding: 7px 12px;
	border: 1px solid var(--tsr-cizgi);
	border-radius: 6px;
	background: var(--tsr-bg);
	color: var(--tsr-murekkep-soft);
	font: inherit;
	font-size: 12.5px;
	cursor: pointer;
}

.tsr-genis-dugme:hover { border-color: var(--tsr-altin-koyu); color: var(--tsr-murekkep); }

/* Sağ tık menüsünden "Sağa/Sola modül ekle" seçilince katalogda beliren
   bekleyen-hedef şeridi — normal katalogdan görsel olarak ayrışmalı, yoksa
   kullanıcı hâlâ hedefli eklediğini fark etmeden başka bir yere tıklar. */
.tsr-bitisik-banner {
	margin-bottom: 10px;
	padding: 8px 10px;
	border: 1px solid var(--tsr-altin-koyu);
	border-radius: 6px;
	background: #fdf7e8;
}
.tsr-bitisik-banner .tsr-panel-not { margin: 0 0 8px; color: var(--tsr-murekkep); }
.tsr-bitisik-banner .tsr-genis-dugme { margin-top: 0; }
.tsr-bitisik-banner .tsr-genis-dugme + .tsr-genis-dugme { margin-top: 6px; }

/* --- Alanlar ------------------------------------------------------------ */

.tsr-alan {
	display: grid;
	grid-template-columns: 1fr 72px auto;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	font-size: 12.5px;
	color: var(--tsr-murekkep-soft);
}

.tsr-alan-giris {
	width: 100%;
	padding: 5px 7px;
	border: 1px solid var(--tsr-cizgi);
	border-radius: 5px;
	background: var(--tsr-bg);
	color: var(--tsr-murekkep);
	font: inherit;
	font-size: 12.5px;
}

.tsr-alan-giris:focus {
	outline: 2px solid var(--tsr-altin);
	outline-offset: -1px;
}

/* select tam genişlik istiyor; birim hücresi ona ait değil. */
.tsr-alan:has(select) { grid-template-columns: 1fr 72px; }
.tsr-alan:has(select) .tsr-alan-birim { display: none; }

.tsr-alan-birim { font-size: 11px; color: var(--tsr-murekkep-soluk); }

/* Bir alanın ALTINDA duran açıklama (ör. boyun yanına gelen ayak payı).
   .tsr-alan ızgarasının dışında: dördüncü bir hücre 1fr/72px/auto düzenini
   bozardı, oysa bu metin tam genişlik istiyor. */
.tsr-alan-not {
	margin: 3px 0 0;
	font-size: 11px;
	line-height: 1.35;
	color: var(--tsr-murekkep-soluk);
}

/* --- Sipariş kutusu (fiyat penceresinin sonu) --------------------------- */

/* Listenin devamı değil, akışın SONU: üstten çizgiyle ayrılıyor ve düğme
   ortada duruyor ki tablodan sonra göz onu bulsun. */
.tsr-liste-siparis {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 2px solid var(--tsr-cizgi);
	text-align: center;
}

/* Taksit düğmenin hemen üstünde: toplam tablonun sonunda büyük yazıyor,
   ödeme kolaylığı ise KARAR ANINDA okunmalı. Dipnota koysaydık, tutarı
   görüp vazgeçen kişi oraya bakmadan kapatırdı. */
.tsr-siparis-taksit {
	margin: 0 0 10px;
	font-size: 15px;
	color: var(--tsr-murekkep);
}

.tsr-siparis-taksit strong { font-weight: 700; }

.tsr-siparis-aylik { color: var(--tsr-altin-koyu); font-weight: 700; }

.tsr-siparis-dugme {
	min-width: 240px;
	padding: 11px 26px;
	font-size: 15px;
	font-weight: 700;
}

.tsr-liste-siparis .tsr-liste-not {
	max-width: 460px;
	margin: 9px auto 0;
}

/* --- Renk seçimi (fotoğraflı liste) ------------------------------------- */

/* Neden `<select>` değil: tarayıcının açılır listesi option içine görsel
   almıyor. "Dokulu Palermo" ile "Dokulu Koton Bej" arasını ada bakarak
   seçmek katalog elde olmadan mümkün değil (bkz. main.js renkAlani). */

.tsr-renk-alan {
	position: relative;
	grid-template-columns: 1fr 72px;
}

.tsr-renk-dugme {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: 4px 6px;
	border: 1px solid var(--tsr-cizgi);
	border-radius: 5px;
	background: var(--tsr-bg);
	color: var(--tsr-murekkep);
	font: inherit;
	font-size: 12.5px;
	text-align: left;
	cursor: pointer;
}

.tsr-renk-dugme:hover { border-color: var(--tsr-altin-koyu); }

.tsr-renk-dugme:focus-visible,
.tsr-renk-secenek:focus-visible {
	outline: 2px solid var(--tsr-altin);
	outline-offset: -1px;
}

/* Kare: dokusu olan renkte katalog fotoğrafı, olmayanda düz hex (main.js
   renkKutusu). Kenarlık şart — beyaz bir kapak beyaz zeminde kaybolurdu. */
.tsr-renk-kutu {
	flex: none;
	width: 20px;
	height: 20px;
	border: 1px solid var(--tsr-cizgi);
	border-radius: 3px;
	background-color: var(--tsr-yuzey);
	background-size: cover;
	background-position: center;
}

.tsr-renk-ad {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tsr-renk-ok { flex: none; color: var(--tsr-murekkep-soluk); font-size: 10px; }

.tsr-renk-liste {
	position: absolute;
	z-index: 40;
	top: 100%;
	right: 0;
	width: max-content;
	min-width: 190px;
	max-width: 240px;
	/* 29 renk tek ekrana sığmıyor; liste kendi içinde kayıyor ki panel
	   uzayıp altındaki alanları ekrandan atmasın. */
	max-height: 320px;
	overflow-y: auto;
	margin-top: 3px;
	padding: 4px;
	border: 1px solid var(--tsr-cizgi);
	border-radius: 6px;
	background: var(--tsr-yuzey);
	box-shadow: 0 8px 24px rgba(34, 30, 26, .18);
}

.tsr-renk-secenek {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	/* Parmakla dokunulabilir yükseklik: yerel seçici tekerleğinden
	   vazgeçtik, satırların kendisi dokunulabilir olmalı. */
	min-height: 34px;
	padding: 5px 6px;
	border: 0;
	border-radius: 4px;
	background: none;
	color: var(--tsr-murekkep);
	font: inherit;
	font-size: 12.5px;
	text-align: left;
	cursor: pointer;
}

.tsr-renk-secenek:hover { background: var(--tsr-bg); }
.tsr-renk-secenek.is-secili { background: #fdf2dc; font-weight: 600; }

/* Üst şeritte alanlar yatay: buton içeriği kadar yer alsın, uzun renk adı
   şeridi tek başına yutmasın (yan paneldeki 1fr/72px ızgarası burada
   geçerli değil — bkz. .tsr-plan-genel .tsr-alan). */
.tsr-plan-genel .tsr-renk-alan { display: flex; }
.tsr-plan-genel .tsr-renk-dugme { width: auto; max-width: 170px; }
.tsr-plan-genel .tsr-renk-liste { left: auto; right: 0; }

.tsr-panel { padding: 14px 16px; }

.tsr-panel-baslik {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 700;
}

.tsr-panel-bos,
.tsr-panel-not {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--tsr-murekkep-soluk);
}

.tsr-sil {
	margin-top: 14px;
	padding: 6px 12px;
	border: 1px solid #e6c9c4;
	border-radius: 6px;
	background: #fdf2f0;
	color: var(--tsr-hata);
	font: inherit;
	font-size: 12.5px;
	cursor: pointer;
}

.tsr-sil:hover { background: #f9e3df; }

/* --- Plan ve önizleme --------------------------------------------------- */

/*
 * Plan penceresi dikey akıyor: üstte seviye şeridi, altında tuval. Şerit
 * kaplama (overlay) olarak konabilirdi ama planın sol üst köşesini kalıcı
 * olarak yerdi — orası çizimin en çok kullanılan yeri.
 */
/*
 * IZGARA GÖZÜNÜN İKİ EKSENİ DE SIFIRA İNEBİLMELİ.
 *
 * `min-width: 0` buradaydı, `min-height: 0` yoktu — oysa ızgara öğesinin
 * kendiliğinden en küçük boyu İÇERİĞİNİN en küçük boyu, o içerik de tuval.
 * Her iki tuval de JS'ten width/height ÖZNİTELİĞİYLE boyutlanıyor ve o
 * öznitelik yerleşimde gerçek bir yükseklik sayılıyor; ResizeObserver da o
 * boyu okuyup tuvali yeniden boyutluyor. Kilitlenen döngü şu: satır tuvalden
 * büyüyor, tuval satırdan. Panel görünümün onlarca piksel ALTINA taşıyordu —
 * 3D'nin ve planın alt şeridi hiç görünmüyor, alta yaslanan her arayüz öğesi
 * (ışık kadranı) ekranın dışında kalıyordu. Görünüm küçüldüğünde de panel
 * eski boyunda takılı kalıyordu; küçülme yolu yoktu.
 *
 * İkisi de tek satırın gözü olduğu için biri şişince ÖTEKİ de uzuyor: kadran
 * önizlemede duruyor ama onu ekranın altına iten şey plan tuvaliydi. Bu yüzden
 * düzeltme ikisinde birden.
 */
.tsr-plan {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	border-right: 1px solid var(--tsr-cizgi);
}

.tsr-plan-ust {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: none;
	padding: 7px 12px;
	background: var(--tsr-yuzey);
	border-bottom: 1px solid var(--tsr-cizgi);
}

.tsr-plan-ad {
	font-size: 11px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--tsr-murekkep-soluk);
	white-space: nowrap;
}

.tsr-seviyeler {
	display: flex;
	gap: 4px;
	margin-left: auto;
}

.tsr-seviye {
	padding: 5px 12px;
	border: 1px solid var(--tsr-cizgi);
	border-radius: 5px;
	background: var(--tsr-bg);
	color: var(--tsr-murekkep-soft);
	font: inherit;
	font-size: 12.5px;
	cursor: pointer;
	white-space: nowrap;
}

.tsr-seviye:hover { border-color: var(--tsr-altin-koyu); color: var(--tsr-murekkep); }

.tsr-seviye.is-aktif {
	background: var(--tsr-murekkep);
	border-color: var(--tsr-murekkep);
	color: #fff;
}

/*
 * GENEL ŞERİT — planın üstünde, çizimin TAMAMINI değiştiren alanlar.
 *
 * Duvarlar adımında oda ölçüleri, Modüller adımında mutfağın kapak modeli
 * ve renkleri. Yan panelde dururken tek bir dolabın ince ayarıyla aynı
 * sütundaydılar; burada kapsamları konumlarından okunuyor.
 *
 * Başlık solda ve sabit: şeridin neye ait olduğu, alanlar sarıp alt satıra
 * geçse bile ilk okunan şey olmalı.
 */
.tsr-plan-genel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	flex: none;
	padding: 8px 12px;
	background: var(--tsr-yuzey);
	border-bottom: 1px solid var(--tsr-cizgi);
}

/* [hidden] tek başına display:flex'i yenemiyor. */
.tsr-plan-genel[hidden] { display: none; }

.tsr-genel-baslik {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--tsr-murekkep-soluk);
	white-space: nowrap;
}

/* Alanlar burada YATAY duruyor: yan paneldeki 1fr/72px ızgarası bir sütun
   için doğru, tek satır için değil — orada etiket alanın üstünde değil
   yanında ve sadece kendi genişliği kadar yer alıyor. */
.tsr-plan-genel .tsr-alan {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 0;
	white-space: nowrap;
}

.tsr-plan-genel .tsr-alan-giris { width: 72px; }

/* Seçim kutuları içeriğine göre büyüyor ama tavanı var: "Beyaz Mat Lake"
   sığmalı, uzun bir kod şeridi tek başına yutmamalı. */
.tsr-plan-genel .tsr-alan:has(select) .tsr-alan-giris { width: auto; max-width: 170px; }

/* Uyarı metni satırın devamı değil, altındaki not: tam genişlik alıyor. */
.tsr-plan-genel .tsr-panel-not { flex-basis: 100%; margin: 0; }

#tsr-canvas {
	display: block;
	flex: 1;
	width: 100%;
	min-height: 0;
	touch-action: none;
}

.tsr-onizleme {
	position: relative;
	min-width: 0;
	/* .tsr-plan'daki ile aynı gerekçe — ızgara gözü içeriğine kilitlenmesin. */
	min-height: 0;
	/* Panel küçülürken tuval bir kare geriden geliyor (ResizeObserver rAF'ta
	   çalışıyor); kırpma o karede tuvalin komşu panele taşmasını engelliyor. */
	overflow: hidden;
	background: #eceae5;
}

.tsr-onizleme canvas { display: block; }

/*
 * ÖNİZLEMENİN ÜST ŞERİDİ.
 *
 * Tuvalin üstüne biniyor, akışa girmiyor: onizleme.js tuvali kabın
 * clientWidth/Height'ına göre boyutluyor, akışa giren bir şerit 3D'yi
 * kırpardı. Şerit pointer geçirgen — yalnızca düğme tıklama alıyor ki üst
 * kenardan tutup kamerayı döndürmek hâlâ mümkün olsun.
 */
.tsr-onizleme-ust {
	position: absolute;
	z-index: 2;
	top: 10px;
	left: 12px;
	right: 12px;
	display: flex;
	align-items: center;
	gap: 10px;
	pointer-events: none;
}

.tsr-etiket {
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .82);
	font-size: 11px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--tsr-murekkep-soluk);
}

.tsr-onizleme-dugme {
	margin-left: auto;
	padding: 5px 12px;
	border: 1px solid var(--tsr-cizgi);
	border-radius: 999px;
	background: rgba(255, 255, 255, .9);
	color: var(--tsr-murekkep-soft);
	font: inherit;
	font-size: 12.5px;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	pointer-events: auto;
}

.tsr-onizleme-dugme:hover { background: #fff; color: var(--tsr-murekkep); }

/* --- Işık kadranı --------------------------------------------------------
 *
 * Önizlemenin sağ alt köşesinde duran yuvarlak: güneşin plandaki yönü.
 *
 * OKUMA YÖNÜ EKRANLA AYNI. Kol `rotate(θ)` ile döndürülüyor; CSS'te pozitif
 * dönüş saat yönüdür ve θ=0 sağı gösterir, yani topuz ekranda (cos θ, sin θ)
 * noktasında oturuyor. onizleme.js güneşi dünyada aynı çifte koyuyor (x sağa,
 * z aşağı) — kadranın sağındaki topuz, planın sağından gelen ışık demek.
 *
 * Alt köşe: üstte önizleme şeridi, solda plan var. Burası 3D'de en az
 * tıklanan bölge; kadran hiçbir şeyin önünü kesmiyor ama kaybolmuyor da.
 */

.tsr-isik {
	position: absolute;
	z-index: 2;
	right: 14px;
	bottom: 14px;
	width: 78px;
	height: 78px;
	border-radius: 50%;
	border: 1px solid var(--tsr-cizgi);
	background: rgba(255, 255, 255, .82);
	box-shadow: 0 2px 10px rgba(34, 30, 26, .10);
	/* Tuval OrbitControls'a bağlı; kadran kendi jestini alıyor ama tarayıcının
	   kaydırma/yakınlaştırma jesti araya girmemeli. */
	touch-action: none;
	cursor: grab;
	/* Sürüklerken metin seçimi başlarsa imleç kadranı bırakıyor. */
	user-select: none;
	-webkit-user-select: none;
}

.tsr-isik.is-cevriliyor { cursor: grabbing; }
.tsr-isik:hover { background: rgba(255, 255, 255, .95); }

.tsr-isik:focus { outline: none; }
.tsr-isik:focus-visible {
	outline: 2px solid var(--tsr-altin);
	outline-offset: 2px;
}

/*
 * KADEME ÇİZGİLERİ — 30 derecede bir, yalnız kenarda.
 *
 * Konik gradyan diskin tamamını kaplayan ışınlar üretiyor; radyal maske
 * bunların yalnız dış halkasını bırakıyor. Ayrı bir öğe olmasının sebebi bu:
 * maske .tsr-isik'e verilseydi kolu ve sayıyı da keserdi.
 */
.tsr-isik-yuz {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: repeating-conic-gradient(
		from -1deg,
		var(--tsr-murekkep-soluk) 0 2deg,
		transparent 2deg 30deg
	);
	opacity: .45;
	/*
	 * `closest-side` ŞART. Yazılmazsa radyal gradyan `farthest-corner`'a
	 * düşüyor: %100 dairenin yarıçapı değil, KARENİN köşesine olan uzaklık
	 * (yarıçapın 1.41 katı) oluyor. O hâlde maskenin opak halkası öğenin
	 * dışında kalıyor ve kademe çizgileri hiç görünmüyordu — çizilmiyorlar
	 * değil, tamamen maskeleniyorlardı.
	 */
	-webkit-mask: radial-gradient(circle closest-side, transparent 0 72%, #000 76%);
	mask: radial-gradient(circle closest-side, transparent 0 72%, #000 76%);
	pointer-events: none;
}

/*
 * KOL — merkezden topuza uzanan hüzme.
 *
 * Gradyan bilerek topuzdan MERKEZE doğru soluyor: ışığın geldiği yönü
 * gösteriyor, çıktığı yönü değil. transform-origin sol kenarda çünkü kol
 * merkeze çakılı ve ucu dönüyor.
 */
.tsr-isik-kol {
	position: absolute;
	left: 50%;
	top: calc(50% - 1.5px);
	width: calc(50% - 9px);
	height: 3px;
	border-radius: 2px;
	transform-origin: 0 50%;
	background: linear-gradient(to right, rgba(251, 176, 64, 0), var(--tsr-altin));
	pointer-events: none;
}

.tsr-isik-topuz {
	position: absolute;
	right: -9px;
	top: 50%;
	width: 15px;
	height: 15px;
	margin-top: -7.5px;
	border-radius: 50%;
	background: var(--tsr-altin);
	border: 1.5px solid #fff;
	box-shadow: 0 0 0 1px var(--tsr-altin-koyu), 0 0 9px rgba(251, 176, 64, .65);
}

/* Derece merkezde: kadranı çevirirken bakılan yer kolun ucu değil ortası. */
.tsr-isik-deger {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: var(--tsr-murekkep-soluk);
	pointer-events: none;
}

.tsr-isik.is-cevriliyor .tsr-isik-deger { color: var(--tsr-murekkep); }

/*
 * KADRANIN ÖLÇÜSÜ ÖNİZLEMENİN BOYUNA GÖRE.
 *
 * Parmakla çevrilen bir tutamak büyük olmalı — ama yalnızca sığdığı yerde.
 * Telefonda önizleme paneli 130 piksel civarında kalıyor (plan üstte, araçlar
 * altta); orada 96 piksellik bir daire 3D'nin yarısını kapatıyordu, yani
 * ışığı görmek için ışık denetimini büyütmüş oluyorduk. Tablette bu sorun yok,
 * o yüzden dokunmatik büyütmesi dar ekranı DIŞARIDA bırakıyor.
 */
@media (pointer: coarse) and (min-width: 701px) {
	.tsr-isik { width: 96px; height: 96px; }
	.tsr-isik-kol { width: calc(50% - 11px); }
}

@media (max-width: 700px) {
	.tsr-isik {
		right: 10px;
		bottom: 10px;
		width: 58px;
		height: 58px;
	}
	.tsr-isik-kol { width: calc(50% - 7px); }
	.tsr-isik-topuz {
		right: -7px;
		width: 12px;
		height: 12px;
		margin-top: -6px;
	}
	.tsr-isik-deger { font-size: 9.5px; }
}


/* --- Durum çubuğu ------------------------------------------------------- */

.tsr-durum {
	flex: none;
	padding: 7px 16px;
	border-top: 1px solid var(--tsr-cizgi);
	background: var(--tsr-yuzey);
	font-size: 12px;
	color: var(--tsr-murekkep-soft);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tsr-durum.is-hata { background: #fdf2f0; color: var(--tsr-hata); }
.tsr-durum.is-iyi { color: var(--tsr-iyi); }

/* --- Dar ekran ----------------------------------------------------------
 *
 * Üç sütun 1100 pikselin altında okunmaz hâle geliyor: plan da önizleme de
 * kullanılamayacak kadar daralıyor. Bu genişlikte önizleme plandan SONRA,
 * alt alta geliyor — çizim yüzeyi tam genişlik alıyor.
 */

@media (max-width: 1100px) {
	.tsr-govde {
		grid-template-columns: 240px minmax(0, 1fr);
		grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr);
	}
	.tsr-yan { grid-row: 1 / span 2; }
	.tsr-plan { border-right: 0; border-bottom: 1px solid var(--tsr-cizgi); }
}

@media (max-width: 700px) {
	.tsr-govde {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr) minmax(0, 0.8fr) auto;
	}
	.tsr-yan {
		grid-row: 3;
		border-right: 0;
		border-top: 1px solid var(--tsr-cizgi);
		max-height: 44vh;
	}
	.tsr-adim-ad { display: none; }
	/* Dar ekranda başlık, adım çubuğunun yerini yiyor; logo kimliği taşımaya
	   tek başına yetiyor. */
	.tsr-baslik { display: none; }
	.tsr-logo { height: 32px; }
	/* Dar ekranda üst çubuk taşıyor. Düğmeleri GİZLEMİYORUZ — "yeni plan"
	   telefonda da gerekebilir; sağ grup yatay kaydırılabilir oluyor. */
	.tsr-ust-sag { overflow-x: auto; scrollbar-width: none; }
	.tsr-ust-sag::-webkit-scrollbar { display: none; }
	.tsr-tost { bottom: calc(50vh + 12px); }

	/*
	 * ŞERİT SARMIYOR, KAYIYOR.
	 *
	 * Telefonda plan zaten 200 piksel civarında; ikinci bir şerit satırı
	 * tuvalin üçte birini yiyordu. Üst çubukta alınan kararla aynı: alan
	 * gizlenmiyor, yatay kaydırılıyor.
	 */
	.tsr-plan-genel { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.tsr-plan-genel::-webkit-scrollbar { display: none; }
	.tsr-plan-genel .tsr-alan { flex: none; }
}

/* --- Telefon yatay ------------------------------------------------------
 *
 * Telefon yatayken 844px genişliğinde oluyor, yani yukarıdaki dar ekran
 * kuralları HİÇ uygulanmıyordu: üç sütun düzeni kalıyor ve 390 piksellik
 * yükseklikte plan da önizleme de kullanılamaz hâle geliyordu. Ölçüt burada
 * genişlik değil YÜKSEKLİK olmalı.
 */

@media (max-height: 520px) and (pointer: coarse) {
	.tsr-ust { padding: 5px 10px; gap: 10px; }
	.tsr-logo { height: 26px; }
	.tsr-baslik { display: none; }
	.tsr-adim-ad { display: none; }
	.tsr-ust-sag { overflow-x: auto; scrollbar-width: none; }
	.tsr-govde { grid-template-columns: 210px minmax(0, 1fr) minmax(0, 1fr); }
	.tsr-ipucu { padding: 8px 12px; font-size: 12px; }
	.tsr-tost { bottom: 12px; }
	/* Yatay telefonda dikey yer daha da kıt — şerit tek satır kalıyor. */
	.tsr-plan-genel { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 6px 12px; }
	.tsr-plan-genel::-webkit-scrollbar { display: none; }
	.tsr-plan-genel .tsr-alan { flex: none; }
	/* Kutular alçalıyor ama YAZI 16px kalıyor: küçültülseydi iOS odakta
	   sayfayı kendiliğinden yakınlaştırırdı. Kazanılan her piksel tuvale. */
	.tsr-plan-genel .tsr-alan-giris { padding: 3px 7px; }
}

/* --- Dokunmatik cihazlar ------------------------------------------------
 *
 * Ölçüt `pointer: coarse` — ekran genişliği değil. 1024 piksellik bir tablet
 * masaüstü sayılıyordu ve 24 piksellik hedefler parmakla ıskalanıyordu.
 */

@media (pointer: coarse) {
	.tsr-segment-dugme,
	.tsr-seviye,
	.tsr-dugme { padding: 9px 13px; }

	.tsr-ikon-dugme { width: 40px; height: 40px; }

	.tsr-tip { padding: 9px 10px; }

	.tsr-alan { margin-top: 11px; }
	.tsr-alan-giris { padding: 8px 8px; font-size: 16px; }

	/* Menü parmakla kullanılıyor: satırlar daha yüksek, menü daha geniş. */
	.tsr-menu { min-width: 240px; }
	.tsr-menu-oge { padding: 12px 12px; font-size: 14px; }

	/* Etiketi sürükleyerek sayı değiştirme parmakla da çalışıyor ama
	   keşfedilmesi imkânsız; imleç ipucu yok, bu yüzden altı çizili. */
	.tsr-scrub { text-decoration: underline dotted var(--tsr-cizgi); }

}

/* --- Güvenli alan (çentik / alt çubuk) ---------------------------------- */

.tsr-ust { padding-left: max(16px, env(safe-area-inset-left)); }
.tsr-durum {
	padding-left: max(16px, env(safe-area-inset-left));
	padding-bottom: max(7px, env(safe-area-inset-bottom));
}

/* --- Modül katalogu ------------------------------------------------------ */

/*
 * Tipler tek sütun: adları uzun ("Boydolap Fırın Mikrodalga 2 Çekmece") ve
 * ızgaraya dizilince hepsi kırpılıyordu. Dikey liste kısa da olsa okunur.
 */
.tsr-tipler {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-top: 8px;
	max-height: 190px;
	overflow-y: auto;
}

/* Sabit ve kısa listeler (hazır plan şekilleri) kaydırma kutusu istemiyor. */
.tsr-tipler.is-tam { max-height: none; overflow: visible; }

.tsr-tip {
	padding: 6px 9px;
	border: 1px solid transparent;
	border-radius: 5px;
	background: var(--tsr-bg);
	color: var(--tsr-murekkep-soft);
	font: inherit;
	font-size: 12.5px;
	text-align: left;
	cursor: pointer;
}

.tsr-tip:hover { border-color: var(--tsr-cizgi); color: var(--tsr-murekkep); }

.tsr-tip.is-aktif {
	background: var(--tsr-murekkep);
	border-color: var(--tsr-murekkep);
	color: #fff;
}

/* Üretim stok kodu — okunması gereken bir kimlik, süs değil. */
.tsr-kod {
	margin: 11px 0 0;
	padding: 7px 9px;
	border: 1px dashed var(--tsr-cizgi);
	border-radius: 5px;
	background: var(--tsr-bg);
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--tsr-murekkep);
	word-break: break-all;
}

/* --- Kot girişi (plan seviyesi şeridi) ----------------------------------- */

.tsr-kot-girisi {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-left: 8px;
	padding-left: 12px;
	border-left: 1px solid var(--tsr-cizgi);
	font-size: 12px;
	color: var(--tsr-murekkep-soft);
	white-space: nowrap;
}

.tsr-kot-girisi input {
	width: 58px;
	padding: 4px 6px;
	border: 1px solid var(--tsr-cizgi);
	border-radius: 5px;
	background: var(--tsr-bg);
	color: var(--tsr-murekkep);
	font: inherit;
	font-size: 12.5px;
}

.tsr-kot-girisi input:focus { outline: 2px solid var(--tsr-altin); outline-offset: -1px; }

/* --- Kesit tutamağı etiketi (3D önizleme, CSS2DObject) ------------------- */

.tsr-kesit-etiket {
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(34, 30, 26, 0.82);
	color: #fff;
	font-size: 11.5px;
	font-weight: 600;
	white-space: nowrap;
	transform: translateY(-50%);
	pointer-events: none;
}

/* --- Kapak listesi (modül paneli) ---------------------------------------
 *
 * Üretim ölçüsünün kendisi. Stok kodunun hemen altında duruyor çünkü ikisi
 * aynı soruyu cevaplıyor: "bu dolap tam olarak ne olarak ısmarlanacak?"
 * Ölçüler tabloda değil listede — sipariş listesi değil, kontrol listesi.
 */

.tsr-kapaklar { margin-top: 11px; }

.tsr-kapaklar-baslik {
	margin: 0 0 5px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--tsr-murekkep-soluk);
}

.tsr-kapak-liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tsr-kapak {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 3px 0;
	border-bottom: 1px solid var(--tsr-cizgi);
	font-size: 12px;
	line-height: 1.4;
}

.tsr-kapak:last-child { border-bottom: 0; }

.tsr-kapak-olcu {
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: 11.5px;
}

/* Kör panel gövde renginde üretiliyor — listede de kapaklardan ayrışmalı,
   yoksa toplamda "bir kapak fazla" gibi okunur. */
.tsr-kapak.is-govde .tsr-kapak-olcu { color: var(--tsr-murekkep-soluk); }
.tsr-kapak.is-govde .tsr-kapak-olcu::after {
	content: " · gövde renginde";
	font-family: inherit;
	font-size: 10.5px;
}

.tsr-kapak-toplam {
	margin: 6px 0 0;
	font-size: 11.5px;
	color: var(--tsr-murekkep-soluk);
}

/* --- Bağlam menüsü (2D plan + 3D önizleme ortak) -------------------------
 *
 * Taşımanın kapısı burası. Tıklama artık hiçbir şeyi kaydırmadığı için bir
 * öğeyi yerinden oynatmak bilinçli bir seçim olmak zorunda; menü o seçimin
 * yapıldığı yer.
 */

.tsr-menu {
	position: fixed;
	z-index: 60;
	min-width: 208px;
	padding: 5px;
	border: 1px solid var(--tsr-cizgi);
	border-radius: 8px;
	background: var(--tsr-yuzey);
	box-shadow: 0 10px 30px rgba(34, 30, 26, .18);
	font-size: 13px;
}

.tsr-menu-baslik {
	padding: 6px 10px 7px;
	border-bottom: 1px solid var(--tsr-cizgi);
	margin-bottom: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tsr-murekkep-soluk);
	white-space: nowrap;
}

.tsr-menu-oge {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	width: 100%;
	/* 9px dikey dolgu = 36px satır: fare için bol, parmak için yeterli. */
	padding: 9px 10px;
	border: 0;
	border-radius: 5px;
	background: none;
	color: var(--tsr-murekkep);
	font: inherit;
	font-size: 13px;
	text-align: left;
	cursor: pointer;
}

.tsr-menu-oge:hover:not(:disabled) { background: #f4efe3; }
.tsr-menu-oge:disabled { opacity: .4; cursor: default; }
.tsr-menu-oge.is-tehlike { color: var(--tsr-hata); }
.tsr-menu-oge.is-tehlike:hover { background: #fdf2f0; }

.tsr-menu-oge kbd {
	padding: 1px 5px;
	border: 1px solid var(--tsr-cizgi);
	border-radius: 4px;
	background: var(--tsr-bg);
	font-family: ui-monospace, Consolas, monospace;
	font-size: 10.5px;
	color: var(--tsr-murekkep-soluk);
}

.tsr-menu-ayrac {
	height: 1px;
	margin: 4px 6px;
	background: var(--tsr-cizgi);
}

/* --- Tost ----------------------------------------------------------------
 *
 * Durum çubuğundan AYRI: o kalıcı doğrulama sonucunu taşıyor, bu geçici
 * işlem bildirimini. Aynı yeri paylaşsalardı biri diğerini silerdi.
 */

.tsr-tost {
	position: fixed;
	left: 50%;
	bottom: 54px;
	z-index: 55;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 9px 16px;
	border-radius: 999px;
	background: rgba(34, 30, 26, .93);
	color: #fff;
	font-size: 12.5px;
	white-space: nowrap;
	box-shadow: 0 8px 24px rgba(34, 30, 26, .22);
	/* Kapalıyken tıklamayı da yutmamalı: görünmez ama üstte duran bir şerit,
	   planın alt kenarında ölü bölge yaratırdı. */
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 8px);
	transition: opacity .16s, transform .16s;
}

.tsr-tost.is-acik {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, 0);
}

.tsr-tost-eylem {
	padding: 3px 10px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 999px;
	background: none;
	color: var(--tsr-altin);
	font: inherit;
	font-size: 12px;
	cursor: pointer;
}

.tsr-tost-eylem:hover { background: rgba(255, 255, 255, .12); }

/* --- Klavye kısayolları kartı -------------------------------------------- */

.tsr-yardim-katman {
	position: fixed;
	inset: 0;
	z-index: 70;
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgba(34, 30, 26, .42);
}

.tsr-yardim {
	width: min(520px, 100%);
	max-height: 80vh;
	overflow-y: auto;
	padding: 22px 24px;
	border-radius: 10px;
	background: var(--tsr-yuzey);
	box-shadow: 0 20px 50px rgba(34, 30, 26, .3);
}

.tsr-yardim-baslik {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 600;
}

.tsr-yardim-liste {
	display: grid;
	grid-template-columns: minmax(96px, auto) 1fr;
	gap: 8px 16px;
	margin: 0 0 18px;
	font-size: 12.5px;
}

.tsr-yardim-liste dt {
	font-family: ui-monospace, Consolas, monospace;
	font-size: 11.5px;
	color: var(--tsr-murekkep);
	white-space: nowrap;
}

.tsr-yardim-liste dd {
	margin: 0;
	color: var(--tsr-murekkep-soft);
}

/* --- Katman kilidi ------------------------------------------------------- */

/* Kilit görünürlüğü değil TIKLANABİLİRLİĞİ kapatıyor; düğme de bunu söylemeli:
   öğe hâlâ orada, sadece elini sürmüyorsun. */
.tsr-segment-dugme.is-kilitli {
	background: #f1ece0;
	border-style: dashed;
	color: var(--tsr-murekkep-soluk);
}

.tsr-kilit { font-size: 10px; line-height: 1; }

/* --- Katalog tip ikonu --------------------------------------------------- */

.tsr-tip {
	display: flex;
	align-items: center;
	gap: 9px;
}

.tsr-tip-ad { min-width: 0; }

.tsr-tip-ikon {
	flex: none;
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	opacity: .75;
}

.tsr-tip.is-aktif .tsr-tip-ikon { opacity: 1; }

/* --- Hazır plan ölçü kutusu ---------------------------------------------- */

/*
 * Şekil önizlemesi kutunun ÜSTÜNDE, ölçü alanlarının hemen üstünde: girilen
 * sayı ile kurulacak oda yan yana okunmazsa "girinti 160" hiçbir şey
 * söylemiyor. Kutu lvs-kart'ın içinde yaşıyor, o yüzden ölçüleri onun
 * yumuşak yüzeyine göre.
 */
.tsr-onayar-onizleme {
	display: grid;
	place-items: center;
	min-height: 132px;
	margin: 0 0 8px;
	padding: 6px;
	border: 1px solid var(--tsr-cizgi);
	border-radius: 8px;
	background: var(--tsr-bg);
}

.tsr-onayar-sekil {
	width: 120px;
	height: 120px;
	fill: none;
	stroke: var(--tsr-murekkep);
	stroke-width: 3;
}

.tsr-onayar-olculer {
	margin: 0 0 12px;
	font-size: 12px;
	text-align: center;
	color: var(--tsr-murekkep-soluk);
}

.tsr-onayar-uyari {
	margin: 12px 0 14px;
	min-height: 1.4em;
	font-size: 12px;
	line-height: 1.45;
	color: var(--tsr-murekkep-soluk);
}

.tsr-onayar-uyari.is-hata { color: var(--tsr-hata); }

/* --- Sürüklenebilir sayı etiketi ----------------------------------------- */

/*
 * Etiketi yana sürüklemek sayıyı değiştiriyor. Keşfedilmesi imlecin
 * değişmesine bağlı — ipucu kartında da yazıyor ama asıl işaret bu.
 */
.tsr-scrub {
	cursor: ew-resize;
	user-select: none;
	touch-action: none;
}

.tsr-scrub:hover { color: var(--tsr-murekkep); }

/* --- Durum çubuğu: taşıma kipi ------------------------------------------- */

.tsr-durum.is-tasima {
	background: #fdf0d8;
	color: var(--tsr-murekkep);
	font-weight: 500;
}

/* --- Modül listesi penceresi ---------------------------------------------
 *
 * Yan panele değil TAM EKRANA açılıyor: okunacak olan bir tablo ve on dört
 * sütun 272 piksele sığmıyor. Fiyat sütunları da buraya gelecek, o yüzden
 * genişlik bugünün sütun sayısına göre değil yüzdeyle veriliyor.
 */

/*
 * GRID DEĞİL FLEX — VE margin:auto ORTALIYOR, align-items DEĞİL.
 *
 * Ölçtük: .tsr-liste kendisi de display:flex;flex-direction:column
 * olunca (üst şerit/tablo/alt not için), grid + place-items:center bu
 * "flex kutunun içinde flex kutu" durumunda kutunun GÖRÜNEN (kırpılmış)
 * boyuna değil içeriğin doğal/kırpılmamış boyuna göre ortalıyordu —
 * modül sayısı arttıkça kutu ekranın altına kayıyordu. Aynı teknikle
 * kurulu ama içinde iç içe flex OLMAYAN .tsr-yardim-katman (klavye
 * kısayolları) bu sorunu hiç yaşamıyor — fark tam bu.
 *
 * Flex'te "satır" ölçümü yok, tek çizgili bir flex konteynerin çapraz
 * boyu doğrudan kendi content-box'ı; align-items:center yerine de
 * margin:auto kullanıyoruz çünkü o, ortalamayı kutunun NİHAİ (zaten
 * height:min(88vh,100%) ile kesinleşmiş) boyu üzerinden hesaplıyor,
 * içeriğin doğal boyu hiç karışmıyor. overflow-y:auto katmanın
 * kendisinde: her ihtimale karşı içerik yine de taşarsa en azından
 * kaydırılabilir olsun, hiçbir zaman erişilemez kalmasın.
 */
.tsr-liste-katman {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: flex;
	overflow-y: auto;
	padding: 24px;
	background: rgba(34, 30, 26, .5);
}

.tsr-liste {
	display: flex;
	flex-direction: column;
	width: min(1180px, 100%);
	height: min(88vh, 100%);
	margin: auto;
	border-radius: 12px;
	background: var(--tsr-yuzey);
	box-shadow: 0 24px 60px rgba(34, 30, 26, .34);
}

.tsr-liste-ust {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	align-items: baseline;
	padding: 18px 22px 14px;
	border-bottom: 1px solid var(--tsr-cizgi);
}

.tsr-liste-baslik {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
}

.tsr-liste-ozet {
	font-size: 12.5px;
	color: var(--tsr-murekkep-soft);
}

/* Eylemler sağa itiliyor; başlık ile özet solda bir grup gibi okunuyor. */
.tsr-liste-eylem {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-left: auto;
}

/* flex:1 + min-height:0 olmadan bu kutu içeriğinin doğal boyutuna büyüyor,
   overflow:auto hiç devreye girmiyor ve kalabalık bir listede pencere
   (max-height: 88vh) alttan taşıp ekranın dışına kayıyordu. */
.tsr-liste-govde {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	padding: 4px 22px 18px;
}

.tsr-liste-bos,
.tsr-liste-not,
.tsr-liste-dipnot {
	margin: 12px 0;
	font-size: 12px;
	color: var(--tsr-murekkep-soluk);
}

.tsr-liste-dipnot {
	padding: 10px 22px 16px;
	margin: 0;
	border-top: 1px solid var(--tsr-cizgi);
}

.tsr-liste-altbaslik {
	margin: 26px 0 4px;
	font-size: 13.5px;
	font-weight: 600;
}

/* Uyarı sessiz kalmamalı ama tabloyu da bastırmamalı: kenardan bir şerit. */
.tsr-liste-uyari {
	margin: 12px 0 0;
	padding: 8px 12px;
	border-left: 3px solid var(--tsr-altin-koyu);
	background: #fdf6e6;
	font-size: 12px;
	color: var(--tsr-murekkep-soft);
}

.tsr-tablo {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
}

/* Başlık satırı kaydırırken yerinde kalıyor: 40 modüllük bir listede
   hangi sütunun ne olduğu ekranın dışına çıkmamalı. */
.tsr-tablo thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 10px 8px;
	border-bottom: 1px solid var(--tsr-cizgi);
	background: var(--tsr-yuzey);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .02em;
	text-align: left;
	text-transform: uppercase;
	color: var(--tsr-murekkep-soluk);
	white-space: nowrap;
}

.tsr-tablo tbody td {
	padding: 7px 8px;
	border-bottom: 1px solid #f1ece1;
	white-space: nowrap;
}

.tsr-tablo tbody tr:hover { background: #fbf7ee; }
.tsr-tablo tbody tr { cursor: pointer; }

/* Duvar değişimi: sıranın nerede bittiği montajda sorulan ilk şey. */
.tsr-tablo tbody tr.is-yeniduvar td { border-top: 2px solid var(--tsr-cizgi); }

.tsr-sayi { text-align: right; font-variant-numeric: tabular-nums; }

/* Stok kodu tek karakterine kadar okunacak: eşit genişlikli yazı tipi. */
.tsr-kod-hucre {
	font-family: ui-monospace, Consolas, monospace;
	font-size: 11px;
	color: var(--tsr-murekkep);
}

@media (max-width: 720px) {
	.tsr-liste-katman { padding: 0; }
	.tsr-liste { width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
}

/* --- Kaydetme, paylaşım kodu ve hesap ------------------------------------ */

/*
 * Üst çubuğun sağ ucundaki öbek: çizimin kendisiyle değil, çizimin
 * KİMLİĞİYLE ilgili düğmeler. Ayırıcı çizgi bu farkı görünür kılıyor.
 */
.tsr-ayirac {
	width: 1px;
	height: 22px;
	margin: 0 2px;
	background: var(--tsr-cizgi);
	flex: none;
}

.tsr-dugme.is-birincil {
	border-color: var(--tsr-altin);
	background: var(--tsr-altin);
	color: #2a2118;
}

.tsr-dugme.is-birincil:hover {
	border-color: var(--tsr-altin-koyu);
	background: var(--tsr-altin-koyu);
}

/* Kaydedilmemiş değişiklik varken düğme bunu söylemeli: yanındaki nokta,
   "elindeki şey henüz sunucuda değil" demenin en sessiz yolu. */
.tsr-dugme.is-kirli::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 7px;
	border-radius: 50%;
	background: #2a2118;
	vertical-align: middle;
	opacity: .55;
}

.tsr-kod-rozet {
	padding: 7px 10px;
	border: 1px solid var(--tsr-cizgi);
	border-radius: 7px;
	background: var(--tsr-bg);
	font-family: ui-monospace, Consolas, monospace;
	font-size: 12px;
	letter-spacing: .03em;
	color: var(--tsr-murekkep-soft);
	cursor: pointer;
	flex: none;
}

.tsr-kod-rozet:hover { border-color: var(--tsr-altin-koyu); color: var(--tsr-murekkep); }

/* --- Paylaşım şeridi ----------------------------------------------------- */

.tsr-paylasim {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 9px 16px;
	background: #fdf3dd;
	border-bottom: 1px solid var(--tsr-cizgi);
	font-size: 12.5px;
	color: var(--tsr-murekkep-soft);
	flex: none;
}

.tsr-paylasim strong { color: var(--tsr-murekkep); font-weight: 600; }

.tsr-paylasim-dugme {
	padding: 6px 11px;
	border: 1px solid var(--tsr-altin);
	border-radius: 7px;
	background: var(--tsr-altin);
	font-size: 12.5px;
	font-family: inherit;
	font-weight: 600;
	color: #2a2118;
	cursor: pointer;
}

.tsr-paylasim-dugme:hover { background: var(--tsr-altin-koyu); border-color: var(--tsr-altin-koyu); }

/*
 * Kaydetme kutusundaki kod: paylaşılacak asıl değer bu, o yüzden ekranın
 * en büyük yazısı. Seçilebilir olması şart — kullanıcı kopyalama düğmesine
 * güvenmeyip elle seçmek isteyebilir.
 */
.tsr-kod-buyuk {
	display: block;
	margin: 4px 0 10px;
	padding: 14px;
	border: 1px dashed var(--tsr-cizgi);
	border-radius: 9px;
	background: var(--tsr-bg);
	font-family: ui-monospace, Consolas, monospace;
	font-size: 23px;
	letter-spacing: .07em;
	text-align: center;
	user-select: all;
}

@media (max-width: 860px) {
	/* Dar ekranda hesap düğmesi metinden ikona düşüyor; kaydet kalıyor,
	   çünkü kaybolan tek düğme çizimin kaybolması demek. */
	#tsr-hesap { padding: 9px 10px; }
	.tsr-ayirac { display: none; }
}

/*
 * ÖLÇÜLÜ TAŞI — yön düğmeleri ikişerli.
 *
 * Dört yön tek sütuna dizilince "Sola" ile "Duvardan uzağa" aynı ağırlıkta
 * okunuyor ve düğmeyi okumadan basılamıyor. İkili ızgarada eksen çiftleri
 * yan yana: üst satır duvar boyunca, alt satır duvara dik.
 */
.tsr-yon-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.tsr-olculu-durum { min-height: 1.4em; }

/*
 * KATMAN ŞERİDİ — pencerenin en üstünde, paylaşım şeridiyle aynı hizada.
 *
 * Kilit ve görünürlük yan paneldeydi ve yalnız "Seç" aracındayken
 * görünüyordu. İkisi de ARACIN değil GÖRÜNÜMÜN kararı ve her adımda
 * gerekiyor: "neden buna tıklayamıyorum" ya da "prizlerim nereye gitti"
 * sorusunun cevabı, sorunun sorulduğu yerden görünür olmak zorunda.
 *
 * Telefonda SARMIYOR, yatay kayıyor — ikinci satır tuvalin üçte birini
 * yiyordu (genel şeritte ve üst çubukta alınan kararla aynı).
 */
.tsr-katmanlar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 16px;
	background: var(--tsr-bg);
	border-bottom: 1px solid var(--tsr-cizgi);
	flex: none;
	overflow-x: auto;
	scrollbar-width: thin;
}

.tsr-katman-baslik {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tsr-murekkep-soft);
	white-space: nowrap;
	margin-right: 4px;
}

.tsr-katman {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 2px 4px 2px 8px;
	border: 1px solid var(--tsr-cizgi);
	border-radius: 999px;
	background: #fff;
	white-space: nowrap;
	flex: none;
}

/* Gizli katman sönük: şeride bakınca hangisinin kapalı olduğu okunmalı. */
.tsr-katman.is-gizli { opacity: 0.5; }

.tsr-katman-ad {
	font-size: 12px;
	color: var(--tsr-murekkep);
	margin-right: 2px;
}

.tsr-katman-dugme {
	border: 0;
	background: none;
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
	padding: 4px 5px;
	border-radius: 999px;
}

.tsr-katman-dugme:hover:not(:disabled) { background: var(--tsr-bg); }
.tsr-katman-dugme:disabled { cursor: default; opacity: 0.35; }
.tsr-katman-dugme.is-kilitli { background: #f6e6c8; }

/* ------------------------------------------------------------------ */
/* Fiyat sütunu — tutarın nereden geldiği renkten okunuyor.            */
/* Listede birebir satırı olan bir modülün tutarı ile türetilmiş bir   */
/* tutar aynı güvende değil; ikisini ayırt edilemez göstermek, teklif  */
/* verirken hangi sayının doğrulanması gerektiğini gizlerdi.           */
/* ------------------------------------------------------------------ */
.tsr-fiyat-turetilmis { color: #a2620f; font-weight: 600; }
.tsr-fiyat-hesap      { color: #1f5b8c; font-weight: 600; }

.tsr-tablo tfoot td {
	border-top: 2px solid #7a6a54;
	font-weight: 700;
	background: #f4efe4;
}
.tsr-toplam-etiket { text-align: right; letter-spacing: .04em; }
.tsr-toplam-tutar  { font-size: 1.05em; white-space: nowrap; }
.tsr-toplam-uyari {
	font-weight: 500;
	color: #8c3e3e;
	background: #fbeaea;
	text-align: right;
}