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

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

.mp-app {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 360px);
  /* üst şerit / sahne + panel / zaman çizelgesi */
  grid-template-rows: auto 1fr auto;
  height: 100dvh;
}

/* ------------------------------------------------------------- üst şerit -- */
.mp-topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  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;
  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; }

/* --- 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 */
  grid-template-columns: auto auto minmax(0, 10.5rem) 1fr 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-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 --- */
.mp-row { display: flex; 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;
  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; }

/* Telefon kumandası: QR ile adres yan yana */
.mp-kumanda {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: .6rem;
  flex-wrap: wrap;
}
.mp-kumanda canvas {
  width: 176px; height: 176px;
  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) {
  .mp-app { grid-template-columns: 1fr minmax(260px, 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 minmax(360px, 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; }
  .mp-panel { grid-column: 1; grid-row: 4; }
  .mp-cizelge { 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; }
}

@media (max-width: 900px) and (orientation: landscape) {
  .mp-app { grid-template-columns: 1fr minmax(260px, 40%); grid-template-rows: auto 1fr; }
  .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 {
  margin: 1.4rem 0 .5rem;
  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;
  max-width: 92%;
  padding: .5rem .8rem;
  border-radius: 999px;
  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; }
  /* 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-top: 1.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; }

/* İ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 {
  position: absolute;
  left: .6rem; bottom: .6rem;
  z-index: 5;
  display: flex;
  align-items: stretch;
  gap: 1px;
  border: 1px solid var(--line, #35191a);
  border-radius: 8px;
  overflow: hidden;
  background: var(--ink-3, #1d0c0d);
  opacity: .82;
}
.mp-gorus-arac:hover { opacity: 1; }
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; }
}