/* ============================================================
 * media-editor.css — medya editörü (features/media-editor)
 *
 * CSS_GOLDEN_RULE: her öğe TEK `me-` kimlik sınıfı taşır, her kimliğin
 * TEK bloğu vardır, ortaklık yalnız aşağıdaki var reçetesindedir.
 *
 * BİLİNÇLİ AYKIRI — CAM YOK. Projenin geri kalanı buzlu cam üstüne
 * kurulur; editör kromu DÜZ ve NÖTR koyudur. İki sebep:
 *   1) Renk doğruluğu: kullanıcının seçtiği fırça rengi, camdan sızan
 *      mor vurgunun altında olduğundan başka görünürdü (lightbox'ın
 *      "medya nötr siyah ister" istisnasının aynısı, POPUPS.md §3).
 *   2) K10: panel giriş animasyonu opacity oynatır; cam taşıyan her
 *      çocuk o ağaçta ölür. Blur hiç kullanılmayınca sorun da doğmaz.
 * ============================================================ */

:root {
  --me-bg: #0b0b11;                 /* tuval zemini (nötr) */
  --me-chrome: #14141d;             /* çubuk zemini */
  --me-chrome-2: #1e1e2a;           /* çubuk üstü öğe */
  --me-fg: #f2f2f7;                 /* kroma yazısı */
  --me-fg-2: rgba(242, 242, 247, .62);
  /* --me-ink KÖKTE TANIMLI DEĞİLDİR: öğe başına inline beslenen İÇERİK
     rengidir (fırça rengi, yazı rengi). Kroma rengiyle karışmasın. */
  --me-btn: 40px;                   /* yuvarlak kroma tuşu */
  --me-thumb: 54px;                 /* film şeridi karesi */
  --me-pad: 12px;
  --me-crop-line: rgba(255, 255, 255, .92);
  --me-crop-dim: rgba(0, 0, 0, .58);
}

/* ── popup yüzeyi (POPUPS.md: kind=fullscreen, kendi @media'sı yok) ── */

.pp[data-pp="medit"] {
  --pp-pad: 0;
  --pp-backdrop: rgba(0, 0, 0, .92);
  --pp-blur: none;
  --pp-panel-bg: var(--me-bg);
  --pp-panel-img: none;
}
@media (min-width: 720px) {
  .pp[data-pp="medit"] {
    --pp-pad: 24px;
    --pp-w: min(1100px, 94vw);
    --pp-h: min(880px, 90svh);
    --pp-max-h: 90svh;
  }
}

/* ── iskelet ── */

.me {
  position: relative;               /* yazı yüzeyinin (.me-text) çıpası */
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  height: 100%;
  min-height: 0;
  color: var(--me-fg);
  background: var(--me-bg);
}

.me-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: calc(var(--safe-top) + 8px) var(--me-pad) 8px;
  background: var(--me-chrome);
}

.me-back {
  width: var(--me-btn); height: var(--me-btn);
  flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  color: var(--me-fg);
  background: transparent;
  transition: background var(--tr-fast);
}
.me-back:hover { background: var(--me-chrome-2); }

.me-count {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--me-fg-2);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.me-step {
  width: var(--me-btn); height: var(--me-btn);
  flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  color: var(--me-fg);
  background: transparent;
  transition: background var(--tr-fast), opacity var(--tr-fast);
}
.me-step:hover { background: var(--me-chrome-2); }
.me-step:disabled { opacity: .3; pointer-events: none; }

.me-done {
  flex: 0 0 auto;
  height: var(--me-btn);
  padding: 0 18px;
  border-radius: var(--r-full);
  font-size: 14px; font-weight: 700;
  color: var(--on-accent);
  background: var(--accent-grad);
}

/* ── tuval ── */

.me-stage {
  position: relative;               /* loader.js katmanının kabı */
  min-height: 0;
  overflow: hidden;
  background: var(--me-bg);
}

.me-canvasbox {
  position: absolute;
  inset: var(--me-pad);
  display: grid;
  place-items: center;
}

.me-frame {
  position: relative;               /* kırp katmanının çıpası */
  width: var(--me-fw, 0);
  height: var(--me-fh, 0);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
  touch-action: none;               /* çizim/kırp jestini tarayıcı çalmasın */
}

.me-canvas { display: block; }

.me-err {
  font-size: 13px;
  color: var(--me-fg-2);
  text-align: center;
  padding: 24px;
}

/* ── kırp katmanı ── */

.me-crop {
  position: absolute;
  inset: 0;
  z-index: 2;
  touch-action: none;
}
.me-crop[hidden] { display: none; }

.me-crop-box {
  position: absolute;
  left: var(--me-cx, 0); top: var(--me-cy, 0);
  width: var(--me-cw, 0); height: var(--me-ch, 0);
  box-shadow: 0 0 0 100vmax var(--me-crop-dim);
  outline: 1px solid var(--me-crop-line);
  cursor: move;
}

.me-crop-grid {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tr-fast);
  background:
    linear-gradient(to right, transparent calc(33.333% - .5px), rgba(255, 255, 255, .5) calc(33.333% - .5px), rgba(255, 255, 255, .5) calc(33.333% + .5px), transparent calc(33.333% + .5px)),
    linear-gradient(to right, transparent calc(66.666% - .5px), rgba(255, 255, 255, .5) calc(66.666% - .5px), rgba(255, 255, 255, .5) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
    linear-gradient(to bottom, transparent calc(33.333% - .5px), rgba(255, 255, 255, .5) calc(33.333% - .5px), rgba(255, 255, 255, .5) calc(33.333% + .5px), transparent calc(33.333% + .5px)),
    linear-gradient(to bottom, transparent calc(66.666% - .5px), rgba(255, 255, 255, .5) calc(66.666% - .5px), rgba(255, 255, 255, .5) calc(66.666% + .5px), transparent calc(66.666% + .5px));
}
.me-crop.is-drag .me-crop-grid { opacity: 1; }

/* Tutamaç: GÖRÜNEN çizgi ince (köşede L, kenarda çubuk), DOKUNMA alanı
   ::after ile her yöne 14px büyütülür — parmak ucu 4px'lik çizgiyi
   yakalayamaz, ölçülmüş dokunmatik asgarisi ~44px. */
.me-crop-h {
  position: absolute;
  background: var(--me-crop-line);
}
.me-crop-h::after { content: ''; position: absolute; inset: -14px; }

.me-crop-h[data-h="nw"] { left: -1px; top: -1px; width: 20px; height: 20px; background: none; border-left: 3px solid var(--me-crop-line); border-top: 3px solid var(--me-crop-line); cursor: nwse-resize; }
.me-crop-h[data-h="ne"] { right: -1px; top: -1px; width: 20px; height: 20px; background: none; border-right: 3px solid var(--me-crop-line); border-top: 3px solid var(--me-crop-line); cursor: nesw-resize; }
.me-crop-h[data-h="sw"] { left: -1px; bottom: -1px; width: 20px; height: 20px; background: none; border-left: 3px solid var(--me-crop-line); border-bottom: 3px solid var(--me-crop-line); cursor: nesw-resize; }
.me-crop-h[data-h="se"] { right: -1px; bottom: -1px; width: 20px; height: 20px; background: none; border-right: 3px solid var(--me-crop-line); border-bottom: 3px solid var(--me-crop-line); cursor: nwse-resize; }
.me-crop-h[data-h="n"] { left: 50%; top: -1px; width: 30px; height: 3px; margin-left: -15px; cursor: ns-resize; }
.me-crop-h[data-h="s"] { left: 50%; bottom: -1px; width: 30px; height: 3px; margin-left: -15px; cursor: ns-resize; }
.me-crop-h[data-h="w"] { top: 50%; left: -1px; width: 3px; height: 30px; margin-top: -15px; cursor: ew-resize; }
.me-crop-h[data-h="e"] { top: 50%; right: -1px; width: 3px; height: 30px; margin-top: -15px; cursor: ew-resize; }
/* oran kilitliyken kenar tutamakları simetrik açar — soluk ama çalışır */
.me-crop.is-locked .me-crop-h[data-h="n"] { opacity: .4; }
.me-crop.is-locked .me-crop-h[data-h="s"] { opacity: .4; }
.me-crop.is-locked .me-crop-h[data-h="w"] { opacity: .4; }
.me-crop.is-locked .me-crop-h[data-h="e"] { opacity: .4; }

/* ── alete özel çubuk ── */

.me-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--me-pad);
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--me-chrome);
}
.me-bar::-webkit-scrollbar { display: none; }
.me-bar[hidden] { display: none; }

/* fırça */
.me-brush {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 140px;
}

.me-brush-dot {
  width: var(--me-dot, 12px);
  height: var(--me-dot, 12px);
  flex: 0 0 auto;
  border-radius: var(--r-full);
  background: var(--me-ink, #fff);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45);
  transition: width var(--tr-fast), height var(--tr-fast);
}

.me-brush-size {
  flex: 1 1 auto;
  min-width: 0;
  height: 28px;
  accent-color: var(--accent);
  background: transparent;
}

.me-swatches {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.me-swatch {
  width: 26px; height: 26px;
  flex: 0 0 auto;
  border-radius: var(--r-full);
  background: var(--me-ink, #fff);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
  transition: transform var(--tr-fast), box-shadow var(--tr-fast);
}
.me-swatch[aria-checked="true"] { transform: scale(1.15); box-shadow: 0 0 0 2px var(--me-fg); }
.me-swatch.on { transform: scale(1.15); box-shadow: 0 0 0 2px var(--me-fg); }

/* kırp çubuğu */
.me-crop-btn {
  width: 36px; height: 36px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  color: var(--me-fg);
  background: var(--me-chrome-2);
}

.me-crop-sep {
  width: 1px; height: 22px;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, .12);
}

.me-ratio {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--r-full);
  font-size: 12px; font-weight: 700;
  color: var(--me-fg-2);
  background: var(--me-chrome-2);
  white-space: nowrap;
  transition: color var(--tr-fast), background var(--tr-fast);
}
.me-ratio.on { color: var(--on-accent); background: var(--accent-grad); }

/* ── alet seçici ── */

.me-tools {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px var(--me-pad);
  background: var(--me-chrome);
}

.me-tool {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-full);
  font-size: 13px; font-weight: 600;
  color: var(--me-fg-2);
  background: transparent;
  transition: color var(--tr-fast), background var(--tr-fast);
}
.me-tool.on { color: var(--me-fg); background: var(--me-chrome-2); }

.me-del {
  width: 36px; height: 36px;
  margin-left: 4px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  color: var(--danger);
  background: var(--danger-soft);
}
.me-del[hidden] { display: none; }

.me-cancel {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--r-full);
  font-size: 13px; font-weight: 600;
  color: var(--me-fg-2);
  background: var(--me-chrome-2);
}

.me-apply {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--r-full);
  font-size: 13px; font-weight: 700;
  color: var(--on-accent);
  background: var(--accent-grad);
}

/* ── film şeridi ── */

.me-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px var(--me-pad) calc(var(--safe-bottom) + 10px);
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--me-chrome);
}
.me-strip::-webkit-scrollbar { display: none; }
.me-strip[hidden] { display: none; }

.me-thumb {
  position: relative;               /* düzenlendi noktasının çıpası */
  width: var(--me-thumb); height: var(--me-thumb);
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  overflow: hidden;
  opacity: .55;
  transition: opacity var(--tr-fast), box-shadow var(--tr-fast);
}
.me-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.me-thumb.on { opacity: 1; box-shadow: 0 0 0 2px var(--accent); }
.me-thumb.is-edited::after {
  content: '';
  position: absolute;
  right: 4px; bottom: 4px;
  width: 8px; height: 8px;
  border-radius: var(--r-full);
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .55);
}

/* ── yazı yüzeyi ── */

.me-text {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: rgba(6, 6, 10, .9);
}
.me-text[hidden] { display: none; }

.me-text-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(var(--safe-top) + 10px) var(--me-pad) 10px;
}

.me-text-x {
  width: var(--me-btn); height: var(--me-btn);
  display: grid; place-items: center;
  border-radius: var(--r-full);
  color: var(--me-fg);
  background: transparent;
}

.me-text-align {
  width: var(--me-btn); height: var(--me-btn);
  margin-left: auto;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  color: var(--me-fg);
  background: var(--me-chrome-2);
}

.me-text-ok {
  height: var(--me-btn);
  padding: 0 18px;
  border-radius: var(--r-full);
  font-size: 14px; font-weight: 700;
  color: var(--on-accent);
  background: var(--accent-grad);
}

.me-text-in {
  /* margin:auto = dikey ortalama: alan kadar büyümez, yazdığı kadar yer
     kaplar ve sütunun ortasında durur (üst çubuk ve palet kenarda sabit). */
  flex: 0 1 auto;
  margin: auto 0;
  min-height: 0;
  max-height: 100%;
  width: 100%;
  padding: 8px var(--me-pad);
  border: 0;
  outline: none;
  resize: none;
  font-family: var(--font);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  text-align: var(--me-align, center);
  color: var(--me-ink, #fff);
  background: transparent;
  caret-color: var(--accent);
}
.me-text-in::placeholder { color: rgba(242, 242, 247, .35); font-weight: 600; }

.me-text-sw {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px var(--me-pad) calc(var(--safe-bottom) + 16px);
}