/* Quick Tools — ortak stil. Tüm araç sayfaları bunu kullanır.
   Tek dosya, build adımı yok: araç sayfası ilk boyamayı beklemeden açılsın. */

:root {
  /* Zemin — kâğıt. Işık veren beyaz değil, hafif kırık: uzun metin ve
     fotoğraf aynı sayfada dururken göz yorulmasın. */
  --bg: #fbfaf7;
  --bg-2: #f4f2ed;
  --surface: #ffffff;
  --surface-2: #f3f1ec;
  --line: #e2dfd8;
  --line-strong: #c9c5bb;

  /* Editoryal dilin taşıyıcısı çizgi: kutu değil, saç teli ayraç.
     Gölge yok — derinlik yerine boşluk ve tipografi hiyerarşisi. */
  --edge: #e2dfd8;
  --edge-w: 1px;

  /* Metin */
  --ink: #15171a;
  --ink-2: #3c4048;
  --muted: #6b7079;
  --faint: #969ba3;

  /* Vurgu — birincil eylem mürekkep siyahı, vurgu rengi teal */
  --accent: #0c7a6a;
  --accent-2: #0a6558;
  --accent-soft: #e4f3ef;
  --accent-line: #a9d9cf;

  --primary: #16181c;
  --primary-ink: #ffffff;

  /* Durum */
  --good: #0f6b41;
  --good-soft: #e6f4ec;
  --warn: #8a5a00;
  --warn-soft: #fdf3e0;
  --bad: #a3282b;
  --bad-soft: #fbeceb;

  /* Kategori renkleri — araç kartı ikonları */
  --c-gorsel: #7c4ddb;
  --c-gorsel-soft: #f0eafd;
  --c-belge: #1f66d0;
  --c-belge-soft: #e8f0fd;
  --c-kod: #0d7a4f;
  --c-kod-soft: #e6f4ed;
  --c-veri: #a8620a;
  --c-veri-soft: #fcf1e2;
  --c-medya: #c0357a;
  --c-medya-soft: #fdeaf3;

  /* Segment seçici: ray zemini ve seçili düğme */
  --seg-track: #eceeea;
  --seg-on: #ffffff;

  --radius: 4px;
  --radius-sm: 3px;
  /* Gölge yok; değişkenler duruyor ki eski kurallar sessizce nötr kalsın. */
  --shadow: none;
  --shadow-lg: none;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101114;
    --bg-2: #0b0c0e;
    --surface: #16181c;
    --surface-2: #1c1f24;
    --line: #282b31;
    --line-strong: #3b3f47;
    --edge: #282b31;

    --ink: #f1f0ec;
    --ink-2: #c6c8cc;
    --muted: #949aa4;
    --faint: #6e757f;

    --accent: #35c5ad;
    --accent-2: #55d6c0;
    --accent-soft: #14302c;
    --accent-line: #1f4b44;

    --primary: #eceef1;
    --primary-ink: #101216;

    --good: #57c98c;
    --good-soft: #14301f;
    --warn: #d9a441;
    --warn-soft: #2f2716;
    --bad: #ef8b87;
    --bad-soft: #331d1d;

    --c-gorsel: #a98cf0;
    --c-gorsel-soft: #241d38;
    --c-belge: #6ea6f5;
    --c-belge-soft: #16233a;
    --c-kod: #52c58c;
    --c-kod-soft: #142d21;
    --c-veri: #dda85a;
    --c-veri-soft: #302616;
    --c-medya: #e77bb0;
    --c-medya-soft: #331d2a;

    /* Koyu temada seçili düğme raydan daha AÇIK olmalı — ters çeviriyoruz. */
    --seg-track: #0b0d10;
    --seg-on: #262b33;

    --shadow: none;
    --shadow-lg: none;
  }
}

* { box-sizing: border-box; }

/* `hidden` özniteliği her zaman kazanmalı. Tarayıcının varsayılan
   `[hidden] { display: none }` kuralı en düşük öncelikte; aşağıdaki
   `.field { display: flex }` gibi sınıflar onu eziyor ve `el.hidden = true`
   yazan JS sessizce etkisiz kalıyordu. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { letter-spacing: -.028em; font-weight: 800; }
/* Küçük büyük-harf etiketler bu dilin ikinci sesi: geniş harf aralığı. */
.eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); }

code, kbd, .mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .92em;
}

/* Üç genişlik, üç iş: tezgâh (ana sayfa), araç sayfası, düz metin.
   Sayfa hangisi olduğuna kalıbı seçerek karar verir. */
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 26px; }
.wrap.wide { max-width: 1280px; }
.wrap.narrow { max-width: 780px; }
@media (max-width: 640px) { .wrap { padding: 0 18px; } }

.muted { color: var(--muted); }
.tnum { font-variant-numeric: tabular-nums; }

/* ============================================================ üst bar */

.topbar {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky; top: 0; z-index: 20;
}
.topbar .wrap { display: flex; align-items: center; gap: 16px; height: 58px; }

.brand {
  font-weight: 700; letter-spacing: -.03em; color: var(--ink);
  display: flex; align-items: center; gap: 9px; font-size: 16px;
}
.brand:hover { text-decoration: none; }
.brand { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; }
.brand .dot {
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--accent); display: inline-block;
}

.topbar nav { margin-left: auto; display: flex; gap: 20px; font-size: 14px; }
.topbar nav a { color: var(--muted); }
.topbar nav a:hover { color: var(--ink); text-decoration: none; }
/* Tezgâhtan tanıtıma dönüş her araçta aynı yerde: üst barda. Panelin içinde
   ayrı bir satır tutmuyor — orada yer fotoğrafın hakkı. */
.topbar nav .cik { display: none; cursor: pointer; }
body.calisma .topbar nav .cik { display: inline; }

/* ============================================================ giriş */

/* Editoryal dil: sayfayı kutular değil, ızgara ve tipografi taşır. Başlık
   iri ve sola dayalı, ayraçlar saç teli, gölge yok. Fotoğraf araçlarında
   bunun pratik faydası şu: sayfadaki en koyu, en dikkat çeken nesne her
   zaman kullanıcının fotoğrafı olur — arayüz onunla yarışmaz. */
.hero-band { border-bottom: 1px solid var(--line); background: var(--bg); }
.hero { padding: 68px 0 44px; }
.hero h1 {
  margin: 0 0 14px; font-weight: 900;
  font-size: clamp(36px, 6vw, 62px); line-height: .98; letter-spacing: -.045em;
  max-width: 14ch;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lede { margin: 0; color: var(--muted); font-size: 17px; max-width: 46ch; }

/* Arama birincil eylem: araç sayısı arttıkça listeyi taramak değil, adını
   yazmak daha hızlı. Kutu değil, altı çizili bir satır gibi durur. */
.search { position: relative; max-width: 520px; margin: 30px 0 0; }
.search input {
  width: 100%; font: inherit; font-size: 16px;
  padding: 13px 52px 13px 38px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  transition: border-color .15s;
}
.search input:focus { outline: none; border-color: var(--ink); }
.search input::placeholder { color: var(--faint); }
.search .ico,
.search .kbd { position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none; }
.search .ico { left: 14px; color: var(--faint); font-size: 15px; line-height: 1; }
.search .kbd {
  right: 12px; font-size: 11px; font-weight: 600; color: var(--faint);
  border: 1px solid var(--line); border-radius: 4px; padding: 2px 7px;
}
@media (max-width: 560px) { .search .kbd { display: none; } }

.pill-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.pill { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.pill.ok { color: var(--ink-2); }
.pill.warn { color: var(--warn); }

/* ============================================================ araç ızgarası */

.tools { padding: 10px 0 70px; }

/* Kategori başlığı: büyük harf etiket, sayaç, sonra sayfayı boydan boya
   kesen çizgi. Bölümü ayıran şey kutu değil, bu çizgi. */
.section-head {
  display: flex; align-items: baseline; gap: 14px;
  margin: 46px 0 0; padding-bottom: 10px;
}
.section-head h2 {
  margin: 0; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .16em;
}
.section-head .count { font-size: 12px; color: var(--faint); letter-spacing: .02em; }
.section-head .rule { flex: 1; height: 1px; background: var(--ink); opacity: .85; }

.grid {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  /* Hücreler ayraçlarını komşularıyla paylaşınca son sütunun sağında bir
     çizgi fazlalık kalıyor; ızgarayı 1px taşırıp kırpıyoruz. Alt çizgi ise
     bölümü kapatsın diye ızgaranın kendisinde. */
  border-bottom: 1px solid var(--line);
  margin-right: -1px;
}
.tool-section { overflow: hidden; }

/* Kart bir kutu değil, ızgaranın bir hücresi: ayraçları komşularıyla
   paylaşır. Böylece liste bir gazete sayfası gibi okunur. */
.card {
  display: flex; flex-direction: column; padding: 22px 22px 24px;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  color: inherit; background: transparent;
  transition: background .14s;
}
.card:hover { text-decoration: none; background: var(--surface-2); }
.card:hover h3 { text-decoration: underline; text-underline-offset: 3px; }

.card .icon {
  font-size: 20px; width: auto; height: auto; margin-bottom: 16px;
  color: var(--ink); background: none; border: 0;
  display: block; line-height: 1;
}
.card h3 { margin: 0 0 6px; font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; }
.card p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }

/* Kartta tek rozet var, o da işin nerede yapıldığı — tek gerçek ayrım bu. */
.card .tags { margin-top: auto; padding-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.card .tags span {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); background: none; padding: 0; border: 0;
}
.card .tags .local { color: var(--accent); }

/* Kategori rengi ikonun kendisinde, zeminde değil: gürültü yapmasın. */
.card[data-group="gorsel"] .icon { color: var(--c-gorsel); }
.card[data-group="belge"] .icon { color: var(--c-belge); }
.card[data-group="kod"]   .icon { color: var(--c-kod); }
.card[data-group="veri"]  .icon { color: var(--c-veri); }
.card[data-group="medya"] .icon { color: var(--c-medya); }

.card.soon { opacity: .45; pointer-events: none; }
.card.soon .icon { color: var(--faint); }

/* ============================================================ araç sayfası */

.tool-head { padding: 34px 0 20px; }
.crumb { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.crumb a { color: var(--muted); }
.tool-head h1 { margin: 0 0 10px; font-size: clamp(24px, 4vw, 32px); }
.tool-head p { margin: 0; color: var(--ink-2); max-width: 62ch; font-size: 16px; }

.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; margin-bottom: 20px;
}
.panel.flush { padding: 0; overflow: hidden; }

/* Adım göstergesi — akış tek sayfada ama adım adım ilerler */

/* Bırakma alanı */
.dropzone {
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  padding: 52px 20px; text-align: center; cursor: pointer;
  background: var(--surface); transition: background .15s, border-color .15s;
}
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone strong { font-weight: 700; }
.dropzone:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dropzone .big { font-size: 30px; margin-bottom: 10px; opacity: .55; }
.dropzone strong { display: block; margin-bottom: 4px; font-size: 15.5px; }
.dropzone small { color: var(--muted); }

/* Seçilen dosyanın künyesi */
.filecard {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.filecard .thumb {
  width: 44px; height: 44px; border-radius: 3px; flex: none;
  background: var(--surface-2); display: grid; place-items: center; overflow: hidden;
  border: 1px solid var(--line);
}
.filecard .thumb img { width: 100%; height: 100%; object-fit: cover; }
.filecard .info { min-width: 0; flex: 1; }
.filecard .info b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filecard .info span { font-size: 12.5px; color: var(--muted); }

/* Kontroller */
.controls {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line);
}
.opt-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label,
.field-label {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .13em;
}
.field .hint { font-size: 12px; color: var(--faint); }

.field select, .field input[type="text"], .field input[type="number"], textarea, .field input[type="url"] {
  font: inherit; padding: 10px 12px; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  width: 100%;
}
.field select:focus, .field input:focus, textarea:focus {
  outline: none; border-color: var(--ink);
}
textarea { font-family: inherit; resize: vertical; min-height: 120px; line-height: 1.55; }
textarea.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }

.check { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }

/* Genişlik × yükseklik: iki sayı ve aralarında bir çarpı. Tek satırda
   durmalı, yoksa "hangisi en, hangisi boy" sorusu doğuyor. */
.ikili { display: flex; align-items: center; gap: 8px; }
.ikili input { flex: 1; min-width: 0; text-align: center; font-variant-numeric: tabular-nums; }
.ikili .carpi { color: var(--faint); font-size: 13px; flex: none; }

.range-row { display: flex; align-items: center; gap: 12px; }
.range-row input[type="range"] { flex: 1; accent-color: var(--accent); }
.range-row output {
  min-width: 46px; text-align: right; font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
}

/* Segment seçici — birbirini dışlayan modlar.
   Seçili düğme her iki temada da "öne çıkmalı": açık temada zeminden daha
   parlak, koyu temada daha açık. Bu yüzden ray ve seçili renk ayrı token. */
.seg {
  display: inline-flex; background: transparent; border-radius: var(--radius);
  border: 1px solid var(--line-strong); padding: 0; gap: 0; flex-wrap: wrap; overflow: hidden;
}
.seg button {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 8px 15px; border-radius: 0; border: 0; background: transparent; color: var(--muted);
  transition: background .13s, color .13s;
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.seg button:disabled { opacity: .35; cursor: not-allowed; }

/* Düğmeler */
.btn {
  font: inherit; font-weight: 600; cursor: pointer;
  padding: 11px 22px; border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--primary); color: var(--primary-ink);
  transition: opacity .14s, background .14s;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn:hover { opacity: .86; }
.btn:active { opacity: 1; }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn.ghost:hover { background: var(--surface-2); opacity: 1; }
.btn.accent { background: var(--accent); color: #fff; }
.btn.sm { padding: 7px 13px; font-size: 13px; }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn-row .spacer { margin-left: auto; }

/* ============================================================ editör (arka plan silici) */

.editor { margin-top: 4px; }

.toolbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 8px 0; margin-bottom: 14px;
  background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
}
.tgroup { display: flex; gap: 4px; align-items: center; }
.tgroup.right { margin-left: auto; }
.tgroup + .tgroup::before {
  content: ""; width: 1px; height: 22px; background: var(--line); margin: 0 4px;
}
.tgroup.right::before { display: none; }

.tbtn {
  font: inherit; font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 7px;
  border: 1px solid transparent; background: transparent; color: var(--muted);
  transition: background .12s, color .12s, border-color .12s;
}
.tbtn:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.tbtn[aria-pressed="true"] {
  background: var(--accent-soft); color: var(--accent); border-color: transparent;
  font-weight: 600;
}
.tbtn:disabled { opacity: .35; cursor: not-allowed; }
.tbtn .ico { font-size: 15px; line-height: 1; }

#brush-opts { font-size: 12px; color: var(--muted); }
#brush-opts input[type="range"] { width: 110px; accent-color: var(--accent); }
#brush-val { min-width: 26px; font-variant-numeric: tabular-nums; }

/* Saydamlık zemini — tek yerde tanımlı, hem editörde hem sonuçta kullanılır */
.checker {
  background-image:
    linear-gradient(45deg, rgba(128,128,128,.16) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(128,128,128,.16) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(128,128,128,.16) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(128,128,128,.16) 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}

.canvas-wrap {
  position: relative; width: fit-content; max-width: 100%; margin: 0 auto;
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  background-image:
    linear-gradient(45deg, rgba(128,128,128,.16) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(128,128,128,.16) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(128,128,128,.16) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(128,128,128,.16) 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}
.canvas-wrap canvas { display: block; max-width: 100%; max-height: 62vh; width: auto; height: auto; }
.canvas-wrap #overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; touch-action: none; }
.canvas-wrap #overlay.crop, .canvas-wrap #overlay.erase-rect { cursor: crosshair; }
.canvas-wrap #overlay.brush { cursor: none; }
.canvas-wrap #original-view { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--surface-2); }

.sel-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 12px;
  background: var(--accent-soft); border-radius: 8px; font-size: 13px;
}
.sel-actions #sel-info { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.sel-actions .btn { padding: 7px 14px; font-size: 13px; }
.sel-actions .spacer { margin-left: auto; }

/* ============================================================ sonuç */

.result { display: none; }
.result.show { display: block; }

.compare { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .compare { grid-template-columns: 1fr; } }

.frame { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.frame .cap {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); padding: 9px 13px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.frame .stage {
  min-height: 220px; display: grid; place-items: center; padding: 16px;
  background-image:
    linear-gradient(45deg, rgba(128,128,128,.16) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(128,128,128,.16) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(128,128,128,.16) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(128,128,128,.16) 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}
.frame img { max-width: 100%; max-height: 420px; display: block; }

.meta-row { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin: 14px 0 16px; }
.meta-row b { color: var(--ink); font-variant-numeric: tabular-nums; }


/* ============================================================ atölye */

/* İşlem sekmeleri — aynı görsel üzerinde sırayla uygulanır. */
.op-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.op-tabs { gap: 26px; border-bottom: 1px solid var(--line); margin: 0 0 18px; }
.op-tab {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 2px; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--muted); background: none;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; cursor: pointer;
  margin-bottom: -1px;
  transition: color .13s, border-color .13s;
}
.op-tab:hover:not(:disabled) { color: var(--ink); }
.op-tab .ikon {
  width: auto; height: auto; flex: none; font-size: 14px;
  background: none; color: inherit; border: 0;
}
/* Seçili sekme rubrik gibi altından çizilir; kutu yok. */
.op-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.op-tab:disabled { opacity: .4; cursor: not-allowed; }

.op-ozet { margin: 0 0 16px; font-size: 13.5px; color: var(--muted); max-width: 62ch; }

/* Uygulanan işlemlerin zinciri: Özgün › Büyütüldü › Renklendirildi */
.zincir {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px; font-size: 12.5px;
}
.zincir .adim {
  padding: 0; font-weight: 600; letter-spacing: .04em;
  background: none; color: var(--muted); text-transform: uppercase; font-size: 11px;
}
.zincir .adim.son { color: var(--accent); }
.zincir .ok { color: var(--faint); }

/* Maske fırçası — silinecek yeri kullanıcı boyar.

   Kutunun genişliği iki sınırın küçüğü: sütun genişliği ve "yüksekliği ekranın
   %68'ini geçmesin" kuralının izin verdiği genişlik. İkincisi `--en-boy`
   (görselin en/boy oranı) ile hesaplanıyor ve o değişkeni JS koyuyor.

   Neden yükseklik değil de genişlik sınırlanıyor: `<img>` üzerinde hem genişlik
   hem max-height verilirse tarayıcı görseli EZER (object-fit: fill). O zaman
   çizim kutusu ile görüntü örtüşmez ve fırça yanlış yere düşer. Genişlikten
   sınırlayınca yükseklik orandan türüyor, kutu her zaman görselin tam üstünde
   duruyor.

   Dikey bir telefon fotoğrafı böylece sayfa genişliğine gerilip 1900 piksel
   boyunda bir tuvale dönüşmüyor; küçük bir görsel de hassas boyayabilmek için
   büyüyebiliyor. */
/* --- sahne: fotoğrafın sayfadaki tek gösterimi ---
   Fırça, sonuç ve önce/sonra karşılaştırması aynı kutunun üstünde yaşıyor.
   Aynı kareyi iki ayrı kutuda göstermek hangisinin güncel olduğunu
   belirsizleştiriyordu. */

.sahne {
  position: relative; display: block; line-height: 0; touch-action: none;
  border-radius: var(--radius); overflow: hidden; background: var(--surface-2);
  border: 1px solid var(--line);
  user-select: none; margin: 20px auto 0;
  /* Yükseklik yerine GENİŞLİK sınırlanıyor: dikey fotoğraf ekrana sığsın ama
     ezilmesin — fırça koordinatları en/boy oranına bağlı. */
  width: min(100%, calc(68vh * var(--en-boy, 1.5)));
}
/* Görselin üstünde tarayıcının yerel sürükle-bırak'ı başlarsa pointer
   yakalaması iptal oluyor ve fırça/kaydırıcı ilk hareketten sonra donuyor. */
.sahne img { display: block; width: 100%; height: auto; -webkit-user-drag: none; user-drag: none; }
.sahne:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* fırça katmanı */
.sahne canvas.maske {
  position: absolute; inset: 0; width: 100%; height: 100%; display: none;
  /* Bilerek saydam: fotoğrafın altında ne olduğu görünmeden nereyi
     boyadığına karar vermek zor. */
  opacity: .4;
  -webkit-user-drag: none; user-drag: none;
}
/* Fırçanın gerçek çapını gösteren imleç — kalınlığı gözle seçebilmek için. */
.sahne .imlec {
  position: absolute; transform: translate(-50%, -50%); pointer-events: none;
  border: 1.5px solid rgba(255, 255, 255, .9); border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .45);
}
.sahne.fircali { cursor: crosshair; }
.sahne.fircali canvas.maske { display: block; }

/* karşılaştırma katmanı */
.sahne .ust,
.sahne .kol,
.sahne .etiket { display: none; }
.sahne.kaydirmali { cursor: ew-resize; }
.sahne.kaydirmali .ust { display: block; position: absolute; inset: 0; overflow: hidden; }
.sahne.kaydirmali .ust img { position: absolute; top: 0; left: 0; width: 100%; height: auto; }
.sahne.kaydirmali .kol {
  display: block; position: absolute; top: 0; bottom: 0; width: 2px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); pointer-events: none;
}
.sahne .tut {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #111;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.sahne .etiket {
  position: absolute; bottom: 10px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #fff;
  background: rgba(0, 0, 0, .55); padding: 4px 9px; border-radius: 5px; line-height: 1.4;
}
.sahne .etiket.sol { left: 10px; }
.sahne .etiket.sag { right: 10px; }
.sahne.kaydirmali .etiket { display: block; }
.firca-arac { margin: 12px 0 4px; }

/* Anahtar–değer listesi (metadata, dosya bilgisi) */
.kv { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.kv div { display: flex; gap: 14px; padding: 9px 13px; font-size: 13.5px; }
.kv div + div { border-top: 1px solid var(--line); }
.kv dt, .kv .k { color: var(--muted); flex: none; width: 40%; max-width: 220px; margin: 0; }
.kv dd, .kv .v { margin: 0; color: var(--ink); word-break: break-word; font-variant-numeric: tabular-nums; }
.kv div.flag .v { color: var(--bad); font-weight: 600; }

/* ============================================================ araç iniş sayfası */

/* Araç sayfasının vitrini: solda ne işe yaradığı, sağda tek bir iş — dosyayı
   ver. Kullanıcı buraya bir arama sonucundan düşüyor, o yüzden ilk ekranda
   soru tek olmalı. Alt bölümler (nasıl kullanılır, SSS) aşağıda kalır; hem
   arama motoru için hem kararsız kullanıcı için oradalar, ama işe başlamak
   için oraya inmek gerekmiyor. */

.inis-hero { border-bottom: 1px solid var(--line); background: var(--bg); }
.inis-hero .ic {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center;
  padding: 44px 0 48px;
}
@media (max-width: 900px) {
  .inis-hero .ic { grid-template-columns: 1fr; gap: 28px; padding: 32px 0 36px; }
}

.inis-hero .eyebrow { display: block; margin-bottom: 14px; }
.inis-hero h1 {
  margin: 0 0 14px; font-weight: 900; letter-spacing: -.045em;
  font-size: clamp(34px, 4.6vw, 52px); line-height: 1;
}
.inis-hero .lede { margin: 0 0 18px; color: var(--muted); font-size: 17px; max-width: 42ch; }
.inis-hero .kanit { display: flex; flex-wrap: wrap; gap: 18px; font-size: 12.5px; color: var(--ink-2); }
.inis-hero .kanit span { display: inline-flex; align-items: center; gap: 7px; }
.inis-hero .kanit span::before { content: "—"; color: var(--accent); }

/* Yükleme kartı: sayfadaki tek birincil eylem. Kutu bilerek büyük —
   sürükleyip bırakmak için hedef alanı geniş olsun. */
.yukle-kart {
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); padding: 36px 26px; text-align: center;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.yukle-kart:hover, .yukle-kart.over { border-color: var(--accent); background: var(--accent-soft); }
.yukle-kart:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.yukle-kart .btn { pointer-events: none; font-size: 15px; padding: 13px 28px; }
.yukle-kart strong { display: block; margin: 14px 0 4px; font-size: 14.5px; font-weight: 600; }
.yukle-kart small { color: var(--faint); font-size: 12.5px; }

/* Örnek fotoğraf arşivimiz yok; işi anlatan şey fotoğrafın kendisi değil,
   sonucun canlandırması olsun. */
.gosterim {
  margin-top: 24px; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--surface-2);
}
/* Vitrin görseli işi anlatır, ekranı doldurmaz: geniş ekranda kutu boyuna
   uzayıp yükleme kartını aşağı itmesin diye tavan var. */
.gosterim svg { display: block; width: 100%; height: auto; max-height: 230px; }

/* İniş hâlindeyken tezgâh kapalı, tezgâh açıkken iniş gizli.
   İkisi aynı sayfada ama asla aynı anda değil. */
body:not(.calisma) .inis-hero ~ .tezgah { display: none; }

/* ---------------------------------------------- iniş: örnek gösterimi */

/* Aracın ne yaptığını anlatmanın en kısa yolu, yaptığı şeyin kendisi:
   gerçek bir kare ve onun arka planı silinmiş hâli. Perde ikisinin arasında
   gidip geliyor; damalı zemin saydamlığın standart gösterimi. */
.gosterim.ornek {
  position: relative; line-height: 0;
  background-image:
    linear-gradient(45deg, rgba(128,128,128,.16) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(128,128,128,.16) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(128,128,128,.16) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(128,128,128,.16) 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}
.gosterim.ornek > img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: cover; }
.gosterim.ornek .once { position: absolute; inset: 0; animation: perde 7s ease-in-out infinite; }
.gosterim.ornek .once img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gosterim.ornek .ayrac {
  position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent);
  animation: ayrac 7s ease-in-out infinite;
}
/* İki animasyon aynı süre ve yumuşamayla gidiyor ki çizgi perdenin kenarında kalsın. */
@keyframes perde { 0%, 100% { clip-path: inset(0 92% 0 0); } 50% { clip-path: inset(0 8% 0 0); } }
@keyframes ayrac { 0%, 100% { left: 8%; } 50% { left: 92%; } }

/* ---------------------------------------------- iniş: içerik kartları */

/* Alt bölüm düz metin yığını olmasın: her madde kendi kutusunda dursun,
   göz taradığında hangi bilginin nerede olduğunu bir bakışta seçsin. */
.icerik { padding: 40px 0 60px; }
.bolum-baslik {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .16em;
  color: var(--muted); margin: 38px 0 0; padding-bottom: 10px;
  border-bottom: 1px solid var(--ink);
}
.icerik > .bolum-baslik:first-child { margin-top: 0; }

.kart-izgara {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border-bottom: 1px solid var(--line); margin-right: -1px;
}
.kart-izgara > * { padding: 22px 22px 24px; border-right: 1px solid var(--line); }
.kart h3 { margin: 0 0 6px; font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; }
.kart p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.kart .no {
  display: block; margin-bottom: 12px;
  font-size: 12px; font-weight: 800; color: var(--accent); letter-spacing: .1em;
}
/* Kartın içine liste de girebiliyor — madde madde anlatılan şeyi kutuya
   sığdırmak için düz metne çevirmek gerekmesin. */
.kart p + p { margin-top: 9px; }
.kart ul, .kart ol { margin: 8px 0 0; padding-left: 17px; }
.kart li { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin-bottom: 5px; }
.kart li:last-child { margin-bottom: 0; }
.kart strong { color: var(--ink-2); }
.kart code { font-size: 12.5px; }
.kart a { color: var(--accent); }
/* Ölçü/seçenek kartlarının üstündeki küçük künye: "L · %7", "JPG" gibi. */
.kart .rozet {
  display: inline-block; margin-bottom: 10px; padding: 3px 9px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2);
}
.kart.uyari .rozet { border-color: var(--warn); color: var(--warn); }
.kart.iyi .rozet { border-color: var(--accent); color: var(--accent); }

a.kart { color: inherit; display: block; transition: background .14s; }
a.kart:hover { text-decoration: none; background: var(--surface-2); }
a.kart:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
a.kart p { color: var(--muted); }

/* SSS de aynı ızgaranın parçası: iki sütun, saç teli ayraç. */
.icerik .faq { border-bottom: 1px solid var(--line); }
.icerik .faq details { padding: 16px 22px; max-width: none; }
.icerik .faq p { color: var(--muted); font-size: 13.5px; }

/* ============================================================ tezgâh kipi */

/* Araç sayfasının iki hâli var ve ikisi aynı HTML'den çıkıyor:
   İNİŞ — dosya seçilmeden önce. Başlık, tanıtım, altında kısa içerik ve SSS.
          Arama motorunun gördüğü hâl budur; sayfa normal akar, kaydırılır.
   TEZGÂH — kullanıcı dosyayı bırakır bırakmaz `body.calisma` açılır: tanıtım
          metinleri ve altbilgi gizlenir, araç ekranı tek ekrana oturur, sayfa
          kaydırmayı bırakır. Kullanıcı işini yaparken metin okumak zorunda
          kalmıyor, Google ise iniş hâlindeki metni okumaya devam ediyor.
   Yan raylar reklam içindir; yalnızca yer varsa (geniş ekran) ve yalnızca
   tezgâh açıkken görünürler — iniş sayfasında boş kutu durmasın. */

.tezgah { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.tezgah .ray { display: none; }

body.calisma { overflow: hidden; }
body.calisma [data-inis] { display: none !important; }
body.calisma .tezgah {
  max-width: 1460px;
  height: calc(100dvh - 59px);      /* üst bar */
  padding-top: 18px; padding-bottom: 18px;
  align-items: start;
}
/* Tezgâhta sayfa kaymadığı gibi sütun da kaymaz: araç çubuğu ve indirme
   satırı sabit yüksekliktedir, ARADAKİ GÖRSEL kalan boşluğa kadar büyür ve
   ondan fazlasına taşmaz. "İndirme düğmesi ekranın altında kaldı" sorunu
   tam burada çözülüyor — düğme her zaman görünür alanın içinde. */
body.calisma .tezgah .orta {
  /* Hesap tutmazsa (dar ekranda araç çubuğu iki satıra düşerse) kırpmak
     yerine bu sütun kaysın; kullanıcı düğmesine yine ulaşsın. */
  height: 100%; min-height: 0; overflow: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 14px;
}
body.calisma .tezgah .orta > .panel { margin: 0; }
body.calisma .tezgah .orta > .panel:not(.result) {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
body.calisma .tezgah .orta > .panel.result { flex: none; }

/* Esneme zinciri: panel → editör/gövde → görselin kutusu. Zincirdeki her
   halkada `min-height: 0` şart, yoksa flex çocuk içeriğinden küçülmez. */
body.calisma .editor,
body.calisma #st-body,
body.calisma #editor {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
/* Kutu tuvale yapışık kalmalı (`width: fit-content`): fırça katmanı `#overlay`
   kutunun tamamını kaplıyor, kutu tuvalden büyük olursa fırça kayar. O yüzden
   yüksekliği kutuya değil, doğrudan tuvale veriyoruz. */
body.calisma .canvas-wrap { margin: auto; flex: none; }

/* İşlem sürerken tuvalin üstünden geçen tarama şeridi: bekleme süresi
   görselin kendi üstünde görünsün, kullanıcı gözünü kutudan ayırmasın. */
.canvas-wrap.mesgul::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%,
              color-mix(in srgb, var(--accent) 45%, transparent) 48%,
              color-mix(in srgb, var(--accent) 45%, transparent) 52%, transparent 100%);
  background-size: 100% 220px; background-repeat: no-repeat;
  animation: tarama 1.15s linear infinite;
}
@keyframes tarama {
  from { background-position: 0 -220px; }
  to   { background-position: 0 100%; }
}
body.calisma .canvas-wrap canvas {
  /* Çıkarılan pay: üst bar, panel dolgusu, araç çubuğu, ayar satırı ve
     indirme şeridi. Hepsi sabit yükseklikte olduğu için tuvale kalan yer
     ekran yüksekliğinden bunları düşünce bulunuyor. */
  max-height: max(220px, calc(100dvh - var(--tezgah-cerceve, 470px)));
  max-width: 100%;
}

/* Sahne (atölye) en/boy oranıyla ölçüldüğü için yüksekliği doğrudan
   sınırlanamıyor; kalan alanı vh üzerinden veriyoruz. */
body.calisma .sahne {
  margin-top: 12px;
  width: min(100%, calc(var(--sahne-tavan, 50vh) * var(--en-boy, 1.5)));
}

/* Tezgâhta yer, fotoğrafın hakkı. Çevredeki her şey — işlem özeti, dosya
   künyesi, sonuç şeridi — burada kısılıyor ki kare ekranın olabildiğince
   büyük parçasını kaplasın. Bu bilgiler iniş sayfasında ve ayar panelinde
   zaten var. */
body.calisma .op-ozet { display: none; }

body.calisma .tezgah .orta > .panel { padding: 16px 18px; }
body.calisma .filecard { padding: 8px 0; margin-bottom: 12px; }
body.calisma .filecard .thumb { width: 34px; height: 34px; }
body.calisma .op-tabs { margin-bottom: 12px; }
body.calisma .controls { margin-top: 12px; padding-top: 12px; }
body.calisma .opt-grid { gap: 12px; }

/* Sonuç şeridi tek satıra iner: künye solda, düğmeler sağda. */
body.calisma .panel.result { padding: 10px 18px; }
body.calisma .panel.result .zincir { margin-bottom: 8px; }
body.calisma .panel.result .meta-row { margin-bottom: 8px; }

@media (min-width: 1240px) {
  body.calisma .tezgah { grid-template-columns: 200px minmax(0, 1fr) 200px; }
  body.calisma .tezgah .ray { display: block; height: 100%; }
}

/* Reklam yuvası. Kutu duruyor — yeri belli olsun ve gerçek reklam konunca
   yerleşim kaymasın diye. İçindeki "REKLAM" yazısı kaldırıldı: boş bir yuvayı
   etiketlemek kullanıcıya bir şey söylemiyor, sayfayı reklam doluymuş gibi
   gösteriyordu. */
.ray .yer {
  height: min(600px, 100%); border: 1px dashed var(--line); border-radius: var(--radius);
  display: grid; place-items: center;
}

/* ============================================================ durum / uyarı */

.status { display: none; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); margin-top: 16px; }
.status.show { display: flex; }
.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent);
  animation: spin .7s linear infinite; flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

.error, .note, .warn-box {
  display: none; margin-top: 16px; padding: 12px 0 12px 14px; font-size: 14px;
  border: 0; border-left: 2px solid currentColor; border-radius: 0;
  background: none !important;
}
.error { background: var(--bad-soft); color: var(--bad); }
.error.show, .note.show, .warn-box.show { display: block; }
.note { display: block; background: var(--surface-2); color: var(--muted); }
.warn-box { display: block; background: var(--warn-soft); color: var(--warn); }

.inline-note { font-size: 13px; color: var(--muted); }

/* Sık sorulanlar */
.faq details {
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 14px 0; margin-bottom: 0; background: none; max-width: 68ch;
}
.faq summary { cursor: pointer; font-weight: 600; font-size: 14.5px; }
.faq summary::marker { color: var(--faint); }
.faq p { margin: 9px 0 2px; }

/* ============================================================ alt bilgi */

footer {
  border-top: 1px solid var(--line); padding: 28px 0 52px;
  color: var(--muted); font-size: 12.5px; background: var(--bg);
}
footer .wrap { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
footer a { color: var(--muted); }
footer .spacer { margin-left: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}