/* ==========================================================================
   Algorave İzmir — Mapping Stüdyosu
   Yalnızca mapping.html tarafından yüklenir; styles.css'in üzerine biner.
   ========================================================================== */

/* Gizlemek her yerde gizlemek olsun. Bir sınıfa display verildiğinde
   tarayıcının [hidden] varsayılanı eziliyor ve öğe gizlenmiş görünmesine
   rağmen ekranda kalıyordu: panelin katlanan bölümleri (yüzeyler, kaynak,
   şekil, takip, ses, referans) bu yüzden kapanmıyordu. Tek tek istisna
   yazmak yerine kural burada. */
[hidden] { display: none !important; }

.mapping-body {
  margin: 0;
  height: 100dvh;
  overflow: hidden;
  background: #000;
  overscroll-behavior: none;
}

.mp-app {
  display: grid;
  /* Panelin genişliği tutamaçtan ayarlanıyor; değişken hem ızgarayı hem
     tutamacın yerini sürüyor. */
  grid-template-columns: 1fr var(--panel-gen, 360px);
  /* üst şerit / sahne + panel / zaman çizelgesi */
  grid-template-rows: auto 1fr auto auto;
  height: 100dvh;
}

/* ------------------------------------------------------------- üst şerit -- */
.mp-topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  /* Dar ekranda düğmeler sığmayıp pencereden taşıyordu: 1280×800'lük bir
     dizüstünde "Kısayollar", dil seçici ve panel düğmesi kenarın dışında
     kalıyor, sayfa yatay kayıyordu. Şerit artık alt satıra geçiyor. */
  flex-wrap: wrap;
  row-gap: .35rem;
  gap: .9rem;
  padding: .5rem .9rem;
  background: var(--band, #a91917);
  border-bottom: 1px solid var(--band-line, #7e1211);
  /* Masaüstü sürümünde pencerenin başlık çubuğu gizli; pencereyi buradan
     tutup taşıyabilmek için üst şerit sürükleme alanı. Düğmeler hariç. */
  -webkit-app-region: drag;
  app-region: drag;
}
.mp-topbar button,
.mp-topbar a,
.mp-topbar select,
.mp-topbar label {
  -webkit-app-region: no-drag;
  app-region: no-drag;
}
.mp-araclar-ust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .35rem;
  margin-left: auto;
}
.mp-ayirac {
  width: 1px; height: 1.3rem;
  background: rgba(255, 255, 255, .25);
  margin: 0 .3rem;
}
.mp-tbtn {
  padding: .4rem .7rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(0, 0, 0, .18);
  color: #fff;
  font-family: var(--mono, monospace);
  font-size: .7rem;
  letter-spacing: .04em;
  cursor: pointer;
  white-space: nowrap;
}
.mp-tbtn:hover:not([disabled]) { background: rgba(0, 0, 0, .34); border-color: rgba(255, 255, 255, .45); }
.mp-tbtn[disabled] { opacity: .4; cursor: default; }

/* ---------------------------------------------------------------- sahne -- */
.mp-stage {
  grid-column: 1; grid-row: 2;
  position: relative;
  background: #000;
  overflow: hidden;
  min-width: 0;
}

#tuval {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.mp-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}
.mp-overlay.gizli { display: none; }

/* köşe tutamakları */
/* Dolgu iyice söndü: içerideki ızgara artık yüzeyin nereye düştüğünü
   gösteriyor, üstüne bir de renk basmak altındaki görüntüyü boğuyordu. */
.mp-quad      { fill: rgba(221, 30, 30, .03); stroke: rgba(255, 235, 222, .45); stroke-width: 1.5; }
.mp-quad.sec  { fill: rgba(221, 30, 30, .06); stroke: var(--red); stroke-width: 2; }
.mp-quad.gizliYuzey { opacity: .25; }

/* Yüzeyin içindeki ızgara. Beyaz: altında ne olursa olsun okunuyor, kırmızı
   çizgi koyu bir görüntünün üstünde kayboluyordu. Seçili yüzeyde biraz
   daha belirgin. */
.mp-izgara {
  fill: none;
  stroke: rgba(255, 255, 255, .22);
  stroke-width: 1;
  pointer-events: none;
  shape-rendering: crispEdges;
}
.mp-izgara.sec { stroke: rgba(255, 255, 255, .42); }

/* XYZ kolları: modelin sahnesinde çizilen oklarla aynı renkte, üstlerinde
   tutup sürüklediğiniz toplar var. Blender ve Unreal'daki düzen. */
.mp-eksen { stroke-width: 2; pointer-events: none; }
.mp-eksen-top { stroke: rgba(0, 0, 0, .55); stroke-width: 1.5; pointer-events: none; }
.mp-eksen-x { stroke: #ff3b30; fill: #ff3b30; }
.mp-eksen-y { stroke: #35d94b; fill: #35d94b; }
.mp-eksen-z { stroke: #3b82ff; fill: #3b82ff; }
/* Dönme tutamağı içi boş halka: kaydırma okunun dolu topundan ayrılsın */
.mp-donus-top { fill: none; stroke-width: 3.5; pointer-events: none; }
/* Dönme çemberi: içi boş, altındaki görüntü ne olursa olsun okunsun diye
   koyu bir gölge çizgisiyle birlikte. */
.mp-cember {
  fill: none;
  stroke-width: 2;
  pointer-events: none;
  paint-order: stroke;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .9));
}

.mp-etiket {
  font: 600 12px/1 var(--mono, monospace);
  fill: var(--cream, #ffebde);
  paint-order: stroke;
  stroke: rgba(0, 0, 0, .75);
  stroke-width: 3;
  pointer-events: none;
  user-select: none;
}
.mp-etiket.sonuk { opacity: .55; font-size: 11px; }

.mp-hit    { fill: transparent; cursor: grab; }
.mp-hit:active { cursor: grabbing; }
.mp-handle { fill: var(--cream, #ffebde); stroke: var(--red, #dd1e1e); stroke-width: 2.5; pointer-events: none; }
.mp-handle.etkin { fill: var(--red, #dd1e1e); stroke: var(--cream, #ffebde); }

.mp-hint {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  max-width: 28ch;
  text-align: center;
  font-family: var(--mono, monospace);
  font-size: .82rem;
  line-height: 1.6;
  color: var(--muted, #b09a94);
  pointer-events: none;
}
.mp-hint[hidden] { display: none; }

.mp-fsbar {
  position: absolute;
  left: 50%; bottom: 1.2rem;
  transform: translateX(-50%);
  padding: .5rem .9rem;
  border-radius: 999px;
  background: rgba(11, 3, 4, .8);
  border: 1px solid var(--line, #35191a);
  font-family: var(--mono, monospace);
  font-size: .72rem;
  color: var(--muted, #b09a94);
  pointer-events: none;
  opacity: 0;
  animation: mpFade 4s ease forwards;
}
.mp-fsbar b { color: var(--cream, #ffebde); }
@keyframes mpFade {
  0%, 70% { opacity: 1; }
  100%    { opacity: 0; }
}

/* ---------------------------------------------------------------- panel -- */
.mp-panel {
  grid-column: 2; grid-row: 2;
  background: var(--ink-2, #140708);
  border-left: 1px solid var(--line, #35191a);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mp-head {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--band, #a91917);
  border-bottom: 1px solid var(--band-line, #7e1211);
  padding: .85rem 1.1rem 1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .3rem .6rem;
  align-items: center;
}
.mp-head h1 {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.2;
  color: #fff;
}
.mp-back {
  font-family: var(--mono, monospace);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--band-muted, #efd7d2);
  text-decoration: none;
}
.mp-back:hover { color: #fff; }
.mp-lang { justify-self: end; }
.mp-lang select {
  background: rgba(0, 0, 0, .25);
  color: #fff;
  border: 1px solid var(--band-line, #7e1211);
  border-radius: 8px;
  padding: .25rem .4rem;
  font-family: var(--mono, monospace);
  font-size: .72rem;
}

.mp-block {
  padding: 1.1rem 1.1rem 1.2rem;
  border-bottom: 1px solid var(--line, #35191a);
}
.mp-block h2 {
  margin: 0 0 .85rem;
  font-family: var(--sans, sans-serif);
  font-size: 1.02rem;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--cream, #ffebde);
  font-weight: 700;
}
.mp-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .7rem;
}
.mp-block-head h2 { margin: 0; }

/* Sahnedeki armatür: rengini perdenin bir noktasından alan ışık */
.mp-fikstur {
  fill: rgba(11, 3, 4, .75);
  stroke: var(--cream, #ffebde);
  stroke-width: 1.5;
  pointer-events: none;
}
.mp-fikstur-no {
  font-family: var(--mono, monospace);
  font-size: 8px;
  text-anchor: middle;
  fill: var(--cream, #ffebde);
  pointer-events: none;
}
body.mp-cikis .mp-fikstur,
body.mp-cikis .mp-fikstur-no { display: none; }

/* --- etiket şeridi --- */
.mp-nesneler {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .5rem;
}
.mp-nesneler[hidden] { display: none; }
.mp-etiket {
  font-family: var(--mono, monospace);
  font-size: .64rem;
  letter-spacing: .04em;
  padding: .25rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--line, #35191a);
  background: var(--ink-3, #1d0c0d);
  color: var(--muted, #b09a94);
  cursor: pointer;
}
.mp-etiket:hover { border-color: rgba(255, 255, 255, .35); color: var(--text, #f3e7e2); }
.mp-etiket.sec { border-color: var(--red, #dd1e1e); color: var(--cream, #ffebde); }


/* --- yüzey listesi --- */
.mp-list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem;
  /* Satırları sürüklerken yazılar maviye boyanıp "kopyalanıyor" gibi
     görünüyordu; seçimi tamamen kapatıyoruz. */
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.mp-list li {
  display: grid;
  /* ad kutusu esner ama tüm boşluğu yutmasın: 1fr yerine sabit üst sınır */
  /* tut · no · ad · şekil · araçlar. Etiket sütunu kalktı: yüzeyin hangi
     nesneye ait olduğu artık listenin kendi katmanından belli. */
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .5rem;
  padding: .5rem .6rem;
  border: 1px solid var(--line, #35191a);
  border-radius: 10px;
  background: var(--ink-3, #1d0c0d);
  cursor: pointer;
}
.mp-list li.sec { border-color: var(--red, #dd1e1e); background: #250e0f; }
.mp-list .mp-no {
  font-family: var(--mono, monospace);
  font-size: .68rem;
  color: var(--muted, #b09a94);
  min-width: 1.2em;
}
/* Ad doğrudan listede düzeltiliyor: kutu düz yazı gibi dursun, ancak
   üstüne gelince ve odaklanınca düzenlenebilir olduğu belli olsun. */
.mp-list .mp-ad {
  font: inherit;
  font-size: .86rem;
  color: var(--text, #f2e4de);
  width: 100%;
  min-width: 0;
  padding: .18rem .35rem;
  margin: -.18rem -.35rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  text-overflow: ellipsis;
  cursor: text;
}
.mp-list li:hover .mp-ad { border-color: var(--line, #35191a); }
.mp-list .mp-ad:focus {
  outline: none;
  border-color: var(--red, #dd1e1e);
  background: var(--ink, #0b0304);
  text-overflow: clip;
}
.mp-ad-im {
  font-size: .78rem;
  color: var(--muted, #b09a94);
}

/* yüzey şekli seçimi + şekle özel araç simgeleri yan yana */
.mp-sekil-sat { display: flex; align-items: center; gap: .35rem; }
.mp-sekil-sat select { flex: 1 1 auto; min-width: 0; }
.mp-sekil-sat .mp-ikon { flex: 0 0 auto; font-size: 1rem; }
.mp-ikon-etkin { color: var(--red, #dd1e1e); opacity: 1; }
.mp-ikon:disabled { opacity: .28; cursor: default; }
.mp-ikon:disabled:hover { color: var(--muted, #b09a94); background: none; }
.mp-araclar { display: flex; gap: .1rem; }
.mp-list .mp-araclar { justify-self: end; }
.mp-ikon {
  background: none;
  border: 0;
  padding: .2rem .3rem;
  min-width: 1.6rem;
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted, #b09a94);
  border-radius: 6px;
}
.mp-ikon:hover { color: var(--cream, #ffebde); background: rgba(255, 255, 255, .06); }
.mp-ikon-sil:hover { color: #fff; background: var(--red-lo, #a91917); }
.mp-list li.kapali .mp-ad { opacity: .45; text-decoration: line-through; }

/* serbest maske noktaları */
.mp-maske { fill: rgba(255, 235, 222, .1); stroke: var(--cream, #ffebde); stroke-width: 1.5; stroke-dasharray: 5 4; }
.mp-nokta { fill: var(--cream, #ffebde); stroke: var(--ink, #0b0304); stroke-width: 2; pointer-events: none; }
.mp-nokta.etkin { fill: var(--red, #dd1e1e); }

/* onay kutusu */
.mp-onay {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .55rem;
  cursor: pointer;
  font-family: var(--mono, monospace);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--text, #f2e4de);
}
.mp-onay input { accent-color: var(--red, #dd1e1e); width: 1.05rem; height: 1.05rem; }

.mp-btn-etkin { border-color: var(--red, #dd1e1e); background: #2a1011; color: #fff; }

.mp-empty {
  margin: 0;
  font-size: .8rem;
  color: var(--muted, #b09a94);
  line-height: 1.5;
}
.mp-empty[hidden] { display: none; }

/* --- alanlar --- */
.mp-field { display: grid; gap: .35rem; margin-bottom: .8rem; }
.mp-field[hidden] { display: none; }
.mp-field > span {
  font-family: var(--mono, monospace);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted, #b09a94);
  display: flex;
  justify-content: space-between;
  gap: .5rem;
}
.mp-field > span b { color: var(--cream, #ffebde); font-weight: 400; }

.mp-field input[type="text"],
.mp-field select,
.mp-sub input[type="text"],
.mp-sub select {
  width: 100%;
  background: var(--ink-3, #1d0c0d);
  color: var(--text, #f2e4de);
  border: 1px solid var(--line, #35191a);
  border-radius: 9px;
  padding: .5rem .6rem;
  font-family: var(--sans, sans-serif);
  font-size: .88rem;
}
.mp-field input[type="text"]:focus,
.mp-field select:focus,
.mp-sub input:focus,
.mp-sub select:focus { outline: 2px solid var(--red, #dd1e1e); outline-offset: 1px; }

.mp-field input[type="range"],
.mp-sub input[type="range"] {
  width: 100%;
  accent-color: var(--red, #dd1e1e);
  height: 1.6rem;
}

.mp-sub { display: grid; gap: 0; }
.mp-sub:empty { display: none; }
/* İçi doluysa altında nefes payı bıraksın; yoksa bir sonraki alanın
   etiketi düğmeye yapışık duruyordu. */
.mp-sub:not(:empty) { margin-bottom: .9rem; }
.mp-sub > .mp-row:last-child { margin-bottom: 0; }

.mp-color-row { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .8rem; }
.mp-swatch {
  width: 2rem; height: 2rem;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.mp-swatch.sec { border-color: var(--cream, #ffebde); }

/* --- düğmeler --- */
/* Panel artık kenarından daraltılabiliyor: düğmeler sığmayınca satırdan
   taşıp paneli yatayda kaydırılır hale getiriyordu (üç takip düğmesi dar
   panelde böyleydi). Sığmayan düğme alt satıra iniyor; taban ölçü 6rem,
   yani varsayılan panelde üçü hâlâ yan yana duruyor. */
.mp-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
.mp-row:last-child { margin-bottom: 0; }
/* display kuralı tarayıcının [hidden] varsayılanını eziyor: gizlemek
   istediğimiz satır yine de görünüyordu. */
.mp-row[hidden] { display: none; }

.mp-btn {
  flex: 1 1 6rem;
  min-width: 0;
  padding: .6rem .7rem;
  border-radius: 10px;
  border: 1px solid var(--line, #35191a);
  background: var(--ink-3, #1d0c0d);
  color: var(--text, #f2e4de);
  font-family: var(--mono, monospace);
  font-size: .72rem;
  letter-spacing: .06em;
  cursor: pointer;
  min-height: 2.4rem;
}
.mp-btn:hover  { border-color: var(--red, #dd1e1e); color: #fff; }
.mp-btn:active { transform: translateY(1px); }
.mp-btn-sm { flex: 0 0 auto; padding: .35rem .6rem; min-height: 0; }
/* Yanına sığan dar düğme: satırdaki asıl alan (kaynak listesi gibi) tüm
   genişliği alsın, düğme yalnız yazısı kadar yer kaplasın. */
.mp-btn-dar { flex: 0 0 auto; padding-inline: .9rem; }

/* Kaynak listesi ile silme düğmesi tek satırda. Liste büyüyor, düğme
   sabit; ikisinin arası panelin öteki satırlarıyla aynı. */
/* Düğme kutunun hizasında dursun, etiketin değil: etiket eklenince
   ortalama hizalama düğmeyi yukarı çekiyordu. */
.mp-kaynak-sat { display: flex; align-items: flex-end; gap: .5rem; }
.mp-kaynak-sat > .mp-field { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }

/* Telefon kumandası: QR ile adres yan yana */
.mp-kumanda {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: .6rem;
  flex-wrap: wrap;
}
/* Eşleşme sırasında telefonun karesini okuyan kamera; yalnız o an açık */
.mp-kumanda-kamera {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line, #35191a);
  background: #000;
}
.mp-kumanda-kamera[hidden] { display: none; }
.mp-kumanda canvas {
  /* Kare artık adresi de taşıyor, yani daha çok hücreden oluşuyor: ekranda
     da büyük dursun ki telefonun kamerası bir metreden rahat okusun. */
  width: min(300px, 78vw); height: min(300px, 78vw);
  border-radius: 10px;
  background: var(--text, #f3e7e2);
}
.mp-kumanda[hidden] { display: none; }
.mp-kumanda .mp-note { margin: 0; word-break: break-all; }

/* Şablon seçimi: başlık satırına ve ışık paneline sığan küçük kutu */
.mp-mini-sec {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 10rem;
  padding: .3rem .4rem;
  font-family: var(--mono, monospace);
  font-size: .68rem;
  color: var(--text, #f3e7e2);
  background: var(--ink-3, #1d0c0d);
  border: 1px solid var(--line, #35191a);
  border-radius: 6px;
}
.mp-danger:hover { background: var(--red-lo, #a91917); border-color: var(--red-lo, #a91917); }

.mp-note {
  margin: .6rem 0 0;
  font-size: .74rem;
  line-height: 1.55;
  color: var(--muted, #b09a94);
}
.mp-note b { color: var(--cream, #ffebde); font-weight: 400; }

.mp-help summary {
  cursor: pointer;
  font-family: var(--mono, monospace);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted, #b09a94);
}
.mp-help ol { margin: .8rem 0 0; padding-left: 1.1rem; display: grid; gap: .5rem; }
.mp-help li { font-size: .8rem; line-height: 1.55; color: var(--text, #f2e4de); }
.mp-help b { color: var(--cream, #ffebde); }

.mp-credit {
  margin: 0;
  padding: 1.1rem;
  font-family: var(--mono, monospace);
  font-size: .68rem;
  color: var(--muted, #b09a94);
}
.mp-credit a { color: var(--muted, #b09a94); }
.mp-credit a:hover { color: var(--cream, #ffebde); }

.mp-uyari {
  margin: .5rem 0 0;
  padding: .5rem .6rem;
  border-left: 2px solid var(--red, #dd1e1e);
  background: rgba(221, 30, 30, .08);
  font-size: .76rem;
  line-height: 1.5;
  color: var(--text, #f2e4de);
}

/* ------------------------------------------------------------- çıkış modu -- */
body.mp-cikis .mp-panel,
body.mp-cikis .mp-topbar,
body.mp-cikis .mp-cizelge,
body.mp-cikis .mp-panel-toggle,
body.mp-cikis .mp-hint { display: none; }
body.mp-cikis .mp-app  { grid-template-columns: 1fr; grid-template-rows: 1fr; }
body.mp-cikis .mp-stage { grid-column: 1; grid-row: 1; }

/* ------------------------------------------------------------- panel aç/kapa -- */
 /* Aç/kapa düğmesi üst şeridin içinde akıyor. Sabit konumdayken yatay
    tutulan telefonda "Nasıl kullanılır?"ın üstüne biniyordu. */
.mp-panel-toggle {
  display: none;
  /* Tek başına satıra düşünce esneyip tüm satırı kaplamasın */
  flex: 0 0 auto !important;
  min-width: 2.4rem;
  font-size: 1rem;
  line-height: 1;
}

.mp-noscript {
  padding: 2rem;
  color: var(--text, #f2e4de);
  font-size: 1rem;
}

/* ----------------------------------------------------------------- dar ekran -- */
/* Tablet: panel yan yana duruyor ama daha dar, sahneye yer kalsın.
   900'ün altı telefon düzeni, 1200'ün üstü masaüstü. */
@media (min-width: 901px) and (max-width: 1200px) {
  /* Ölçü sabit yazılınca panel kenarından sürüklense de kımıldamıyordu:
     tutamaç --panel-gen'i değiştiriyor, ızgara ise onu hiç okumuyordu.
     Varsayılanı koruyup değişkeni okuyoruz. */
  .mp-app { grid-template-columns: 1fr var(--panel-gen, 300px); }
  .mp-block { padding: .9rem .85rem 1rem; }
  .mp-tbtn { padding: .35rem .5rem; font-size: .64rem; }
  .mp-araclar-ust { gap: .25rem; }
}

/* Geniş ekran: panel biraz açılıyor, uzun etiketler tek satırda kalıyor */
@media (min-width: 1600px) {
  .mp-app { grid-template-columns: 1fr var(--panel-gen, 420px); }
}

@media (max-width: 900px) {
  /* Dar ekranda sahneye sabit bir pay veriyoruz; aksi hâlde uzun panel
     sahneyi ezip köşe sürüklemeyi imkânsız hale getiriyordu. */
  .mp-app { grid-template-columns: 1fr; grid-template-rows: auto minmax(40dvh, 1fr) auto auto auto; }
  .mp-panel { grid-column: 1; grid-row: 5; }
  .mp-cizelge { grid-column: 1; grid-row: 4; }
  .mp-cizelge-tutamac { grid-row: 3; }
  .mp-stage { grid-column: 1; grid-row: 2; min-height: 40dvh; }
  .mp-topbar { flex-wrap: wrap; row-gap: .35rem; padding: .4rem .6rem; }
  .mp-back { font-size: .62rem; }
  /* Düğmeler sarmazsa "Nasıl kullanılır?" ekrandan taşıyordu */
  .mp-araclar-ust { margin-left: 0; width: 100%; flex-wrap: wrap; gap: .25rem; }
  .mp-tbtn {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    padding: .38rem .3rem;
    font-size: .6rem;
    white-space: normal;
  }

  /* Panel bir ızgara hücresi; min-width verilmezse içindeki uzun düğme
     hücreyi genişletiyor ve bütün yazılar sağdan taşıyordu. */
  .mp-panel, .mp-stage { min-width: 0; }
  .mp-row { flex-wrap: wrap; }
  .mp-btn { min-width: 0; flex: 1 1 10rem; white-space: normal; }
  .mp-note, .mp-uyari, .mp-empty { overflow-wrap: anywhere; }
  .mp-midi-satir { flex-wrap: wrap; }
  .mp-midi-ad { flex: 1 1 100%; }
  .mp-ayirac { display: none; }
  .mp-panel {
    border-left: 0;
    border-top: 1px solid var(--line, #35191a);
    max-height: 48dvh;
  }
  .mp-panel-toggle { display: block; }
  body.mp-panel-kapali .mp-panel { display: none; }
  body.mp-panel-kapali .mp-app   { grid-template-rows: auto 1fr auto auto; }
}

@media (max-width: 900px) and (orientation: landscape) {
  .mp-app { grid-template-columns: 1fr minmax(260px, 40%); grid-template-rows: auto 1fr auto auto; }
  .mp-panel { grid-column: 2; grid-row: 2; max-height: none; border-top: 0; border-left: 1px solid var(--line, #35191a); }
  .mp-stage { grid-column: 1; grid-row: 2; }
  body.mp-panel-kapali .mp-app { grid-template-columns: 1fr; }
}


/* --- listede sürükleyerek sıralama --- */
.mp-tut {
  color: var(--muted, #b09a94);
  font-size: .8rem;
  line-height: 1;
  cursor: grab;
  opacity: .55;
  letter-spacing: -.1em;
}
.mp-list li:hover .mp-tut { opacity: 1; }
.mp-list.suruklemede { cursor: grabbing; }
.mp-list.suruklemede li { transition: none; }
.mp-list.suruklemede li.sec { outline: 1px dashed var(--red, #dd1e1e); outline-offset: 2px; }

/* yüzey ekleme düğmeleri */
.mp-ekle { display: flex; gap: .35rem; }

/* serbest çokgen yüzeyinin noktaları biraz daha küçük görünsün */
.mp-quad.sec { stroke-width: 2; }

/* --- kaydırıcı + "ayarı geri al" --- */
.mp-kaydirici { display: flex; align-items: center; gap: .35rem; }
.mp-kaydirici input[type="range"] { flex: 1; }
.mp-sifirla { font-size: .85rem; opacity: .6; }
.mp-sifirla:hover { opacity: 1; }

/* --- özel renk seçimi --- */
.mp-ozel-renk {
  display: flex;
  gap: .5rem;
  margin-top: .5rem;
  margin-bottom: .9rem;
  padding: .5rem .55rem;
  border: 1px solid var(--line, #35191a);
  border-radius: 9px;
}
.mp-ozel-renk.sec { border-color: var(--cream, #ffebde); }
.mp-renk-kutu {
  display: flex;
  align-items: center;
  gap: .35rem;
  cursor: pointer;
  font-family: var(--mono, monospace);
  font-size: .64rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted, #b09a94);
}
.mp-renk-kutu input[type="color"] {
  width: 1.9rem; height: 1.9rem;
  padding: 0;
  border: 1px solid var(--line, #35191a);
  border-radius: 6px;
  background: none;
  cursor: pointer;
}

/* --- takip durum rozeti ---
   Sahnede gezen nişangâhın yerine geçti: konum yerine yalnızca "görüyor mu"
   bilgisini veriyor, çünkü kamera ile projeksiyon aynı şeye bakmıyor. */
.mp-takip-durum {
  position: absolute;
  left: .9rem; top: .9rem;
  display: flex; gap: .4rem;
  pointer-events: none;
  z-index: 2;
}
.mp-takip-durum[hidden] { display: none; }
.mp-rozet {
  padding: .3rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--line, #35191a);
  background: rgba(11, 3, 4, .78);
  font-family: var(--mono, monospace);
  font-size: .66rem;
  letter-spacing: .04em;
  color: var(--muted, #b09a94);
  white-space: nowrap;
}
.mp-rozet[hidden] { display: none; }
.mp-rozet.goruluyor { color: var(--cream, #ffebde); border-color: var(--red, #dd1e1e); }
.mp-rozet.cimdik { color: #0b0304; background: #39ff14; border-color: #39ff14; }

/* geçmiş düğmeleri pasifken belli olsun */
.mp-btn[disabled] { opacity: .35; cursor: default; }
.mp-btn[disabled]:hover { border-color: var(--line, #35191a); color: var(--text, #f2e4de); }


/* eski panel başlığı kalktı; geriye kalan tek tük kurallar */
.mp-back { font-family: var(--mono, monospace); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--band-muted, #efd7d2); text-decoration: none; white-space: nowrap; }
.mp-back:hover { color: #fff; }
.mp-lang select { background: rgba(0,0,0,.25); color:#fff; border:1px solid var(--band-line,#7e1211);
  border-radius:8px; padding:.25rem .4rem; font-family: var(--mono, monospace); font-size:.72rem; }

/* el takibi yüklenirken */
.mp-yukleniyor { display:flex; align-items:center; gap:.5rem; font-family:var(--mono,monospace);
  font-size:.72rem; color: var(--muted,#b09a94); margin:.4rem 0 0; }
.mp-spin { width:.9rem; height:.9rem; border:2px solid var(--line,#35191a);
  border-top-color: var(--red,#dd1e1e); border-radius:50%; animation: mpSpin .8s linear infinite; }
@keyframes mpSpin { to { transform: rotate(360deg); } }


/* --- yardım penceresi --- */
.mp-modal {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(3, 1, 1, .72);
  display: flex; align-items: center; justify-content: center;
  padding: 1.2rem;
}
.mp-modal[hidden] { display: none; }
.mp-modal-ic {
  position: relative;
  max-width: 44rem; max-height: 82dvh; overflow-y: auto;
  background: var(--ink-2, #140708);
  border: 1px solid var(--line, #35191a);
  border-radius: 14px;
  padding: 1.6rem 1.8rem 1.8rem;
}
.mp-modal-ic h2 { margin: 0 0 1rem; font-size: 1.25rem; color: var(--cream, #ffebde); }
.mp-modal-ic ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .7rem; }
.mp-modal-ic li { font-size: .9rem; line-height: 1.6; color: var(--text, #f2e4de); }
.mp-modal-ic b { color: var(--cream, #ffebde); }
.mp-modal-kapat {
  position: absolute; top: .7rem; right: .8rem;
  width: 2rem; height: 2rem;
  border: 0; border-radius: 8px;
  background: none; color: var(--muted, #b09a94);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.mp-modal-kapat:hover { color: #fff; background: rgba(255,255,255,.08); }

/* --- ses seviye ölçerleri --- */
.mp-olcerler { display: grid; gap: .35rem; margin: .7rem 0 .2rem; }
.mp-olcer { display: grid; grid-template-columns: 3.2rem 1fr; align-items: center; gap: .5rem; }
.mp-olcer span {
  font-family: var(--mono, monospace); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #b09a94);
}
.mp-olcer-yol {
  height: .5rem; border-radius: 999px;
  background: var(--ink-3, #1d0c0d);
  border: 1px solid var(--line, #35191a);
  overflow: hidden;
}
.mp-olcer-yol i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--red, #dd1e1e), var(--cream, #ffebde));
  transition: width .06s linear;
}

/* --- panel içi alt başlık (seçili yüzey ayarları) --- */
.mp-alt-baslik {
  margin: .9rem 0 .5rem;
  padding-top: .7rem;
  border-top: 1px solid var(--line, #35191a);
  font-family: var(--mono, monospace);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted, #b09a94);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- ses spektrumu --- */
.mp-spektrum {
  display: block;
  width: 100%; height: 68px;
  margin: .7rem 0 .4rem;
  background: var(--ink-3, #1d0c0d);
  border: 1px solid var(--line, #35191a);
  border-radius: 9px;
}
.mp-bantlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-bottom: .3rem; }
.mp-bant {
  display: flex; align-items: baseline; justify-content: space-between; gap: .3rem;
  padding: .3rem .45rem;
  border: 1px solid var(--line, #35191a);
  border-radius: 7px;
  background: var(--ink-3, #1d0c0d);
}
.mp-bant span {
  font-family: var(--mono, monospace); font-size: .58rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #b09a94);
}
.mp-bant b { font-family: var(--mono, monospace); font-size: .74rem; color: var(--cream, #ffebde); font-weight: 400; }

/* yansıtma penceresi alanları modal içinde de düzgün dursun */
.mp-modal-ic .mp-field { margin-bottom: 1rem; }
.mp-modal-ic .mp-row { margin-bottom: .6rem; }

.mp-modal-alt {
  /* Başlığın altı üstünden dar olmasın: bölüm başlığı ilk ayarın üstüne
     binince başlık o ayarın adı gibi okunuyordu. */
  margin: 1.4rem 0 .8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line, #35191a);
  font-family: var(--mono, monospace);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted, #b09a94); font-weight: 400;
}
.mp-modal-ic code {
  font-family: var(--mono, monospace); font-size: .82em;
  background: var(--ink-3, #1d0c0d); padding: .1em .35em; border-radius: 4px;
}

.mp-alan-baslik {
  font-family: var(--mono, monospace);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted, #b09a94);
  margin-bottom: .35rem;
}


/* --- telefonu yan çevirme uyarısı --- */
/* Telefonu yan çevirme uyarısı. Altta duruyordu ve yakınlaştırma
   göstergesiyle çakışıyordu: ikisi de alt kenardaydı, uyarı da genişliğin
   neredeyse tamamını kaplıyor. Üste aldık, orası boş; takip rozetleri de
   sola yaslı olduğu için ortada çakışma kalmıyor. Bir kez okunup
   kapatılabiliyor, her açılışta karşınıza çıkmıyor. */
.mp-yon {
  position: absolute;
  left: 50%; top: .7rem;
  transform: translateX(-50%);
  display: none;
  cursor: pointer;
  z-index: 4;
  align-items: center;
  gap: .5rem;
  /* "left: 50%" verince kutuya kalan yer ekranın yalnız sağ yarısı
     oluyordu: yazı dar bir sütuna sıkışıp dört satıra iniyor, yuvarlak
     kenarlar da satırların üstüne biniyordu. Genişliği içeriğe göre
     alıp üst sınırı ayrıca koyuyoruz; köşeler de satır sarınca
     yazıyı kesmeyecek kadar yumuşak. */
  width: max-content;
  max-width: min(92%, 24rem);
  padding: .5rem .85rem;
  border-radius: 1.1rem;
  background: rgba(11, 3, 4, .88);
  border: 1px solid var(--red, #dd1e1e);
  font-family: var(--mono, monospace);
  font-size: .66rem;
  line-height: 1.4;
  color: var(--cream, #ffebde);
  text-align: center;
  z-index: 4;
}
.mp-yon b { font-size: 1rem; }
/* Kapatma işareti metne değil kutuya ait: beş dilin çevirisine
   dokunmadan "buna basılır" demenin yolu. */
.mp-yon::after {
  content: "✕";
  margin-left: .15rem;
  font-size: .8em;
  opacity: .6;
}
@media (max-width: 760px) and (orientation: portrait) {
  .mp-yon { display: flex; }
  body.mp-yon-kapali .mp-yon { display: none; }
  /* Boş sahne yazısı tam ortada duruyor; sahne alçakken uyarının altına
     giriyordu. Uyarı dururken biraz aşağıdan başlıyor. */
  body:not(.mp-yon-kapali) .mp-hint { top: calc(50% + 1.5rem); }
  /* Takip rozetleri uyarının altına insin, üst üste binmesinler.
     Uyarı kapatılınca aşağıda durmaları için sebep kalmıyor. */
  body:not(.mp-yon-kapali) .mp-takip-durum { top: 3.6rem; }
}
body.mp-cikis .mp-yon { display: none; }

.mp-el-secim { display: flex; gap: 1rem; flex-wrap: wrap; }
.mp-el-secim .mp-onay { margin-bottom: .35rem; }

/* ---------- Ekran yakalamada kırpma kutusu ---------- */
.mp-kirp {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: .35rem 0 .6rem;
  border: 1px solid var(--line, #35191a);
  border-radius: 8px;
  overflow: hidden;
  background: #140708;
  touch-action: none;
  cursor: move;
}
.mp-kirp-tuval { display: block; width: 100%; height: 100%; }
.mp-kirp-kutu {
  position: absolute;
  border: 2px solid var(--red, #dd1e1e);
  /* dışarıda kalan alan sönük dursun; hangi bölgenin yansıyacağı belli olsun */
  box-shadow: 0 0 0 9999px rgba(11, 3, 4, .6);
  pointer-events: none;
}
.mp-kirp-tut {
  position: absolute;
  width: 14px; height: 14px;
  background: var(--cream, #ffebde);
  border: 2px solid var(--red, #dd1e1e);
  border-radius: 50%;
  pointer-events: auto;
}
.mp-kirp-tut0 { left: -8px;  top: -8px;    cursor: nwse-resize; }
.mp-kirp-tut1 { right: -8px; top: -8px;    cursor: nesw-resize; }
.mp-kirp-tut2 { right: -8px; bottom: -8px; cursor: nwse-resize; }
.mp-kirp-tut3 { left: -8px;  bottom: -8px; cursor: nesw-resize; }

/* ---------- MIDI eşleştirme düğmesi ---------- */
.mp-midi {
  flex: 0 0 auto;
  min-width: 2.4rem;
  padding: .2rem .35rem;
  border: 1px solid var(--line, #35191a);
  border-radius: 6px;
  background: none;
  color: var(--muted, #b09a94);
  font-family: var(--mono, monospace);
  font-size: .62rem;
  line-height: 1.4;
  cursor: pointer;
}
.mp-midi:hover { color: var(--cream, #ffebde); border-color: var(--muted, #b09a94); }
.mp-midi-bagli { color: var(--cream, #ffebde); border-color: var(--red, #dd1e1e); }
.mp-midi-ogren {
  color: #fff;
  background: var(--red, #dd1e1e);
  border-color: var(--red, #dd1e1e);
  animation: mpMidiYanip 1s ease-in-out infinite;
}
@keyframes mpMidiYanip { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.mp-onay .mp-midi { margin-left: auto; }

/* MIDI hedef listesi: ad solda, eşleştirme düğmesi sağda */
.mp-midi-satir {
  display: flex; align-items: center; gap: .5rem;
  padding: .28rem 0;
}
.mp-midi-ad {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--mono, monospace);
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted, #b09a94);
}
.mp-midi-satir .mp-midi { min-width: 4.4rem; text-align: center; }
/* arttır/azalt yuvaları dar; ad için yer kalsın */
.mp-midi-satir .mp-midi-adim { min-width: 2.6rem; }

/* ---------- Katlanabilir alt bölümler ---------- */
.mp-katlanir { padding-block: .45rem; }
.mp-blok-ac {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: .6rem 0;
  border: 0; background: none;
  color: var(--cream, #ffebde);
  font-family: var(--sans, sans-serif);
  font-size: 1.02rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.mp-blok-ac:hover { color: #fff; }
.mp-ok {
  color: var(--muted, #b09a94);
  font-size: .8rem;
  transition: transform .15s ease;
}
.mp-katlanir.acik .mp-ok { transform: rotate(90deg); }
.mp-katlanir.acik .mp-blok-ac { color: var(--red, #dd1e1e); }

/* Renk kendi başlığı altında dursun: üstünde ayırıcı çizgi, daha belirgin */
.mp-renk-blok { margin: 1.1rem 0 1rem; padding-top: .9rem; border-top: 1px solid var(--line, #35191a); }
.mp-ana-baslik {
  font-family: var(--sans, sans-serif);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--cream, #ffebde);
  margin-bottom: .55rem;
}

/* katlanır başlıklar tıklanabilir olduğunu belli etsin */
.mp-blok-ac { border-radius: 8px; padding-inline: .5rem; margin-inline: -.5rem; }
.mp-blok-ac:hover { background: rgba(255, 255, 255, .05); }

/* "tüm eşleşmeleri sil" üstündeki listeye yapışmasın */
.mp-midi-sil { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line, #35191a); }

/* ---------- Yansıtma alanının sınırı ----------
   Görüntünün nerede bittiğini gösterir. Yansıtma modunda da görünür;
   arayüzün geri kalanı gizlendiği için tek referans bu kalıyor. */
.mp-alan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  border: 1px solid rgba(255, 235, 222, .35);
}
/* Yansıtırken çizgi perdeye düşmesin: çerçeve yalnızca düzenleme yardımı */
body.mp-cikis .mp-alan { display: none; }
.mp-alan::before,
.mp-alan::after {
  content: "";
  position: absolute;
  inset: 0;
  /* köşe çentikleri: kenar çizgisi zayıf kalırsa bunlar hep okunur */
  background:
    linear-gradient(var(--red, #dd1e1e), var(--red, #dd1e1e)) 0 0 / 2.2rem 2px no-repeat,
    linear-gradient(var(--red, #dd1e1e), var(--red, #dd1e1e)) 0 0 / 2px 2.2rem no-repeat,
    linear-gradient(var(--red, #dd1e1e), var(--red, #dd1e1e)) 100% 0 / 2.2rem 2px no-repeat,
    linear-gradient(var(--red, #dd1e1e), var(--red, #dd1e1e)) 100% 0 / 2px 2.2rem no-repeat;
}
.mp-alan::after { transform: scaleY(-1); }

/* ---------- Referans görsel ----------
   Projeksiyonun durduğu yerden çekilmiş fotoğrafı sahnenin üstüne koyar.
   Objenin köşelerini bunun üstünden geçerek çiziyorsunuz. Yansıtılmaz;
   çıkış modunda ve kaydedilen projede yer almaz. */
.mp-referans {
  position: absolute;
  /* Konum JavaScript'ten veriliyor: fotoğraf büyütülüp kaydırılabiliyor,
     inset ile sabitlenseydi yakınlaştırma işlemezdi. */
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  /* Sitenin genel img kuralı görseli sahne genişliğinde kırpıyordu:
     yakınlaştırınca büyümek yerine sola kayıyordu. */
  max-width: none;
  max-height: none;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
  opacity: .5;
}
/* Çekim önizlemesi tam görünsün: fotoğraf yarı saydam duruyor ama
   kadrajı oturturken objeyi net görmek gerekiyor. */
/* Çekim önizlemesi tam görünsün ve aynalı dursun: uygulamada kamera her
   yerde aynalı gösteriliyor, burada ters durunca kadrajı oturtmak
   şaşırtıyordu. Çekilen kare de aynı şekilde aynalanıyor, yani ekranda
   gördüğünüz ne ise fotoğraf o oluyor. */
video.mp-referans { opacity: 1; z-index: 2; transform: scaleX(-1); }
.mp-referans[hidden] { display: none; }
body.mp-cikis .mp-referans { display: none; }

/* Obje seçme kipinde imleç nişan alsın */
body.mp-obje-sec .mp-overlay { cursor: crosshair; }
/* Fotoğrafın seçim kipinde öne çıkması buradan !important ile veriliyordu;
   o kural görünürlük kaydıracını eziyor, kaydıraç boyarken hiç iş
   görmüyordu. Şimdi kipe girerken kaydıracın değerini JavaScript yukarı
   alıyor, denetim kullanıcıda kalıyor. */
body.mp-obje-sec .mp-stage { outline: 2px solid var(--red, #dd1e1e); outline-offset: -2px; }

/* Obje seçiminde seçilen alan yeşil boyanıp gösteriliyor */
.mp-obje-onizleme {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  image-rendering: pixelated;
}
.mp-obje-onizleme[hidden] { display: none; }
body.mp-cikis .mp-obje-onizleme { display: none; }

/* --- zaman çizelgesi (alt şerit) ------------------------------------------
   Zaman yatay bir şey; sağ panelde alt alta listelenince sahnenin nerede
   durduğu görünmüyordu. Şerit uygulamanın altında tam genişlikte duruyor,
   sahneler çubuğun üstünde gerçek yerlerinde. */
.mp-cizelge {
  grid-column: 1 / -1;
  grid-row: 3;
  background: var(--ink-2, #140708);
  border-top: 1px solid var(--line, #35191a);
  min-width: 0;
}

.mp-cizelge-ac {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .5rem .9rem;
  border: 0;
  background: none;
  color: var(--cream, #ffebde);
  font-family: var(--mono, monospace);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.mp-cizelge-ac:hover { background: rgba(255, 255, 255, .04); }
.mp-cizelge-ac:focus-visible { outline: 2px solid var(--red, #dd1e1e); outline-offset: -2px; }
.mp-cizelge-ac .mp-ok { transition: transform .15s ease; color: var(--muted, #b09a94); }
.mp-cizelge.acik .mp-cizelge-ac .mp-ok { transform: rotate(90deg); }

.mp-cizelge-saat {
  margin-left: auto;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--muted, #b09a94);
}

.mp-cizelge-govde { padding: 0 .9rem .8rem; }
.mp-cizelge-govde[hidden] { display: none; }

.mp-cizelge-ust {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}
.mp-cizelge-bosluk { flex: 1 1 1rem; }
.mp-cizelge-ust .mp-onay { margin: 0; }

.mp-cizelge-etiket {
  font-family: var(--mono, monospace);
  font-size: .56rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted, #b09a94);
  white-space: nowrap;
}

/* --- zaman çubuğu --- */
.mp-cizelge-cubuk {
  position: relative;
  height: 44px;
  border: 1px solid var(--line, #35191a);
  border-radius: 9px;
  background: var(--ink-3, #1d0c0d);
  cursor: pointer;
  touch-action: none;
  overflow: hidden;
}
.mp-cizelge-cubuk:focus-visible { outline: 2px solid var(--red, #dd1e1e); outline-offset: 2px; }

.mp-cizelge-dakika {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--line, #35191a);
  pointer-events: none;
}

/* Sahne, zaman çubuğunun üstünde başladığı saniyede duruyor */
.mp-sahne-blok {
  position: absolute;
  top: 5px; bottom: 5px;
  /* Genişlik JavaScript'ten: her blok bir sonraki sahneye kadar uzanıyor,
     üst üste binmiyorlar. Binseydi en üstteki bütün tıklamaları yerdi. */
  padding: 0 .5rem 0 .55rem;
  border: 1px solid var(--line, #35191a);
  border-left: 3px solid var(--muted, #b09a94);
  border-radius: 0 6px 6px 0;
  background: #2a1214;
  color: var(--cream, #ffebde);
  font-family: var(--mono, monospace);
  font-size: .62rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.mp-sahne-blok:hover { background: #3a181a; }
/* Sağ kenarda süre tutamağı olduğu belli olsun */
.mp-sahne-blok::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 5px;
  border-right: 2px solid rgba(255, 235, 222, .35);
}
.mp-sahne-blok:hover::after { border-right-color: var(--cream, #ffebde); }
.mp-sahne-blok { touch-action: none; }
.mp-sahne-blok.secili {
  border-color: var(--red, #dd1e1e);
  border-left-color: var(--red, #dd1e1e);
  background: var(--red-lo, #a91917);
  color: #fff;
}

.mp-cizelge-imlec {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--red, #dd1e1e);
  box-shadow: 0 0 6px var(--red, #dd1e1e);
  pointer-events: none;
}

/* --- seçili sahnenin ayarları --- */
.mp-sahne {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  margin-top: .5rem;
}
.mp-sahne-ad { flex: 1 1 9rem; min-width: 0; }
.mp-sahne-sayi { flex: 0 0 3.6rem; width: 3.6rem; }
.mp-cizelge-alan { display: flex; align-items: center; gap: .3rem; }
.mp-cizelge-govde .mp-note { margin: .5rem 0 0; }

.mp-sayi {
  padding: .4rem .5rem;
  border: 1px solid var(--line, #35191a);
  border-radius: 7px;
  background: var(--ink-3, #1d0c0d);
  color: var(--cream, #ffebde);
  font-family: var(--mono, monospace);
  font-size: .72rem;
}
.mp-sayi:focus-visible { outline: 2px solid var(--red, #dd1e1e); outline-offset: 1px; }

.mp-sahne-ad {
  padding: .4rem .55rem;
  border: 1px solid var(--line, #35191a);
  border-radius: 7px;
  background: var(--ink-3, #1d0c0d);
  color: var(--cream, #ffebde);
  font-family: var(--mono, monospace);
  font-size: .72rem;
}
.mp-sahne-ad:focus-visible { outline: 2px solid var(--red, #dd1e1e); outline-offset: 1px; }

@media (max-width: 900px) {
  .mp-cizelge-govde { padding: 0 .6rem .7rem; }
  .mp-cizelge-cubuk { height: 38px; }
  .mp-sahne-blok { max-width: 6rem; font-size: .56rem; }
}

/* --- piksel haritası ------------------------------------------------------
   Hangi LED'in görüntünün neresinden renk aldığı sahnede görünüyor.
   Yansıtma kipinde katmanın tamamı gizlendiği için perdeye nokta düşmüyor. */
.mp-px {
  fill: rgba(255, 235, 222, .35);
  stroke: rgba(0, 0, 0, .55);
  stroke-width: 1;
  pointer-events: none;
}
.mp-px.sec {
  fill: #39ff14;
  stroke: rgba(0, 0, 0, .7);
}
.mp-px-tut {
  fill: var(--red, #dd1e1e);
  stroke: #fff;
  stroke-width: 2;
  pointer-events: none;
}

/* Şerit listesindeki seçim düğmesi */
.mp-px-sec {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mp-px-sec:hover { background: rgba(255, 255, 255, .06); }
.mp-px-sec.secili {
  border-color: var(--red, #dd1e1e);
  background: var(--red-lo, #a91917);
  color: #fff;
}

/* Modal içinde not ile düğme satırı dip dibe geliyordu */
.mp-modal-ic .mp-note + .mp-row,
.mp-modal-ic .mp-field + .mp-row { margin-top: .9rem; }
.mp-modal-ic .mp-row + .mp-note { margin-top: .5rem; }
.mp-modal-alt { margin-top: 1.4rem; }

/* Açıklama bitip yeni bir ayar başlıyorsa araya boşluk giriyor. Not ile
   sonraki ayarın başlığı dip dibe durunca ("Çıkış çözünürlüğü" gibi) o
   başlığın üstteki metnin devamı mı, yeni bir ayar mı olduğu anlaşılmıyor.
   Ayarın kendi açıklaması ise ayarın hemen altında, ona yapışık kalıyor. */
.mp-modal-ic .mp-note + .mp-field,
.mp-modal-ic .mp-note + .mp-onay,
.mp-modal-ic .mp-note + .mp-ikili,
.mp-modal-ic .mp-note + .mp-kumanda { margin-top: 1.3rem; }
.mp-modal-ic .mp-field + .mp-note { margin-top: .35rem; }
.mp-modal-ic .mp-note + .mp-note { margin-top: .7rem; }

/* Nesne bölümü: başlık, kaydıraçlar ve düğmeler bir arada dursun */
#nesneBolum { margin-bottom: .9rem; }
#nesneBolum[hidden] { display: none; }
#nesneBolum .mp-row { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
#nesneBolum .mp-row .mp-btn { width: 100%; }
.mp-etiket-isler + .mp-note { margin-top: .4rem; }

/* İki onay kutusu yan yana (aynalama gibi eşli ayarlar) */
.mp-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }
.mp-ikili .mp-onay { margin: 0; min-width: 0; }

/* Kısayol listesi */
.mp-kisayol {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  padding: .32rem 0;
  border-bottom: 1px solid var(--line, #35191a);
}
.mp-kisayol kbd {
  flex: 0 0 11rem;
  padding: .18rem .45rem;
  border: 1px solid var(--line, #35191a);
  border-radius: 6px;
  background: var(--ink-3, #1d0c0d);
  color: var(--cream, #ffebde);
  font-family: var(--mono, monospace);
  font-size: .68rem;
  text-align: center;
}
.mp-kisayol span { color: var(--text, #f2e4de); font-size: .8rem; }
@media (max-width: 700px) {
  .mp-kisayol { flex-wrap: wrap; gap: .3rem; }
  .mp-kisayol kbd { flex: 0 0 auto; }
}

/* --- görüş katmanı: editörü yakınlaştırma ------------------------------
   Tuval, referans fotoğraf ve köşe katmanı aynı kapsayıcının içinde, o
   yüzden hepsi birlikte büyüyüp kayıyor. Dönüşüm yerleşimi değiştirmediği
   için tuvalin çözünürlüğü ve yüzde hesapları etkilenmiyor; fare
   koordinatları da katmanın kendi kutusundan okunduğu için kendiliğinden
   doğru kalıyor. */
.mp-gorus {
  position: absolute;
  inset: 0;
  /* Yakınlaştırma iç katmanda; dış kutu perdenin sınırı olduğu için
     yerinde kalıyor ve büyüyen görüntüyü kenarından kırpıyor. */
  overflow: hidden;
}

.mp-gorus-ic {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}

.mp-gorus-arac {
  /* Sahnenin içindeyken perdenin kenar çizgisinin üstüne biniyordu,
     sonra çizelge şeridine taşındı; çizelge kendi sayfasına çekilince
     onunla birlikte kaybolmasın diye en alttaki sayfa çubuğunda duruyor:
     yeri hep aynı köşe, ama hiçbir şeyi örtmüyor. */
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  align-items: stretch;
  gap: 1px;
  border: 1px solid var(--line, #35191a);
  border-radius: 8px;
  overflow: hidden;
  background: var(--ink-3, #1d0c0d);
}
body.mp-cikis .mp-gorus-arac { display: none; }

.mp-gorus-dugme, .mp-gorus-yuzde {
  border: 0;
  background: none;
  color: var(--cream, #ffebde);
  font-family: var(--mono, monospace);
  font-size: .72rem;
  padding: .3rem .55rem;
  cursor: pointer;
  line-height: 1.4;
}
.mp-gorus-yuzde { min-width: 3.4rem; font-size: .64rem; color: var(--muted, #b09a94); }
.mp-gorus-dugme:hover, .mp-gorus-yuzde:hover { background: rgba(255, 255, 255, .08); }
.mp-gorus-dugme:focus-visible, .mp-gorus-yuzde:focus-visible {
  outline: 2px solid var(--red, #dd1e1e); outline-offset: -2px;
}


/* Araç çubuğundaki kısa haber: "kare indi", "kaydediliyor". Boşken hiç
   yer kaplamasın diye kendi kutusu yok, yalnızca yazı. */
.mp-kisa-durum {
  align-self: center;
  font-family: var(--mono, monospace);
  font-size: .64rem;
  color: var(--muted, #b09a94);
  white-space: nowrap;
}


/* Kayıt sürerken düğme kırmızıya dönüyor ve yavaşça nefes alıyor:
   sahnedeyken "kayıt açık mı" diye düşünmek istemezsiniz. */
.mp-tbtn.mp-kayitta {
  background: var(--red-lo, #a91917);
  border-color: var(--red, #dd1e1e);
  color: #fff;
  animation: mp-kayit-nefes 1.6s ease-in-out infinite;
}
@keyframes mp-kayit-nefes {
  0%, 100% { opacity: 1; }
  50%      { opacity: .62; }
}
/* Hareketten rahatsız olanlar için: sistem ayarı kapalıysa yanıp
   sönmüyor, rengi yeterli. */
@media (prefers-reduced-motion: reduce) {
  .mp-tbtn.mp-kayitta { animation: none; }
}


/* --------------------------------------------------------- dokunmatik -- */
/* Parmak fare kadar keskin değil: küçük düğmeler ıskalanıyordu. Bu blok
   dosyanın sonunda duruyor, çünkü büyüttüğü düğmelerin kendi tanımları
   yukarıda; aynı ağırlıkta olduklarından sonra gelen kazanıyor. */
@media (pointer: coarse) {
  .mp-gorus-dugme, .mp-gorus-yuzde {
    padding: .5rem .7rem;
    font-size: .78rem;
    min-height: 2.5rem;
  }
  .mp-gorus-yuzde { min-width: 3.9rem; font-size: .72rem; }
  .mp-ikon { min-width: 2.4rem; min-height: 2.4rem; }
  .mp-list li { padding: .65rem .6rem; }
  .mp-yon { padding: .7rem .9rem; }
  /* Araç çubuğu düğmeleri de parmakla tutulabilsin. Ölçüyü tuttuk:
     daha fazlası çubuğu bir satır daha büyütüp sahneyi eziyor. */
  .mp-tbtn { min-height: 2.25rem; padding-top: .4rem; padding-bottom: .4rem; }
}

/* Nokta bulutu referans fotoğrafla aynı katmanda, tuvali kaplıyor. Kendi
   izdüşümü olduğu için kutuya oturtulmuyor; görüş katmanıyla birlikte
   yakınlaşıp kayıyor. */
#bulutTuval {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
#bulutTuval[hidden] { display: none; }
.mp-bulut { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.mp-bulut .mp-btn { flex: 1 1 auto; }

/* Katman listesi: nesne başlığı ve altındaki yüzler. Başlık listeden
   ayrılsın diye koyu şeritte duruyor, yüzler girintili. */
.mp-list li.mp-grup {
  /* ok · ad · sayı · araçlar */
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  background: #200d0e;
  border-color: var(--line, #35191a);
  gap: .35rem;
}
.mp-list li.mp-grup.sec { border-color: var(--red, #dd1e1e); }
.mp-list li.mp-grup .mp-grup-ok { width: 1.1rem; opacity: .8; }
.mp-list li.mp-grup .mp-grup-ad {
  font-family: var(--mono, monospace); font-size: .72rem;
  color: var(--cream, #ffebde);
}
.mp-grup-sayi {
  font-family: var(--mono, monospace); font-size: .6rem;
  color: var(--muted, #b09a94); white-space: nowrap;
  min-width: 1.1em; text-align: right;
}
.mp-list li.mp-grup .mp-grup-ad { min-width: 4.5rem; }
.mp-list li.mp-alt { margin-left: .8rem; }
.mp-list li.mp-alt .mp-no { opacity: .6; }

/* Çoklu seçim: etkin yüzey kadar güçlü değil, ama seçili olduğu belli */
.mp-list li.coklu { border-color: var(--red-lo, #a91917); }

/* ---------------------------------------------------------------------------
   Dikey ritim. Tek tek yerlere boşluk eklemek yerine kural: bir şey bitip
   yeni bir ayar başlıyorsa arada nefes var, ayarın kendi açıklaması ise
   ayara yapışık kalıyor. Panelde de modalda da aynı ölçü.
   ------------------------------------------------------------------------ */
.mp-note + .mp-field,
.mp-note + .mp-onay,
.mp-note + .mp-ikili,
.mp-note + .mp-renk-blok,
.mp-uyari + .mp-field,
.mp-uyari + .mp-onay,
.mp-renk-blok + .mp-field,
.mp-renk-blok + .mp-onay { margin-top: 1rem; }

.mp-field + .mp-note,
.mp-onay + .mp-note,
.mp-ikili + .mp-note { margin-top: .35rem; }

.mp-field + .mp-alt-baslik,
.mp-row + .mp-alt-baslik,
.mp-note + .mp-alt-baslik,
.mp-onay + .mp-alt-baslik { margin-top: 1.2rem; }

.mp-alt-baslik + .mp-field,
.mp-alt-baslik + .mp-onay,
.mp-alt-baslik + .mp-row { margin-top: .1rem; }

/* Blok içindeki katlanır bölümler: seçili yüzeyin nesnesi, kaynağı ve
   şekli. Panelin tamamı açıkken ekranı kaplıyordu; her biri kendi
   başlığından kapanıyor. */
.mp-ic-kat { margin: .2rem 0 .6rem; }
.mp-ic-kat > .mp-blok-ac {
  width: 100%; font-size: .66rem; letter-spacing: .12em;
  padding-block: .4rem;
}
.mp-ic-kat.acik > .mp-blok-ac { color: var(--red, #dd1e1e); }
.mp-ic-kat > .mp-sub { padding-top: .2rem; }
.mp-ic-kat + .mp-ic-kat { border-top: 1px solid var(--line, #35191a); padding-top: .3rem; }

/* "Nesne ekle" satırı başlığın altına indi: başlık artık katlama düğmesi */
.mp-nesne-ekle { align-items: center; margin-bottom: .7rem; }
.mp-nesne-ekle .mp-mini-sec { flex: 1 1 auto; min-width: 0; }

/* Voxel ızgarası: sahnede küpün telleri ve hücreleri */
.mp-voxel-tel { fill: none; stroke: var(--red, #dd1e1e); stroke-width: 1; opacity: .5; }
.mp-voxel-nokta { fill: var(--cream, #ffebde); opacity: .65; }
.mp-voxel-blok {
  border: 1px solid var(--line, #35191a);
  border-radius: 10px;
  padding: .7rem;
  margin-bottom: .7rem;
}
.mp-voxel-blok .mp-row .mp-sayi { flex: 1 1 0; min-width: 0; }

/* Katlanan bölümün başlığı ile içeriği arasına nefes: "Takip", "Ses
   tepkisi" ve "MIDI denetleyici" açıldığında düğmeler başlığın dibine
   yapışıyordu. Işık bölümünde ilk öğe alt başlık olduğu için zaten
   boşluklu; iki kez boşluk olmasın diye ona dokunmuyoruz. */
.mp-katlanir > .mp-sub > :first-child:not(.mp-alt-baslik) { margin-top: .55rem; }
.mp-ic-kat > .mp-sub > :first-child:not(.mp-alt-baslik) { margin-top: .4rem; }

/* Taramada alınan kareler: küçük görüntüler, üstünde sıra numarası ve
   atma düğmesi. Hangi kareyi aldığını görmeden hangisini atacağına
   karar veremiyorsun. */
.mp-kareler {
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin: .5rem 0 .7rem;
}
.mp-kareler[hidden] { display: none; }
.mp-kare {
  position: relative; line-height: 0;
  border: 1px solid var(--line, #35191a); border-radius: 6px; overflow: hidden;
}
.mp-kare-zemin { border-color: var(--red, #dd1e1e); }
.mp-kare img { display: block; width: 72px; height: auto; }
.mp-kare-no {
  position: absolute; left: 0; bottom: 0;
  font-family: var(--mono, monospace); font-size: .55rem; line-height: 1;
  padding: .15rem .25rem; background: rgba(0, 0, 0, .65);
  color: var(--cream, #ffebde);
}
.mp-kare-sil {
  position: absolute; right: 0; top: 0;
  padding: .05rem .2rem; background: rgba(0, 0, 0, .65);
  line-height: 1;
}

/* Tarama düğmeleri dar panelde yan yana sığmıyordu, yazısı kesiliyordu */
#taramaKutu .mp-row { flex-wrap: wrap; }
#taramaKutu .mp-row .mp-btn { flex: 1 1 9rem; min-width: 0; }

/* ---------------------------------------------------------------------------
   Klavye odağı. Düğmelerde hiç görünmüyordu: sekmeyle gezen biri nerede
   olduğunu göremiyordu, sahnede klavyeyle çalışmak da zordu. Fare ile
   tıklayınca çıkmıyor (:focus-visible), yalnız klavyede.
   ------------------------------------------------------------------------ */
.mp-tbtn:focus-visible,
.mp-btn:focus-visible,
.mp-ikon:focus-visible,
.mp-blok-ac:focus-visible,
.mp-etiket:focus-visible,
.mp-mini-sec:focus-visible,
.mp-back:focus-visible,
.mp-modal-kapat:focus-visible,
.mp-list li:focus-visible {
  outline: 2px solid var(--cream, #ffebde);
  outline-offset: 2px;
  border-radius: 8px;
}
.mp-topbar .mp-tbtn:focus-visible { outline-color: #fff; }

/* ---------------------------------------------------------------------------
   Silme işleri silme gibi dursun. "Yüzeyi sil" ve listedeki çarpı, üstüne
   gelmeden önce sıradan bir düğmeden ayırt edilemiyordu.
   ------------------------------------------------------------------------ */
.mp-danger {
  border-color: rgba(221, 30, 30, .5);
  color: var(--red-acik, #f0463c);
}
.mp-ikon-sil { color: var(--red-acik, #f0463c); opacity: .85; }
.mp-ikon-sil:hover { opacity: 1; background: rgba(221, 30, 30, .18); }

/* ---------------------------------------------------------------------------
   Şeritte bir asıl iş var: perdeye çıkmak. Onu dolu göstermek, gösteri
   anında aranacak düğmeyi aramaktan çıkarıyor.
   ------------------------------------------------------------------------ */


/* ---------------------------------------------------------------------------
   Okunurluk: bölüm başlığının kırmızısı koyu zeminde 4.02 kontrast
   veriyordu (eşik 4.5). Bir tık açığı 5.3 veriyor, görünüş aynı kalıyor.
   Küçük etiketler de bir punto büyüdü.
   ------------------------------------------------------------------------ */
:root { --red-acik: #f0463c; }
.mp-block h2,
.mp-katlanir.acik > .mp-blok-ac,
.mp-ic-kat.acik > .mp-blok-ac,
.mp-block-head h2 { color: var(--red-acik, #f0463c); }
.mp-field > span { font-size: .76rem; }
.mp-alt-baslik { font-size: .68rem; }
.mp-note { font-size: .76rem; }

/* Yakınlaştırma düğmeleri parmakla da tutulabilsin */
.mp-gorus-dugme { min-width: 2rem; min-height: 2rem; }
.mp-gorus-yuzde { min-height: 2rem; }

/* Boş sahnedeki ipucu artık metin ve bir düğme; tıklanabilir olduğu için
   fare olaylarını da alması gerekiyor (sahne katmanı pointer-events: none). */
.mp-hint { pointer-events: none; }
.mp-hint p { margin: 0 0 .8rem; }
.mp-hint-btn {
  pointer-events: auto;
  flex: 0 0 auto;
  padding: .5rem 1.1rem;
  min-height: 2.2rem;
}

/* Dizüstü genişliklerinde şerit tek satırda kalsın: düğmeler biraz
   daralıyor, ancak o zaman da sığmazsa alt satıra geçiyor. */
@media (max-width: 1440px) {
  .mp-topbar { gap: .6rem; padding-inline: .6rem; }
  .mp-araclar-ust { gap: .25rem; }
  .mp-tbtn { padding: .38rem .5rem; font-size: .66rem; letter-spacing: .02em; }
}
@media (max-width: 1180px) {
  .mp-tbtn { padding: .35rem .42rem; font-size: .62rem; }
  .mp-back { font-size: .66rem; }
}

/* Ayarlar penceresindeki katlanır bölümler: başlık görünümü aynı kalıyor,
   yanına açılıp kapanan ok geliyor. */
.mp-modal-kat { margin: 1.1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line, #35191a); }
.mp-modal-kat > .mp-blok-ac {
  width: 100%;
  font-family: var(--mono, monospace);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted, #b09a94);
}
.mp-modal-kat.acik > .mp-blok-ac { color: var(--red-acik, #f0463c); }
.mp-modal-kat > .mp-modal-govde { padding-top: .6rem; }

/* Seçili satır yalnız renkle belli oluyordu; kırmızıyı ayırt etmekte
   zorlanan biri için de, göz ucuyla bakan biri için de ince bir işaret
   gerekiyor: solda bir şerit. */
.mp-list li { position: relative; }
.mp-list li.sec::before,
.mp-list li.coklu::before {
  content: '';
  position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--red, #dd1e1e);
}
.mp-list li.coklu::before { background: var(--red-lo, #a91917); }
.mp-list li.mp-grup.sec::before { top: 4px; bottom: 4px; }

/* Pencere kapatma düğmesi parmakla da tutulabilsin */
.mp-modal-kapat { min-width: 2.2rem; min-height: 2.2rem; }

/* ---------------------------------------------------------------------------
   İç bölüm başlıkları (nesne, kaynak, yüzeyin şekli) kırmızı olunca blok
   başlıklarıyla yarışıyor ve sırıtıyordu. Açıkken yalnız biraz aydınlanıyor.
   ------------------------------------------------------------------------ */
.mp-ic-kat > .mp-blok-ac { color: var(--muted, #b09a94); }
.mp-ic-kat.acik > .mp-blok-ac { color: var(--cream, #ffebde); }

/* ---------------------------------------------------------------------------
   Perdeye çıkma düğmesi belli olsun ama şeridi bölmesin: dolu beyaz fazla
   sertti, beyaz çerçeve ve hafif dolgu yetiyor.
   ------------------------------------------------------------------------ */
/* Perdeye çıkma düğmesi bir ara öne çıkarılmıştı; dikkat dağıtıyordu,
   şeritteki öbür düğmelerle aynı görünüyor. */

/* ---------------------------------------------------------------------------
   Durum yazısı ("kare indirildi" gibi) şeridin içinde yer kaplıyordu:
   belirince düğmeler kayıyor, kaybolunca geri geliyordu. Artık şeridin
   altında, akışın dışında duruyor; hiçbir şeyi oynatmıyor.
   ------------------------------------------------------------------------ */
.mp-topbar { position: relative; }
.mp-kisa-durum {
  position: absolute;
  top: calc(100% + .3rem);
  right: .8rem;
  z-index: 6;
  padding: .25rem .55rem;
  border-radius: 8px;
  background: rgba(20, 7, 8, .92);
  border: 1px solid var(--line, #35191a);
  color: var(--cream, #ffebde);
  font-family: var(--mono, monospace);
  font-size: .66rem;
  white-space: nowrap;
  pointer-events: none;
}
.mp-kisa-durum:empty { display: none; }

/* ---------------------------------------------------------------------------
   Panel kenarındaki tutamaç. İnce bir çizgi görünüyor ama tutma alanı daha
   geniş; imleç üstüne gelince ve sürüklerken çizgi aydınlanıyor.
   ------------------------------------------------------------------------ */
.mp-tutamac {
  grid-column: 2; grid-row: 2;
  justify-self: start;
  width: 9px;
  margin-left: -4px;
  z-index: 7;
  cursor: col-resize;
  background: transparent;
  position: relative;
}
.mp-tutamac::after {
  content: '';
  position: absolute; inset: 0 auto 0 4px;
  width: 1px;
  background: transparent;
  transition: background .12s ease;
}
.mp-tutamac:hover::after,
.mp-tutamac.tutuluyor::after,
.mp-tutamac:focus-visible::after { background: var(--red, #dd1e1e); }
.mp-tutamac:focus-visible { outline: none; }
body.mp-panel-surukle { cursor: col-resize; user-select: none; }
body.mp-panel-kapali .mp-tutamac { display: none; }

/* ===========================================================================
   Üç ayrı boyut. Aşağıdaki kurallar dosyanın sonunda duruyor ki önceki
   genel kuralların üstüne binsin.

   Telefon  : tek sütun, şerit tek satır ve yana kaydırılıyor, panel altta
              çekmece gibi; kenar tutamaçları kapalı (parmakla iş görmüyor).
   Tablet   : dikeyde sahne üstte panel altta, yatayda yanda panel.
   Bilgisayar: iki sütun, panel ve çizelge kenarından sürüklenebiliyor.
   ======================================================================== */

/* ----------------------------------------------------------- telefon ---- */
@media (max-width: 640px) {
  .mp-app {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(46dvh, 1fr) auto auto auto;
  }
  .mp-stage { grid-column: 1; grid-row: 2; min-height: 46dvh; }
  .mp-cizelge-tutamac { grid-row: 3; }
  .mp-cizelge { grid-column: 1; grid-row: 4; }
  .mp-panel { grid-column: 1; grid-row: 5; max-height: 46dvh; }

  /* Şerit tek satır: sarınca dört sıra oluyor ve ekranın dörtte birini
     yiyordu. Tek satırda kalıp yana kaydırılıyor, hiçbir düğme
     kaybolmuyor. */
  .mp-topbar {
    flex-wrap: nowrap;
    gap: .5rem;
    padding: .35rem .5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mp-topbar::-webkit-scrollbar { display: none; }
  .mp-back { flex: 0 0 auto; font-size: .6rem; }
  .mp-araclar-ust {
    flex-wrap: nowrap;
    width: auto;
    margin-left: 0;
    gap: .3rem;
  }
  .mp-tbtn {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: .45rem .6rem;
    font-size: .64rem;
    min-height: 2.1rem;
  }
  .mp-lang { flex: 0 0 auto; }

  /* Kenar tutamaçları parmakla iş görmüyor, yer kaplamasın */
  .mp-tutamac, .mp-cizelge-tutamac { display: none; }

  /* Panel açıkken sahne çok küçülmesin diye panel kendi içinde kayıyor */
  .mp-panel { overflow-y: auto; }
  .mp-block { padding: .85rem .8rem .95rem; }

  /* Parmakla tutulacak her şey en az 44 piksel */
  .mp-btn { min-height: 2.75rem; }
  .mp-list li { padding: .6rem .5rem; }
  .mp-ikon { min-width: 2.2rem; min-height: 2.2rem; }
}

/* ------------------------------------------------------------ tablet ---- */
@media (min-width: 641px) and (max-width: 1024px) and (orientation: portrait) {
  .mp-app {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(50dvh, 1fr) auto auto auto;
  }
  .mp-stage { grid-column: 1; grid-row: 2; }
  .mp-cizelge-tutamac { grid-row: 3; }
  .mp-cizelge { grid-column: 1; grid-row: 4; }
  .mp-panel {
    grid-column: 1; grid-row: 5;
    max-height: 42dvh;
    border-left: 0;
    border-top: 1px solid var(--line, #35191a);
  }
  .mp-tutamac { display: none; }
  /* Dikey tablette de şerit tek satır: sarınca üç sıra oluyor ve
     ekranın sekizde birini alıyordu. */
  .mp-topbar {
    flex-wrap: nowrap;
    gap: .5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .mp-topbar::-webkit-scrollbar { display: none; }
  .mp-araclar-ust { flex-wrap: nowrap; width: auto; margin-left: auto; }
  .mp-tbtn { flex: 0 0 auto; white-space: nowrap; font-size: .64rem; }
}

@media (min-width: 641px) and (max-width: 1024px) and (orientation: landscape) {
  .mp-app {
    grid-template-columns: 1fr clamp(240px, 32%, 340px);
    grid-template-rows: auto 1fr auto auto;
  }
  .mp-panel {
    grid-column: 2; grid-row: 2;
    max-height: none;
    border-top: 0;
    border-left: 1px solid var(--line, #35191a);
  }
  .mp-stage { grid-column: 1; grid-row: 2; }
  .mp-tutamac { display: none; }
  .mp-tbtn { font-size: .62rem; padding: .35rem .45rem; }
}

/* Pencere 1024'ün altına inince düzen tablet katmanına düşüyor ve panel
   tutamacı gizleniyordu; panelin genişliği orada da ayarlanabilmeli.
   Dokunmatikte çubuk kalınlaşıyor (aşağıdaki kurallar), parmakla da
   tutulabiliyor. */
@media (min-width: 641px) and (max-width: 1024px) and (orientation: landscape) {
  .mp-app { grid-template-columns: 1fr var(--panel-gen, 300px); }
  .mp-tutamac { display: block; }
}

/* Dokunmatikte tutamaçlar kalın olsun (kalem ya da parmak) */
@media (pointer: coarse) and (min-width: 1025px) {
  .mp-tutamac { width: 14px; margin-left: -7px; }
  .mp-cizelge-tutamac { height: 14px; margin-top: -7px; }
}

/* Çizelge tutamacı: panel kenarının yatay ikizi. Yalnız çizelge açıkken
   görünüyor, kapalıyken ayarlanacak bir yükseklik yok. */
.mp-cizelge-tutamac {
  grid-column: 1 / -1; grid-row: 3;
  align-self: end;
  height: 9px;
  margin-bottom: -4px;
  z-index: 7;
  cursor: row-resize;
  position: relative;
}
.mp-cizelge-tutamac[hidden] { display: none; }
.mp-cizelge-tutamac::after {
  content: '';
  position: absolute; inset: auto 0 4px 0;
  height: 1px;
  background: transparent;
  transition: background .12s ease;
}
.mp-cizelge-tutamac:hover::after,
.mp-cizelge-tutamac.tutuluyor::after,
.mp-cizelge-tutamac:focus-visible::after { background: var(--red, #dd1e1e); }
.mp-cizelge-tutamac:focus-visible { outline: none; }
body.mp-cizelge-surukle { cursor: row-resize; user-select: none; }
.mp-cizelge { grid-row: 4; }
/* Çizelge tutamaçtan yükseltilebiliyor: ölçü verilince gövde o boyda
   duruyor (içerik kısa olsa da), verilmediğinde içeriğine göre. */
.mp-cizelge-govde {
  overflow-y: auto;
  height: var(--cizelge-yuk, auto);
  max-height: 60dvh;
}

/* Yana kaydırılan şeridin sağ kenarında hafif bir soluklaşma: daha çok
   düğme olduğu belli olsun. */
@media (max-width: 1024px) {
  .mp-topbar {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
}

/* --------------------------------------- telefon: yan çevrilmiş hâli ---- */
/* Yan çevrilen telefonda yükseklik 400 pikselin altına düşüyor. Şerit iki
   sıraya sarıp ekranın dörtte birini, açılan çizelge de 60dvh ile geri
   kalanın yarısını alıyordu: toplam ekranı aşıyor, çizelge alt kenarın
   altında kalıp hiç açılmamış gibi görünüyordu. Burada şerit tek satır
   ve yana kaydırılıyor, çizelge kısa ve kendi içinde kayıyor, sahne de
   aradaki bütün yeri alıyor. Yüksekliğe bakıyoruz çünkü sorun ekranın
   dar olması değil, alçak olması. */
@media (orientation: landscape) and (max-height: 500px) {
  .mp-app {
    /* Panelin payı tutamaçtan ayarlanıyor; dokunulmamışsa dar duruyor,
       sahne yan çevrilmiş telefonda zaten alçak. */
    grid-template-columns: 1fr var(--panel-gen, 28%);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
  }
  .mp-stage { grid-column: 1; grid-row: 2; min-height: 0; }
  .mp-panel {
    grid-column: 2; grid-row: 2;
    max-height: none;
    overflow-y: auto;
    border-top: 0;
    border-left: 1px solid var(--line, #35191a);
  }
  body.mp-panel-kapali .mp-app {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
  }

  /* Şerit tek satır, yana kaydırılıyor: hiçbir düğme kaybolmuyor ama
     yüksekliği iki kat yerine bir satır. */
  .mp-topbar {
    flex-wrap: nowrap;
    gap: .4rem;
    padding: .22rem .5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mp-topbar::-webkit-scrollbar { display: none; }
  .mp-back { flex: 0 0 auto; font-size: .58rem; }
  .mp-araclar-ust {
    flex-wrap: nowrap;
    width: auto;
    margin-left: auto;
    gap: .28rem;
  }
  .mp-tbtn {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: .3rem .5rem;
    font-size: .6rem;
    min-height: 1.85rem;
  }
  .mp-lang { flex: 0 0 auto; }

  /* Çizelge açıkken sahneyi ezmesin */
  .mp-cizelge { grid-column: 1 / -1; grid-row: 4; }
  .mp-cizelge-ac { padding: .3rem .6rem; }
  .mp-cizelge-govde { height: var(--cizelge-yuk, 30dvh); max-height: 55dvh; padding: 0 .6rem .5rem; }
  .mp-cizelge-cubuk { height: 32px; }

  /* Yandaki panel dar: ad kutusuyla dört düğme aynı satıra sığmıyor ve
     satır panelin sağından taşıyordu. Parmak hedeflerini küçültmek
     yerine düğmeleri alt sıraya alıyoruz. */
  .mp-list li { grid-template-columns: auto auto minmax(0, 1fr) auto; row-gap: .3rem; }
  .mp-list .mp-araclar { grid-column: 1 / -1; justify-self: end; }

  /* Kenarlar parmakla da tutulabilsin diye çubuklar kalın */
  .mp-tutamac { display: block; width: 22px; margin-left: -11px; }
  .mp-tutamac::after { inset: 0 auto 0 11px; }
  .mp-cizelge-tutamac { display: block; height: 22px; margin-top: -11px; }
  .mp-cizelge-tutamac::after { inset: auto 0 11px 0; }
  .mp-block { padding: .7rem .7rem .8rem; }
}

/* ------------------------------------- alttaki panelin tutamacı -------- */
/* Panel dik ekranda altta çekmece gibi duruyor; kenarı sağa sola değil
   yukarı aşağı çekiliyor. Tutamaç panelin üst kenarına yatıyor ve
   panelin yüksekliğini ayarlıyor, çizelgeninki de açık kalıyor. İkisi de
   parmak için kalın. Sahnenin tabanı düşüyor ki panel büyüyebilsin;
   panele dokunulmadıkça yerleşim eskisi gibi duruyor. */
@media (max-width: 1024px) and (orientation: portrait) {
  .mp-app { grid-template-rows: auto minmax(25dvh, 1fr) auto auto auto; }
  .mp-stage { min-height: 25dvh; }

  .mp-tutamac {
    display: block;
    grid-column: 1; grid-row: 5;
    justify-self: stretch; align-self: start;
    width: auto; height: 22px;
    margin: -11px 0 0;
    cursor: row-resize;
  }
  .mp-tutamac::after { inset: auto 0 11px 0; width: auto; height: 1px; }
  body.mp-panel-surukle { cursor: row-resize; }

  .mp-cizelge-tutamac { display: block; height: 22px; margin-top: -11px; }
  .mp-cizelge-tutamac::after { inset: auto 0 11px 0; }

  .mp-panel { max-height: var(--panel-yuk, 46dvh); }
}
@media (min-width: 641px) and (max-width: 1024px) and (orientation: portrait) {
  .mp-panel { max-height: var(--panel-yuk, 42dvh); }
}

/* ------------------------------------ dar panelde düğme ölçüsü --------- */
/* Panel kenarından daraltılınca düğmeler alt satıra iniyordu. Sarmak
   yerine ölçüyü panele göre veriyoruz: yazı ve boşluk biraz küçülünce
   üçü yan yana kalıyor. Ölçü pencereye değil panelin kendi genişliğine
   bakıyor, çünkü panel artık her boyda olabiliyor. */
.mp-panel { container-type: inline-size; container-name: panel; }

@container panel (max-width: 330px) {
  .mp-btn {
    flex: 1 1 4.4rem;
    font-size: .66rem;
    letter-spacing: .02em;
    padding: .5rem .3rem;
  }
}
@container panel (max-width: 272px) {
  .mp-btn {
    flex: 1 1 3.8rem;
    font-size: .62rem;
    letter-spacing: 0;
    padding: .45rem .22rem;
  }
}

/* --------------------------------------------- otomatik kaydın durumu -- */
/* Kayıt sessizce çalışıyor; ne zaman kaydedildiği görünsün diye şeridin
   altında küçük bir yazı duruyor. Akışın dışında (mutlak konumlu), yani
   belirip kaybolurken düğmeleri oynatmıyor. Kaydedilemezse kırmızıya
   dönüyor ve panelde uyarı açılıyor: eskiden hata yutuluyor, çalışma
   kaydedilmiyor ama kimse fark etmiyordu. */
.mp-kayit-durum {
  margin: -.2rem 0 1.1rem;
  font-family: var(--mono, monospace);
  font-size: .68rem;
  color: var(--muted, #b09a94);
}
.mp-kayit-durum:empty { display: none; }
.mp-kayit-durum.hata { color: var(--red-acik, #f0463c); }


/* Panelin başındaki kayıt uyarısı, ilk bölümden ayrılsın */
.mp-kayit-uyari { border-bottom: 1px solid var(--line, #35191a); }
.mp-kayit-uyari .mp-btn { margin-top: .6rem; }

/* -------------------------------------------- çizelge başlık satırı --- */
/* Şeridin başı: solda yakınlaştırma denetimi, yanında çizelgeyi açan
   düğme. Düğme kalan yeri alıyor, dar ekranda adı kısalıyor ki denetim
   ile saat yan yana kalsın. */
.mp-cizelge-baslik {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-left: .6rem;
}
.mp-cizelge-baslik .mp-cizelge-ac {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: .3rem;
}
.mp-cizelge-ad {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===========================================================================
   Çalışma alanı: sol panel, sağ panel ve sayfa çubuğu.

   Düzen profesyonel programlardaki mantığı izliyor: tek proje, birden çok
   sayfa. Alttaki çubuk sayfayı değiştiriyor, panellerin içi o işe göre
   diziliyor. Listeler solda (havuz), seçilenin ayarları sağda (denetçi),
   sahne ortada, zaman çizelgesi altta.

   Sayfa çubuğu ızgaranın içinde değil, en altta sabit duruyor: ızgaraya
   satır eklemek telefondan masaüstüne kadar bütün yerleşimleri tek tek
   değiştirmeyi gerektiriyordu.
   ======================================================================== */

.mp-sayfalar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 8;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: .2rem;
  height: var(--sayfa-yuk, 34px);
  padding: 0 .5rem;
  background: var(--ink-2, #140708);
  border-top: 1px solid var(--line, #35191a);
}
.mp-app { height: calc(100dvh - var(--sayfa-yuk, 34px)); }
body.mp-cikis .mp-app { height: 100dvh; }
body.mp-cikis .mp-sayfalar { display: none; }

.mp-sayfa {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .2rem .9rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--muted, #b09a94);
  font-family: var(--mono, monospace);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.mp-sayfa:hover { color: var(--cream, #ffebde); background: rgba(255, 255, 255, .04); }
.mp-sayfa:focus-visible { outline: 2px solid var(--red, #dd1e1e); outline-offset: -2px; }
.mp-sayfa[aria-selected="true"] {
  color: #fff;
  background: var(--ink-3, #1d0c0d);
  border-color: var(--red, #dd1e1e);
}
.mp-sayfa-im { font-size: .8rem; line-height: 1; }

/* Üç sütunlu düzen yalnız bilgisayarda: dar ekranda liste sağdaki panele
   dönüyor, sol panel hiç açılmıyor. */
@media (min-width: 1025px) {
  .mp-app { grid-template-columns: var(--sol-gen, 250px) 1fr var(--panel-gen, 360px); }
  .mp-topbar { grid-column: 1 / -1; grid-row: 1; }
  /* İki sınıf da .mp-panel: sıralamaya güvenmemek için sol panelin
     kuralı daha belirgin yazılıyor, yoksa sağ sütuna düşüyor. */
  .mp-panel.mp-panel-sol {
    grid-column: 1; grid-row: 2;
    border-left: 0;
    border-right: 1px solid var(--line, #35191a);
  }
  .mp-tutamac.mp-tutamac-sol {
    grid-column: 1; grid-row: 2;
    justify-self: end;
    margin-left: 0;
    margin-right: -4px;
  }
  .mp-stage { grid-column: 2; grid-row: 2; }
  .mp-panel { grid-column: 3; grid-row: 2; }
  .mp-tutamac { grid-column: 3; grid-row: 2; }
  .mp-cizelge-tutamac, .mp-cizelge { grid-column: 1 / -1; }

  body.mp-sol-kapali .mp-app { grid-template-columns: 0 1fr var(--panel-gen, 360px); }
  /* Sayfanın sağ panelinde gösterecek bir şey yoksa sütun kapanıyor */
  body.mp-sag-kapali .mp-app { grid-template-columns: var(--sol-gen, 250px) 1fr 0; }
  body.mp-sag-kapali .mp-panel:not(.mp-panel-sol),
  body.mp-sag-kapali .mp-tutamac:not(.mp-tutamac-sol) { display: none; }
  body.mp-sol-kapali .mp-panel.mp-panel-sol,
  body.mp-sol-kapali .mp-tutamac.mp-tutamac-sol { display: none; }
  /* İkisi birden boşsa (ışık sayfası) sahne bütün genişliği alıyor;
     yoksa iki kuraldan sonuncusu kazanıp solda 250 piksel boşluk kalıyor. */
  body.mp-sol-kapali.mp-sag-kapali .mp-app { grid-template-columns: 0 1fr 0; }
}

@media (max-width: 1024px) {
  .mp-panel.mp-panel-sol, .mp-tutamac.mp-tutamac-sol { display: none; }
  .mp-sayfalar {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .mp-sayfalar::-webkit-scrollbar { display: none; }
  .mp-sayfa { flex: 0 0 auto; padding: .2rem .6rem; font-size: .56rem; }
}

/* --------------------------------------------------- renk çemberleri --- */
/* Açı renk tonu, yarıçap doygunluk, altındaki kaydıraç parlaklık. Üç
   çember yan yana; panel daralınca alt alta geçiyorlar. */
.mp-cark-sira {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin: .2rem 0 1rem;
}
.mp-cark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  flex: 0 0 auto;
}
.mp-cark-ad {
  font-family: var(--mono, monospace);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted, #b09a94);
}
.mp-cark-tuval {
  display: block;
  border-radius: 50%;
  cursor: crosshair;
  touch-action: none;
  background: #0b0304;
}
.mp-cark-tuval:focus-visible { outline: 2px solid var(--red, #dd1e1e); outline-offset: 3px; }
.mp-cark-parlak { width: 112px; }
.mp-cark-alt { display: flex; align-items: center; gap: .3rem; }
.mp-cark-kod {
  width: 56px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--line, #35191a);
  border-radius: 6px;
  background: none;
  cursor: pointer;
}
.mp-cark-sifirla { font-size: .8rem; }

/* ------------------------------------------------ çizelge sayfası ------ */
/* Kurgu programlarındaki çizelge düzeni: solda parça başlığı, sağda
   kaydırılabilir alan, üstte cetvel, altında sahne blokları. */
.mp-cizelge-arac {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-left: .4rem;
}
.mp-cizelge-yuzde {
  min-width: 3.2rem;
  text-align: center;
  font-family: var(--mono, monospace);
  font-size: .6rem;
  color: var(--muted, #b09a94);
}
.mp-cizelge-menu { position: relative; }
.mp-cizelge-menu > summary {
  list-style: none;
  cursor: pointer;
  padding: .2rem .5rem;
  border-radius: 6px;
  color: var(--muted, #b09a94);
  font-size: .9rem;
  line-height: 1;
}
.mp-cizelge-menu > summary::-webkit-details-marker { display: none; }
.mp-cizelge-menu > summary:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.mp-cizelge-menu-ic {
  position: absolute;
  right: 0; bottom: calc(100% + .35rem);
  z-index: 9;
  min-width: 13rem;
  padding: .7rem .8rem;
  border: 1px solid var(--line, #35191a);
  border-radius: 10px;
  background: var(--ink-2, #140708);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}

.mp-cizelge-parca-satir { display: flex; align-items: stretch; gap: .4rem; }
.mp-cizelge-parca {
  flex: 0 0 auto;
  align-self: flex-end;
  width: 5.2rem;
  padding: .3rem .4rem;
  border: 1px solid var(--line, #35191a);
  border-radius: 8px;
  background: var(--ink-3, #1d0c0d);
  color: var(--muted, #b09a94);
  font-family: var(--mono, monospace);
  font-size: .56rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.mp-cizelge-kaydir {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.mp-cizelge-ic { position: relative; min-width: 100%; }
.mp-cizelge-cetvel {
  position: relative;
  height: 16px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--line, #35191a);
}
.mp-cetvel-im {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  padding-top: 1px;
  font-family: var(--mono, monospace);
  font-size: .52rem;
  color: var(--muted, #b09a94);
  white-space: nowrap;
}
.mp-cetvel-im::before {
  content: '';
  position: absolute;
  left: 50%; bottom: -3px;
  width: 1px; height: 4px;
  background: var(--line, #35191a);
}
.mp-cizelge-cubuk.adsiz .mp-sahne-blok { font-size: 0; }

/* --------------------------------------------------- alttaki panel ----- */
/* Renk çemberleri gibi geniş yer isteyen bölümler için alttaki alan.
   Renk düzeltme programlarında çemberler hep altta duruyor. */
.mp-alt-panel {
  grid-column: 1 / -1;
  grid-row: 4;
  min-width: 0;
  /* Ölçü verilmemişse içeriğine göre (en çok ekranın 46'da biri kadar);
     tutamaçtan çekilince o boy geçerli. max() ikisini tek satırda
     birleştiriyor: değişken yoksa eski davranış aynen duruyor. */
  height: var(--alt-yuk, auto);
  max-height: max(46dvh, var(--alt-yuk, 0px));
  overflow-y: auto;
  padding: .6rem .9rem 1rem;
  background: var(--ink-2, #140708);
  border-top: 1px solid var(--line, #35191a);
}
.mp-alt-panel[hidden] { display: none; }
/* Bölümler yan yana: çemberler solda, kapsam sağda (renk düzeltme
   panellerindeki gibi). Dar kalırsa alt alta geçiyorlar. */
.mp-alt-panel { display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: flex-start; }
.mp-alt-panel > .mp-block { flex: 1 1 22rem; min-width: 0; }
.mp-alt-panel > [data-bolum="kapsam"] { flex: 0 1 22rem; }
.mp-alt-panel .mp-block { padding: 0; border: 0; }
.mp-alt-panel .mp-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  align-items: flex-start;
}
.mp-alt-panel .mp-cark-sira { margin: 0; }

/* İç içe alt bölümler (şekil ayarları, maske ayarları) kendi kutusu
   olmadan aksın: "display: contents" ile çocukları doğrudan üstteki
   satıra giriyor. Kutu olarak kalınca kendi eni kadar yer kaplıyor ve
   içindeki kaydıraçlar alt alta biniyordu; boyut da yüzeyin şeklinin
   altına düşüyordu. */
.mp-alt-panel .mp-sub .mp-sub,
.mp-alt-panel .mp-sub > .mp-ic-kat { display: contents; }

/* Alt paneldeki yüzey listesi kurgu programlarındaki gibi sıkı: satırlar
   alçak, ad kutusu küçük. Uzun listede ekranın yarısını yemesin. */
.mp-alt-panel .mp-list li { padding: .25rem .4rem; gap: .35rem; }
.mp-alt-panel .mp-list .mp-ad { padding: .2rem .4rem; font-size: .72rem; }
.mp-alt-panel .mp-list .mp-ikon { padding: .1rem .25rem; font-size: .8rem; }
.mp-alt-panel .mp-list .mp-no { font-size: .66rem; }

/* Referans görselin dört düğmesi eşit kutularda ve yazıları tek satırda:
   "Objenin fotoğrafını yükle" ikiye bölünüp düğmeyi uzatıyordu. */
.mp-alt-panel [data-bolum="referans"] .mp-row { flex: 1 1 100%; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .5rem; }
.mp-alt-panel [data-bolum="referans"] .mp-row .mp-btn { white-space: nowrap; }

/* Yerleşim sayfası aşağıda: liste bir sütun, seçili yüzeyin ayarları
   yanında akıyor. Liste kendi eninde kalmazsa satır satır uzayıp bütün
   paneli yutuyor. */
/* Liste kendi satırında ve sola dayalı: ekleme satırının yanında
   durunca sağa kayıyor, yeni yüzey ortada bir yerde beliriyordu. */
.mp-alt-panel .mp-list { flex: 1 1 100%; max-width: 32rem; align-content: start; }
.mp-alt-panel .mp-nesneler { flex: 1 1 100%; }
.mp-alt-panel .mp-empty { flex: 1 1 100%; margin: 0; }
/* Nesne ekleme satırı listenin üstünde dursun, yanında değil. Seçici
   daha belirgin: aşağıdaki ".mp-alt-panel .mp-row" kuralı satırları sağa
   yaslıyor, ekleme satırı onunla aşağı kayıyordu. */
/* Ekleme satırı bütün satırı kaplıyor ki liste altına düşsün; içindeki
   kutu ile düğme kendi enlerinde, sola dayalı duruyor. Satıra üst sınır
   koyunca liste yanına sıkışıyor, yeni yüzey sağda beliriyordu. */
.mp-alt-panel .mp-sub > .mp-nesne-ekle {
  flex: 1 1 100%; align-self: flex-start; order: -1;
  max-width: none; justify-content: flex-start;
}
.mp-alt-panel .mp-nesne-ekle .mp-mini-sec { flex: 0 1 16rem; }
.mp-alt-panel .mp-nesne-ekle .mp-btn { flex: 0 0 auto; }
/* Alt panelde blokların başlıkları aynı hizada başlasın. */
.mp-alt-panel > .mp-block > .mp-blok-ac { width: 100%; }

/* Birincil renk: kaydıraçlar eşit sütunlarda, hepsi aynı hizada başlıyor.
   Esnek satırda her kaydıraç kendi eninde kalıyor ve satırlar birbirini
   tutmuyordu. */
.mp-alt-panel #dereceAyar {
  display: grid; align-items: start; gap: .9rem 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.mp-alt-panel #dereceAyar .mp-kaydirici { flex: none; min-width: 0; margin: 0; }
.mp-alt-panel #dereceAyar .mp-row,
.mp-alt-panel #dereceAyar .mp-note { grid-column: 1 / -1; align-self: center; }

/* Sekme kipi: bölümün adı üstteki şeritte, kendi başlık düğmesi gizli.
   Seçili olmayan bölüm hiç çizilmiyor, panel tek bölüm kadar yer tutuyor. */
.mp-alt-sekmeler { flex: 1 1 100%; margin-bottom: .2rem; }
body.mp-alt-sekmeli .mp-alt-panel > .mp-block > .mp-blok-ac { display: none; }
body.mp-alt-sekmeli .mp-alt-panel > .mp-block.mp-sekme-disi { display: none; }
body.mp-alt-sekmeli .mp-alt-panel > .mp-block { flex: 1 1 100%; }

/* Yalnız seçmelik liste: renk, ses ve takip sayfalarında yüzey eklenmiyor,
   sıralanmıyor, silinmiyor. Orada liste "hangi yüzey" sorusunun cevabı;
   yüzeyin kendisi Yerleşim sayfasında kuruluyor. */
.mp-yalniz-sec .mp-nesne-ekle,
.mp-yalniz-sec .mp-list .mp-araclar,
.mp-yalniz-sec .mp-list .mp-tut { display: none; }
.mp-yalniz-sec .mp-list li { grid-template-columns: auto minmax(0, 1fr) auto; }
.mp-alt-panel .mp-color-row { max-width: 22rem; }
.mp-alt-panel .mp-ana-baslik { width: 100%; }
/* Alttaki panel açıkken çizelge şeridi yerini ona bırakıyor */
body.mp-alt-acik .mp-cizelge,
body.mp-alt-acik .mp-cizelge-tutamac { display: none; }

/* Sahne sayfasında çizelgeye daha çok yer: işin merkezi orası */
body[data-sayfa="sahne"] .mp-cizelge-govde { max-height: 60dvh; }
body[data-sayfa="sahne"] .mp-cizelge-parca-satir { min-height: 110px; }

/* ------------------------------------------- eğri ve kapsam ------------ */
.mp-egri { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.mp-egri-tuval {
  display: block;
  border-radius: 10px;
  border: 1px solid var(--line, #35191a);
  cursor: crosshair;
  touch-action: none;
}
.mp-kapsam-tuval {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--line, #35191a);
  background: #0b0304;
}

/* --------------------------------------------------- sekme şeridi ------ */
/* Uzun panelleri bölmek için: başlıklar sekme oluyor, aynı anda bir grup
   görünüyor. */
.mp-sekme-serit {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin: .2rem 0 .8rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--line, #35191a);
}
.mp-sekme {
  padding: .3rem .7rem;
  border: 1px solid transparent;
  border-radius: 7px;
  background: none;
  color: var(--muted, #b09a94);
  font-family: var(--mono, monospace);
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.mp-sekme:hover { color: var(--cream, #ffebde); background: rgba(255, 255, 255, .05); }
.mp-sekme:focus-visible { outline: 2px solid var(--red, #dd1e1e); outline-offset: -2px; }
.mp-sekme[aria-selected="true"] {
  color: #fff;
  background: var(--ink-3, #1d0c0d);
  border-color: var(--red, #dd1e1e);
}
.mp-sekme-govde[hidden] { display: none; }

/* Dar ekranda içeriği panelde olan sayfalarda (renk, tepki, MIDI, ışık)
   sahne küçülüyor, panel büyüyor: sayfanın kendi işi görünsün. */
@media (max-width: 1024px) {
  body.mp-icerik-sayfa .mp-stage { min-height: 24dvh; }
  body.mp-icerik-sayfa .mp-panel:not(.mp-panel-sol) { max-height: 62dvh; }
}

/* Çizelge gövdesi sayfaya göre: Sahne sayfası dışında ekranı yemesin */
.mp-cizelge-govde { max-height: 32dvh; }
body[data-sayfa="sahne"] .mp-cizelge-govde { max-height: 58dvh; }

/* ---------------------------------- alttaki panelde yatay yerleşim ----- */
/* Aşağıda yer bol: ayarlar tek bir dar sütuna dizilmek yerine yan yana
   akıyor. Işık kurulumunda voxel ızgarası ve LED şeritleri kart kart
   duruyor, kartın içindeki alanlar da yan yana. */
.mp-alt-panel .mp-sekme-govde,
.mp-alt-panel .mp-sub {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem 1.4rem;
  align-items: flex-start;
}
.mp-alt-panel .mp-field,
.mp-alt-panel .mp-onay,
.mp-alt-panel .mp-kaydirici { flex: 0 1 14rem; min-width: 11rem; }
/* Etiketli kutunun yanındaki düğme, kutunun değil etiketinin hizasında
   duruyordu ("Yerel köprüye bağlan", "Mikrofonu aç"). Düğme satırları
   satırın alt kenarına oturuyor; kutunun alt boşluğu da kalkıyor, yoksa
   düğme o boşluk kadar aşağı kayıyor. Aradaki açıklığı gap veriyor. */
.mp-alt-panel .mp-row { flex: 0 1 auto; align-self: flex-end; margin-bottom: 0; }
.mp-alt-panel .mp-field { margin-bottom: 0; }
.mp-alt-panel .mp-note,
.mp-alt-panel .mp-uyari,
.mp-alt-panel .mp-ana-baslik,
.mp-alt-panel .mp-alt-baslik,
.mp-alt-panel .mp-sekme-serit { flex: 1 1 100%; }
/* Kart bütün satırı alıyor: 52rem'de kalınca geniş ekranda sağ tarafta
   bir ekran boyu boşluk kalıyor, ayarlar da üç satıra bölünüyordu. Tam
   genişlikte ızgara ölçüleri ile kaydıraçlar aynı satırda duruyor. */
.mp-alt-panel .mp-voxel-blok,
.mp-alt-panel .mp-sahne {
  flex: 1 1 100%;
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: flex-start;
}
/* Alanlar satırı paylaşıyor: eşit pay alıp gerektiğinde daralıyorlar,
   böylece derinlik kaydıracı da aynı satırda kalıyor. İçinde birden çok
   kutu olan alanlar (ızgara ölçüsü, başlangıç kanalı) biraz daha geniş. */
/* Ölçü sarmalama kararını veriyor: tarayıcı satıra kaç öğe sığacağını
   flex-basis'e bakarak seçiyor, min-width'e değil. Taban dar tutuldu ki
   1280 piksellik ekranda derinlik de aynı satırda kalsın; yer varsa
   öğeler büyüyüp satırı dolduruyor. */
.mp-alt-panel .mp-voxel-blok .mp-field,
.mp-alt-panel .mp-sahne .mp-field { flex: 1 1 6rem; min-width: 5rem; }
.mp-alt-panel .mp-voxel-blok .mp-field:has(.mp-row),
.mp-alt-panel .mp-sahne .mp-field:has(.mp-row) { flex: 1.4 1 8.5rem; min-width: 7rem; }
/* Ad kutusu bütün satırı yiyordu: on kadar harf görünsün yeter, düzenlerken
   içinde kayıyor. */
.mp-alt-panel .mp-voxel-blok .mp-ad,
.mp-alt-panel .mp-sahne .mp-ad,
.mp-alt-panel .mp-voxel-blok .mp-sahne-ad,
.mp-alt-panel .mp-sahne .mp-sahne-ad { flex: 0 1 6.5rem; min-width: 4.5rem; }
.mp-alt-panel .mp-voxel-blok .mp-row,
.mp-alt-panel .mp-sahne .mp-row { flex: 0 1 auto; }

/* --------------------------------- çizelge yalnız kendi sayfasında ----- */
/* Zaman çizelgesi her sayfanın altında duruyordu ve sahneyi yukarı
   itiyordu; renk sayfası gibi kendi sayfası var, yalnız orada açılıyor. */
/* Gizlemeyi tersten yazıyoruz: çizelgeyi kendi sayfası dışında
   kapatıyoruz. Böyle olunca çizelgenin boy ölçüsünü, tutamacını ve yan
   çevrilmiş telefondaki kuralları yeniden kurmak gerekmiyor; kendi
   sayfasında her şey eskisi gibi çalışıyor. */
body:not([data-sayfa="sahne"]) .mp-cizelge,
body:not([data-sayfa="sahne"]) .mp-cizelge-tutamac { display: none; }

/* Yakınlaştırma denetimi sayfa çubuğunun solunda, sekmeler ortada.
   Çubuk zaten position: fixed, yani mutlak konumlu çocuk ona göre
   yerleşiyor; buraya position: relative yazmak çubuğu ızgaranın içine
   düşürüp daraltıyordu. */
@media (min-width: 1025px) {
  .mp-sayfalar .mp-gorus-arac {
    position: absolute;
    left: .6rem; top: 50%;
    transform: translateY(-50%);
  }
}
.mp-sayfalar .mp-gorus-arac { opacity: 1; }
.mp-sayfalar .mp-gorus-dugme, .mp-sayfalar .mp-gorus-yuzde { min-height: 1.6rem; }

/* Dar ekranda çubuk yana kayıyor: denetim akışın başında dursa sekmeler
   ekranın dışında kalıyordu (390 pikselde hepsi görünmez oluyor). Burada
   daha derli toplu ve sol kenara yapışık duruyor; sekmeler altından
   kayıp geçiyor, denetim her zaman elin altında. */
@media (max-width: 1024px) {
  .mp-sayfalar .mp-gorus-arac {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--ink-2, #140708);
  }
  .mp-sayfalar .mp-gorus-dugme,
  .mp-sayfalar .mp-gorus-yuzde { padding: .2rem .38rem; font-size: .62rem; }
}

/* ------------------------------------------------ AudioReactive öbekleri -- */
/* Ses bölümü üç öbek: kaynak, ölçüm, seçili yüzey. Alt panelde yan yana
   duruyorlar, dar panelde alt alta geçiyorlar. Voxel ve şerit
   ayarlarındaki düzenin aynısı. */
.mp-ses-blok {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  min-width: 0;
}
.mp-alt-panel .mp-ses-blok {
  flex: 1 1 18rem;
  max-width: 30rem;
  flex-direction: row;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: flex-start;
}
.mp-alt-panel .mp-ses-blok .mp-field,
.mp-alt-panel .mp-ses-blok .mp-onay,
.mp-alt-panel .mp-ses-blok .mp-kaydirici { flex: 0 1 12rem; min-width: 9rem; }
.mp-alt-panel .mp-ses-blok .mp-row { flex: 0 1 auto; }
.mp-alt-panel .mp-ses-blok .mp-spektrum { flex: 1 1 100%; }

/* ------------------------------------------------ renk sayfası yerleşimi -- */
/* Palet ile karşıtlık çemberlerin yanındaki sütunda duruyor. Alt satıra
   koyunca çemberlerin sağında bir ekran boyu boşluk kalıyor, altta da
   ikinci bir satır açılıyordu. */
.mp-renk-yan {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-width: 0;
}
.mp-renk-sol {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-width: 0;
}
.mp-alt-panel [data-bolum="renk"] > .mp-sub { align-items: flex-start; }
.mp-alt-panel .mp-renk-sol { flex: 1 1 32rem; }
/* Sütunun içinde ana eksen dikey: alt paneldeki "flex: 0 1 14rem" ölçüsü
   genişlik değil yükseklik oluyor ve karşıtlık kaydıracı 224 piksel boyunda
   bir kutuya dönüşüyordu. Sütundaki çocuklar kendi boylarında dursun. */
.mp-alt-panel .mp-renk-sol > * { flex: 0 0 auto; }
.mp-alt-panel .mp-renk-sol .mp-cark-sira { margin: 0; }
.mp-alt-panel .mp-renk-sol .mp-field { max-width: 26rem; min-width: 0; margin-bottom: 0; }
.mp-alt-panel .mp-renk-yan { flex: 1 1 15rem; max-width: 26rem; }
.mp-alt-panel .mp-renk-yan .mp-color-row { max-width: none; }
.mp-alt-panel .mp-renk-yan .mp-kaydirici { flex: 1 1 auto; min-width: 0; }

/* AudioReactive: denetimler tek hizada dursun. Kaynak kutusunun üstünde
   etiketi var, düğmenin yok; üstten hizalayınca düğme etiketin yanına
   çıkıyor ve satır kaymış görünüyordu. */
.mp-alt-panel .mp-ses-blok .mp-spektrum { align-self: stretch; }

/* ------------------------------------------- alttaki panelin tutamacı -- */
/* Zaman çizelgesi kenarından yükseltilebiliyordu, öteki sayfaların alt
   paneli yükseltilemiyordu. Aynı tutamaç: alt panel açıkken görünüyor,
   çift tıklayınca kendi boyuna dönüyor. */
.mp-alt-tutamac {
  grid-column: 1 / -1; grid-row: 3;
  align-self: end;
  height: 9px;
  margin-bottom: -4px;
  z-index: 7;
  cursor: row-resize;
  position: relative;
}
.mp-alt-tutamac[hidden] { display: none; }
.mp-alt-tutamac::after {
  content: '';
  position: absolute; inset: auto 0 4px 0;
  height: 1px;
  background: transparent;
  transition: background .12s ease;
}
.mp-alt-tutamac:hover::after,
.mp-alt-tutamac.tutuluyor::after,
.mp-alt-tutamac:focus-visible::after { background: var(--red, #dd1e1e); }
.mp-alt-tutamac:focus-visible { outline: none; }
/* Dokunmatikte parmak için daha geniş bir şerit, çizelgeninki gibi. */
@media (pointer: coarse) {
  .mp-alt-tutamac { height: 22px; margin-bottom: -11px; }
  .mp-alt-tutamac::after { inset: auto 0 11px 0; }
}

/* ----------------------------------------------------------- çizim sayfası -- */
/* Üç öbek yan yana: tuval, fırça, katmanlar. Öteki alt panel sayfalarıyla
   aynı düzen. */
.mp-ciz-blok {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-width: 0;
}
/* Dört öbek yan yana: tuval, fırça, renk, katmanlar. Sağda boşluk
   kalmasın diye hepsi payını alıyor, tuval en geniş. */
.mp-alt-panel .mp-ciz-blok { flex: 1 1 12rem; max-width: 22rem; }
.mp-alt-panel .mp-ciz-blok:first-child { flex: 1.6 1 20rem; max-width: 34rem; }

/* Öbeğin içi dikey; alt paneldeki "düğme satırı sağa yaslansın" kuralı
   burada düğmeyi sağa itip kaydırıyordu. */
/* Sütunun içinde ana eksen dikey: alt paneldeki "flex: 0 1 14rem" ölçüsü
   genişlik değil yükseklik oluyor ve kaydıraçlar 224 piksellik kutulara
   dönüşüp aralarında boşluk bırakıyordu. */
.mp-alt-panel .mp-ciz-blok > * { flex: 0 0 auto; }
.mp-ciz-blok .mp-row,
.mp-ciz-blok .mp-field,
.mp-ciz-blok .mp-alt-baslik { align-self: stretch; margin-bottom: 0; }

/* Hedef listesi ile "Fırçayı aç" yan yana: ikisi de tek satırda başlıyor,
   altında tuval bütün genişliği alıyor. */
.mp-ciz-ust { display: flex; align-items: center; gap: .5rem; }
.mp-ciz-ust > .mp-field { flex: 1 1 10rem; min-width: 0; margin-bottom: 0; }
.mp-ciz-ust > .mp-btn { flex: 1 1 8rem; }

/* Kod yazım alanı: tek satırlık zincir uzayabildiği için sarmalı ve geniş.
   Tek aralıklı yazı tipi, sayıları hizalı tutuyor. */
.mp-kod-blok { flex: 2 1 26rem; max-width: 46rem; }
.mp-kod-yazi {
  width: 100%; min-height: 7rem; resize: vertical;
  padding: .6rem .7rem; border-radius: 10px;
  border: 1px solid var(--line, #35191a);
  background: var(--ink-3, #1d0c0d);
  color: var(--cream, #ffebde);
  font-family: var(--mono, monospace); font-size: .78rem; line-height: 1.5;
}
.mp-kod-yazi:focus-visible { outline: 2px solid var(--red, #dd1e1e); outline-offset: -2px; }
.mp-kod-durum { margin: 0; min-height: 1.2em; }
.mp-kod-liste { margin: 0 0 .3rem; line-height: 1.6; }

/* Simge düğmeleri: silgi, geri al, temizle. Kare dursunlar ki simge
   ortada kalsın; adları ipucunda ve ekran okuyucuda. */
.mp-ciz-sim { flex: 0 0 auto; width: 2.6rem; min-height: 2.4rem; padding: .3rem;
              font-size: 1rem; line-height: 1; text-align: center; }
.mp-ciz-blok .mp-genis { width: 100%; }

/* Renk kutucukları: kare, eşit, sıkı bir ızgara. */
/* Renkler tek satırda, küçük kareler: on tane iri kutu paneli ikiye
   bölüyordu. Kendi rengin kutusu da aynı sıranın sonunda duruyor, ayrı
   bir satır kaplamıyor. */
.mp-ciz-renkler {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  align-items: center;
}
.mp-ciz-renk {
  width: 1.35rem; height: 1.35rem;
  flex: 0 0 auto;
  border: 1px solid var(--line, #35191a);
  border-radius: 6px;
  cursor: pointer;
}
.mp-ciz-renk.sec { border-color: var(--cream, #ffebde); box-shadow: 0 0 0 1px var(--red, #dd1e1e); }
.mp-ciz-renk.sec { border-color: var(--cream, #ffebde); border-width: 2px; }
.mp-ciz-kod {
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border: 1px solid var(--line, #35191a);
  border-radius: 8px;
  background: none;
  cursor: pointer;
}

/* Çizimin düz hali: panelde de çizilebiliyor. */
.mp-ciz-tuval {
  width: 100%;
  max-width: 30rem;
  /* Yükseklik sınırı: tuval büyüyünce katman şeridi panelin altına
     düşüyordu, aşağı kaydırmadan görünmesi gerek. */
  max-height: 10rem;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line, #35191a);
  border-radius: 10px;
  background: var(--ink, #0b0304);
  touch-action: none;
  cursor: crosshair;
}

/* Katmanlar yan yana: alt alta uzadıkça panel büyüyordu, kurgu
   programlarındaki şerit gibi yatay duruyorlar. */
/* Alttaki açıklama satırı en sona: tam genişlik aldığı için öbeklerin
   arasında kalınca sonrakileri alt satıra itiyordu. */
.mp-alt-panel #cizimAyar > .mp-note,
.mp-alt-panel #kodAyar > .mp-note { order: 9; }

/* Sıra: tuval · katmanlar · araçlar. Katmanlar tuvalin hemen yanında,
   araçlar (fırça ve renk) sağda toplanıyor. */
/* Alt panel ikiye bölünüyor: solda çizim alanı, sağda araç şeridi ve
   katmanlar. Kurgu programlarındaki tuval/denetçi ayrımı. */
/* Sol yarı tam olarak tuval kadar: daha geniş olunca sağdaki şerit
   tuvalin bittiği yerden değil, boşluğun ardından başlıyordu. */
.mp-alt-panel #cizimAyar > .mp-ciz-blok:first-child { flex: 0 1 30rem; max-width: 30rem; }
.mp-alt-panel .mp-ciz-blok.mp-sag-blok { flex: 1 1 18rem; min-width: 0; max-width: none; }
/* Fırça düğmesi tuş gibi kısa; satırı kaplamıyor. */
.mp-alt-panel .mp-ciz-ust > .mp-btn { flex: 0 0 auto; }

/* Araç şeridi: fırça simgesi, kalınlık, simgeler ve renkler tek satırda,
   katmanların üstünde. */
.mp-arac-serit { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.mp-alt-panel .mp-arac-serit > * { flex: 0 0 auto; }
.mp-arac-kalin { flex: 0 1 7rem !important; min-width: 5rem; }
.mp-arac-serit .mp-ciz-dugmeler { display: flex; gap: .25rem; }
.mp-arac-serit .mp-ciz-renkler { margin-left: .3rem; }

/* Fırça listesi düğmenin altında açılıyor; kapalıyken hiç yer kaplamıyor. */
.mp-firca-kutu { position: relative; }
.mp-firca-liste {
  display: none;
  /* Ekrana göre konumlanıyor: alt panelin taşma sınırı içinde kalsaydı
     listenin üstü kesiliyordu. */
  position: fixed; z-index: 60;
  width: 22rem; max-width: 60vw;
  padding: .4rem; gap: .25rem;
  grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr));
  background: var(--ink-2, #140708);
  border: 1px solid var(--line, #35191a);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.mp-firca-kutu.acik .mp-firca-liste { display: grid; }
.mp-firca-liste .mp-btn { font-size: .66rem; padding: .3rem .35rem; min-height: 1.9rem; }
/* Katman şeridi yanda dar: kartlar alt alta ama küçük, kurgu
   programlarındaki katman listesi gibi. */
.mp-ciz-katmanlar { display: flex; flex-wrap: wrap; gap: .25rem; }
.mp-kat-blok { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
/* Hareket ayarları yan yana: tür ile kip aynı satırda, kaydıraçlar
   onların altında eşit paylarla akıyor. */
.mp-hareket-satir { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: flex-start; }
.mp-alt-panel .mp-hareket-satir > *,
.mp-alt-panel .mp-hareket-satir > .mp-field,
.mp-alt-panel .mp-hareket-satir > .mp-kaydirici {
  flex: 1 1 11rem; min-width: 8rem; max-width: 18rem; margin: 0; align-self: flex-start;
}
.mp-kat-blok .mp-ciz-katman { flex: 0 1 auto; }
.mp-alt-panel .mp-kat-blok > * { flex: 0 0 auto; align-self: stretch; }
.mp-ciz-katman {
  display: flex;
  align-items: center;
  gap: .15rem;
  flex: 0 1 auto;
  padding: .15rem .25rem;
  border: 1px solid var(--line, #35191a);
  border-radius: 8px;
}
.mp-ciz-katman.sec { border-color: var(--red, #dd1e1e); background: var(--ink-3, #1d0c0d); }
.mp-ciz-ad {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 9rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
  padding: .2rem .3rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text, #f3e7e2);
  font-family: inherit;
  font-size: .8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

/* Fırça açıkken sahnenin imleci artı: nereye çizileceği belli olsun. */
body.mp-cizim-kipi .mp-overlay { cursor: crosshair; }
body.mp-hareket-kipi .mp-overlay { cursor: grab; }

/* Etiketsiz alan: kaynak seçicisinin üstünde "KAYNAK" yazmıyor artık,
   "Seçili yüzey" başlığı zaten onu söylüyor. */
.mp-field-yalin { gap: 0; }

/* Fırça düğmeleri eşit paylarla yan yana */
.mp-ciz-dugmeler { display: flex; gap: .4rem; }
.mp-ciz-dugmeler .mp-btn { flex: 1 1 0; min-width: 0; }