/* No Limit 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; }

/* Dil değiştirici. Görünen şey iki harflik kod (EN, TR…), dilin kendi adı
   title ve aria-label'da duruyor — altı dil üst bara ancak böyle sığıyor.
   Açılır menü değil, gerçek bağlantı: Google izleyebilsin, kullanıcı tek
   tıklamayla geçsin. Yönlendirme yok, seçim kullanıcının. */
.topbar nav.dil { gap: 13px; font-size: 12px; font-weight: 700; letter-spacing: .09em; }
.topbar nav.dil a { color: var(--faint); }
.topbar nav.dil a:hover { color: var(--ink); }
.topbar nav.dil a[aria-current="page"] {
  color: var(--ink); text-decoration: underline; text-underline-offset: 5px;
}
@media (max-width: 560px) { .topbar nav.dil { gap: 9px; font-size: 11px; letter-spacing: .04em; } }
/* 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. 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.

   Giriş ortalı: sayfanın tek işi arama kutusuna götürmek, o da başlığın tam
   altında duruyor. Sola dayalıyken göz başlıktan kutuya çapraz gidiyordu. */
.hero-band { border-bottom: 1px solid var(--line); background: var(--bg); }
.hero { padding: 68px 0 44px; text-align: center; }
.hero h1 {
  margin: 0 auto 14px; font-weight: 900;
  font-size: clamp(36px, 6vw, 62px); line-height: .98; letter-spacing: -.045em;
  max-width: 24ch;
}
/* Vurgulu parça kendi satırında: sloganın ikinci yarısı altı dilde de aynı
   yerde kırılsın, dil başına kelime sayısına göre ayar gerekmesin. */
.hero h1 em { font-style: normal; color: var(--accent); display: block; }
.hero .lede { margin: 0 auto; 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 auto 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; }

/* Rozet artık yalnızca planlanan araçlarda ("yakında") var. "Cihazda çalışır"
   16 kartın 10'unda tekrarlanıyordu: bilgi değil gürültüydü, kaldırıldı. */
.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;
}

/* 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;
}
/* Yükseklik görselin kendi oranından geliyor; tavan yalnızca olağandışı geniş
   bir sütunda kutunun ekranı yutmasını engellemek için. Eskiden 260 px'ti ve
   geniş ekranda görselin üstünü altını kırpıp ince bir şeride çeviriyordu:
   750 px'lik sütunda 1200×656'lık kare ~410 px olmalıyken 260'ta kesiliyordu. */
.gosterim.ornek > img { display: block; width: 100%; height: auto; max-height: 480px; 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.
   Başlangıç bilinçli olarak "önce" tarafında: kullanıcı önce özgün kareyi görüyor,
   sonuç sağdan sola doğru üzerine geliyor — hikâye önce→sonra sırasıyla okunuyor. */
@keyframes perde { 0%, 100% { clip-path: inset(0 8% 0 0); } 50% { clip-path: inset(0 92% 0 0); } }
@keyframes ayrac { 0%, 100% { left: 92%; } 50% { left: 8%; } }

/* Boyutlandırma: aynı kare kendi özgün kadrajının (kesikli çizgi) içinde
   küçülüp büyüyor. Önce/sonra perdesi burada anlam taşımazdı — küçültülmüş
   fotoğraf da aynı fotoğraf; anlatılması gereken şey ölçünün değişmesi.
   Genişlik canlandırılıyor, transform değil: tutamak kutunun köşesinde
   kalsın ama kendisi küçülmesin. */
.gosterim.olcek { padding: 16px; line-height: 0; }
.olcek-sahne {
  position: relative; aspect-ratio: 1000 / 545;
  width: min(100%, 418px); margin-inline: auto;   /* 418 = 228px yükseklik tavanı × oran */
  border: 1px dashed var(--line-strong); border-radius: 4px;
}
.olcek-kutu {
  position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1000 / 545;
  animation: olcek 6s cubic-bezier(.45, 0, .55, 1) infinite;
}
.olcek-kutu img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.olcek-tutamak {
  position: absolute; right: -5px; bottom: -5px; width: 10px; height: 10px;
  background: var(--accent); border: 2px solid var(--surface-2); border-radius: 2px;
}
@keyframes olcek { 0%, 100% { width: 100%; } 50% { width: 46%; } }
@media (prefers-reduced-motion: reduce) { .olcek-kutu { animation: none; width: 70%; } }

/* Fotoğrafın üstüne binen etiketler (dosya boyutu). Fotoğraf
   temaya göre değişmiyor, etiketler de değişmesin: iki temada da koyu cam. */
.gosterim .etiket {
  position: absolute; z-index: 1; line-height: 1.3;
  padding: 5px 10px; border-radius: 6px;
  background: rgba(15, 17, 20, .62); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 600 13px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
}

/* Sıkıştırma: iki taraf aynı dosya, bilerek. Aracın gerçek çıktısı (kalite 78)
   vitrin ölçüsüne inince özgününden ayırt edilemiyor — anlatılacak şey de bu.
   Farkı etiketler söylüyor; soldaki perdeyle birlikte kırpılıyor. */
.gosterim.ornek .etiket { top: 12px; }
.gosterim.ornek .etiket.once-etiket { left: 12px; }
/* sabit renk: koyu temadaki açık vurgunun üstünde beyaz yazı okunmuyordu (2.2:1) */
.gosterim.ornek .etiket.sonra-etiket { right: 12px; background: #0c7a6a; }

/* dar ekranda etiket fotoğrafı fazla örtmesin */
@media (max-width: 480px) {
  .gosterim .etiket { font-size: 11.5px; padding: 4px 8px; }
}

/* ---------------------------------------------- iniş: canlandırmalar */

/* PDF sayfalarında örnek fotoğraf yok — belge işinin "önce/sonra"sı bir
   fotoğrafla anlatılmıyor. Onun yerine işin kendisi oynuyor: birleştirmede
   üç belge üst üste biniyor, bölmede biri üçe ayrılıyor. Her sayfanın SVG'si
   kendi HTML'inde; ortak olan belge çizimi (<symbol id="pdf-belge">) ve buradaki
   hareket sözlüğü.
   Belgelerin renkleri bilerek sabit ve doygun: iki temada da zemin
   değişkenlerinin (--surface, --line) üstünde okunuyor. `--renk` her <use>'a
   ayrı veriliyor ve gölge ağacına miras yoluyla geçiyor. */
.gosterim.canli {
  background:
    radial-gradient(90% 110% at 0% 0%, color-mix(in srgb, #e5484d 15%, transparent), transparent 62%),
    radial-gradient(90% 110% at 100% 100%, color-mix(in srgb, #3b82f6 15%, transparent), transparent 62%),
    var(--surface-2);
}
.canli svg { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
/* Hareket <use>'a değil, onu saran <g>'ye veriliyor. Chrome <use>'un kutusunu
   x/y konumu olmadan hesaplıyor; `transform-box: fill-box` merkezi yanlış
   yere koyuyor, ölçeklenen belge kayıyor, dönen sayfa kadrajdan çıkıyordu. */
.canli .a {
  transform-box: fill-box; transform-origin: center;
  animation-duration: 6s; animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.45, 0, .55, 1); animation-fill-mode: both;
}
/* Akış oku: kesikli çizgi işin yönüne doğru kayıyor. */
.canli .ok { stroke-dasharray: 7 7; animation: pdf-ok .9s linear infinite; }
@keyframes pdf-ok { to { stroke-dashoffset: -14; } }

/* birleştir: iki yandaki belge ortadakinin üstüne biner, onay rozeti */
.canli .bir-sol { animation-name: bir-sol; }
.canli .bir-sag { animation-name: bir-sag; }
.canli .bir-orta { animation-name: bir-orta; }
.canli .bir-rozet { animation-name: pdf-rozet; }
@keyframes bir-sol {
  0%, 12% { transform: none; opacity: 1; }
  42%, 62% { transform: translate(146px, 4px) rotate(-8deg); opacity: 1; }
  72% { transform: translate(152px, 0) scale(.9); opacity: 0; }
  88% { transform: none; opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes bir-sag {
  0%, 12% { transform: none; opacity: 1; }
  42%, 62% { transform: translate(-146px, 4px) rotate(8deg); opacity: 1; }
  72% { transform: translate(-152px, 0) scale(.9); opacity: 0; }
  88% { transform: none; opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes bir-orta { 0%, 60% { transform: none; } 70% { transform: scale(1.14); } 80%, 100% { transform: none; } }
@keyframes pdf-rozet {
  0%, 62% { transform: scale(0); opacity: 0; }
  72%, 86% { transform: none; opacity: 1; }
  95%, 100% { transform: scale(0); opacity: 0; }
}

/* PDF'ten görsel: sayfalar belgeden çıkıp görsele dönüşür */
.canli .jpg-belge { animation-name: jpg-belge; }
.canli .jpg-resim { animation-name: jpg-cik; }
@keyframes jpg-belge { 0%, 20%, 100% { transform: none; } 8% { transform: scale(1.07); } }
@keyframes jpg-cik {
  0%, 6% { transform: translate(var(--dx), var(--dy)) scale(.25); opacity: 0; }
  30%, 78% { transform: none; opacity: 1; }
  92%, 100% { transform: none; opacity: 0; }
}

/* görselden PDF: görseller belgeye akar, sayfa sayısı rozeti */
.canli .gir-resim { animation-name: gir-resim; }
.canli .gir-belge { animation-name: gir-belge; }
.canli .gir-rozet { animation-name: gir-rozet; }
@keyframes gir-resim {
  0%, 12% { transform: none; opacity: 1; }
  42% { transform: translate(var(--dx), var(--dy)) scale(.25); opacity: 0; }
  86% { transform: none; opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes gir-belge { 0%, 44% { transform: none; } 54% { transform: scale(1.1); } 64%, 100% { transform: none; } }
@keyframes gir-rozet {
  0%, 54% { transform: scale(0); opacity: 0; }
  64%, 86% { transform: none; opacity: 1; }
  95%, 100% { transform: scale(0); opacity: 0; }
}

/* sıkıştır: iki kıskaç belgeyi sıkıştırır, boyut etiketi küçülür */
.canli .sik-belge { animation-name: sik-belge; }
.canli .sik-sol { animation-name: sik-sol; }
.canli .sik-sag { animation-name: sik-sag; }
.canli .sik-once { animation-name: sik-once; }
.canli .sik-sonra { animation-name: sik-sonra; }
@keyframes sik-belge { 0%, 18% { transform: scale(1.15); } 48%, 80% { transform: scale(.7); } 95%, 100% { transform: scale(1.15); } }
@keyframes sik-sol { 0%, 18% { transform: none; } 48%, 80% { transform: translateX(22px); } 95%, 100% { transform: none; } }
@keyframes sik-sag { 0%, 18% { transform: none; } 48%, 80% { transform: translateX(-22px); } 95%, 100% { transform: none; } }
@keyframes sik-once { 0%, 34% { opacity: 1; } 44%, 86% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes sik-sonra {
  0%, 38% { opacity: 0; transform: scale(.8); }
  50%, 82% { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: scale(.8); }
}

/* numara ve filigran: numaralar sırayla belirir, köşegen damga iner */
.canli .pdf-num { animation-name: pdf-num; }
.canli .pdf-fil { animation-name: pdf-fil; }
@keyframes pdf-num {
  0%, 8% { transform: scale(0); opacity: 0; }
  20%, 80% { transform: none; opacity: 1; }
  92%, 100% { transform: scale(0); opacity: 0; }
}
@keyframes pdf-fil {
  0%, 38% { transform: scale(1.35); opacity: 0; }
  52%, 82% { transform: none; opacity: .6; }
  94%, 100% { transform: none; opacity: 0; }
}

/* böl: kesik çizgileri belirir, belge üç parçaya ayrılıp yayılır */
.canli .bol-ana { animation-name: bol-ana; }
.canli .bol-kes { animation-name: bol-kes; }
.canli .bol-parca { animation-name: bol-parca; }
@keyframes bol-ana {
  0%, 30% { transform: none; opacity: 1; }
  40%, 86% { transform: scale(.9); opacity: 0; }
  96%, 100% { transform: none; opacity: 1; }
}
@keyframes bol-kes { 0%, 12% { opacity: 0; } 18%, 32% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes bol-parca {
  0%, 32% { transform: translateX(var(--dx)) scale(.9); opacity: 0; }
  52%, 82% { transform: none; opacity: 1; }
  94%, 100% { transform: translateX(var(--dx)) scale(.9); opacity: 0; }
}

/* düzenle: iki sayfa yer değiştirir, biri silinip soluklaşır, biri döner */
.canli .duz-a { animation-name: duz-a; }
.canli .duz-b { animation-name: duz-b; }
.canli .duz-c { animation-name: duz-c; }
.canli .duz-d { animation-name: duz-d; }
.canli .duz-sil { animation-name: duz-sil; }
@keyframes duz-a { 0%, 8% { transform: none; } 20% { transform: translate(120px, -22px); } 32%, 88% { transform: translateX(240px); } 100% { transform: none; } }
@keyframes duz-c { 0%, 8% { transform: none; } 20% { transform: translate(-120px, 22px); } 32%, 88% { transform: translateX(-240px); } 100% { transform: none; } }
@keyframes duz-b { 0%, 42% { opacity: 1; } 50%, 88% { opacity: .22; } 96%, 100% { opacity: 1; } }
@keyframes duz-sil {
  0%, 34% { transform: scale(0); opacity: 0; }
  42%, 58% { transform: none; opacity: 1; }
  66%, 100% { transform: scale(.6); opacity: 0; }
}
@keyframes duz-d { 0%, 56% { transform: none; } 68%, 88% { transform: rotate(90deg); } 98%, 100% { transform: none; } }

/* dönüştür: aynı görselin rozeti sırayla JPG → PNG → WebP olur. Üç rozet aynı
   anahtar kareleri kullanıyor; negatif gecikme (-4s, -2s) her birini döngünün
   başka üçte birine kaydırıyor. Kart her değişimde hafifçe nabız atar. */
.canli .cev-kart { animation-name: cev-kart; animation-duration: 2s; }
.canli .cev-fmt { animation-name: cev-fmt; }
.canli .cev-don { animation: cev-don 3s linear infinite; }
@keyframes cev-kart { 0%, 20%, 100% { transform: none; } 8% { transform: scale(1.04); } }
@keyframes cev-fmt {
  0% { transform: scale(.7); opacity: 0; }
  5%, 30% { transform: none; opacity: 1; }
  36%, 100% { transform: scale(.7); opacity: 0; }
}
@keyframes cev-don { to { transform: rotate(360deg); } }

/* tek yönlü çevirme: yeni biçim sağdan belirir, onay rozeti */
.canli .jp-kart { animation-name: jp-kart; }
.canli .jp-onay, .canli .heic-onay, .canli .wj-onay { animation-name: pdf-rozet; }
@keyframes jp-kart {
  0%, 12% { transform: translateX(-60px) scale(.8); opacity: 0; }
  34%, 88% { transform: none; opacity: 1; }
  97%, 100% { transform: none; opacity: 0; }
}

/* HEIC: kare yan yatık gelir, dönüşümde düzelir */
.canli .heic-jpg { animation-name: heic-jpg; }
@keyframes heic-jpg {
  0%, 14% { transform: rotate(-90deg) scale(.55); opacity: 0; }
  32%, 44% { transform: rotate(-90deg) scale(.8); opacity: 1; }
  62%, 88% { transform: none; opacity: 1; }
  97%, 100% { transform: none; opacity: 0; }
}

/* PNG → JPG: dosya boyutu çubuğu beşte bire iner */
.canli .pj-bar { animation-name: pj-bar; transform-origin: left center; }
.canli .pj-etiket { animation-name: pj-etiket; }
@keyframes pj-bar {
  0%, 30% { transform: none; opacity: 0; }
  36% { transform: none; opacity: 1; }
  58%, 88% { transform: scaleX(.2); opacity: 1; }
  97%, 100% { transform: scaleX(.2); opacity: 0; }
}
@keyframes pj-etiket { 0%, 56% { opacity: 0; } 64%, 88% { opacity: 1; } 97%, 100% { opacity: 0; } }

/* WebP → JPG: açılmayan dosyanın kilidi sallanır, JPG belirir */
.canli .wj-kilit { animation-name: wj-kilit; }
.canli .wj-kart { animation-name: wj-kart; }
@keyframes wj-kilit {
  0%, 4% { transform: none; } 8% { transform: rotate(-14deg); } 12% { transform: rotate(12deg); }
  16% { transform: rotate(-8deg); } 20%, 100% { transform: none; }
}
@keyframes wj-kart {
  0%, 30% { transform: translateX(-60px) scale(.8); opacity: 0; }
  50%, 88% { transform: none; opacity: 1; }
  97%, 100% { transform: none; opacity: 0; }
}

/* Metadata: fotoğraf yerinde duruyor, künyedeki satırlar sırayla çizilip
   siliniyor (konum iğnesi fotoğraftan da kalkıyor), sonra onay. */
.canli .ex-satir { animation-name: ex-satir; animation-delay: calc(var(--i) * .45s); }
.canli .ex-cizgi {
  transform-box: fill-box; transform-origin: left center;
  animation: ex-cizgi 6s cubic-bezier(.45, 0, .55, 1) infinite; animation-delay: inherit;
}
.canli .ex-onay { animation-name: pdf-rozet; }
@keyframes ex-cizgi { 0%, 16% { transform: scaleX(0); } 26%, 100% { transform: none; } }
@keyframes ex-satir {
  0%, 28% { opacity: 1; transform: none; }
  36%, 88% { opacity: 0; transform: translateX(-8px); }
  96%, 100% { opacity: 1; transform: none; }
}

/* JSON: tek satırlık küçültülmüş hâl satırlara açılır; bir satır hatalı
   yanar, sonra düzelir. Satırların --dy'si ilk satıra olan uzaklık. */
.canli .js-tek { animation-name: js-tek; }
.canli .js-satir { animation-name: js-satir; }
.canli .js-hata, .canli .js-x { animation-name: js-hata; }
.canli .js-tamam, .canli .js-onay { animation-name: js-tamam; }
@keyframes js-tek { 0%, 14% { opacity: 1; } 22%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes js-satir {
  0%, 16% { transform: translateY(var(--dy)) scale(.6); opacity: 0; }
  34%, 88% { transform: none; opacity: 1; }
  96%, 100% { transform: translateY(var(--dy)) scale(.6); opacity: 0; }
}
@keyframes js-hata { 0%, 42% { opacity: 0; } 48%, 62% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes js-tamam { 0%, 64% { opacity: 0; } 70%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
.canli .js-hata, .canli .js-tamam { fill-opacity: .22; }

/* QR: içerik türü sırayla değişir (cev-fmt); kod modül modül dolar,
   tarama çizgisi yukarıdan aşağı geçer. */
.canli .qr-modul { animation-name: qr-modul; }
.canli .qr-tara { animation-name: qr-tara; }
@keyframes qr-modul {
  0%, 10% { transform: scale(.4); opacity: 0; }
  24%, 86% { transform: none; opacity: 1; }
  96%, 100% { transform: scale(.4); opacity: 0; }
}
@keyframes qr-tara {
  0%, 50% { transform: none; opacity: 0; }
  54% { transform: none; opacity: 1; }
  80% { transform: translateY(168px); opacity: 1; }
  84%, 100% { transform: translateY(168px); opacity: 0; }
}

/* Hareket istemeyen kullanıcıya durağan hâl: bütün belgeler yerinde,
   yalnızca geçici işaretler (rozet, kesik çizgi, damga) gizli. */
@media (prefers-reduced-motion: reduce) {
  .canli .a, .canli .ok { animation: none; }
  .canli .gecici { opacity: 0; }
  .canli .ex-cizgi { animation: none; transform: scaleX(0); }
}

/* ---------------------------------------------- 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; }

/* ============================================================ bilgi sayfaları */

/* Hakkımızda, iletişim, gizlilik, şartlar. Araç değil, okunacak metin: tek
   sütun, satır boyu okunabilir aralıkta, başlıklar araç sayfalarının diliyle. */
.bilgi { max-width: 780px; padding-top: 44px; padding-bottom: 64px; }
.bilgi > .eyebrow { display: block; margin-bottom: 14px; }
.bilgi h1 {
  margin: 0 0 14px; font-weight: 900; letter-spacing: -.045em;
  font-size: clamp(32px, 4.4vw, 46px); line-height: 1.05;
}
.bilgi .lede { margin: 0 0 8px; color: var(--muted); font-size: 17px; max-width: 60ch; }
.bilgi .guncel { margin: 0 0 12px; font-size: 13px; color: var(--faint); }
.bilgi > h2 { margin: 36px 0 8px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.bilgi > p, .bilgi > ul li { color: var(--ink-2); line-height: 1.7; }
.bilgi > ul { padding-left: 20px; margin: 8px 0; }
.bilgi > ul li + li { margin-top: 4px; }
.bilgi .kart-izgara { margin-top: 28px; border-top: 1px solid var(--line); }

.iletisim-form { margin-top: 28px; display: flex; flex-direction: column; gap: 18px; }
.iletisim-form input[type="email"] {
  font: inherit; padding: 10px 12px; border-radius: var(--radius); width: 100%;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
}
.iletisim-form input[type="email"]:focus { outline: none; border-color: var(--ink); }
.iletisim-form .field label small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--faint); }
.iletisim-form > .inline-note { margin: 0; }
/* Bot tuzağı ekrandan dışarıda; `display:none` bazı botlar tarafından atlanıyor. */
.iletisim-form .tuzak { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.inline-note.tamam { color: var(--good); font-weight: 600; }

footer .wrap a + a { margin-left: -6px; }

/* ============================================================ PDF atölyesi */

/* Kardeş araçlar arası geçiş (site_uret.py `aile_blogu` üretir). Sekme değil
   bağlantı: her iş kendi sayfasında. Bulunduğun araç dolu, diğerleri çerçeve. */
.aile { display: flex; flex-wrap: wrap; gap: 6px; }
.aile a {
  font-size: 12.5px; font-weight: 600; line-height: 1.2; padding: 7px 12px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--ink-2); background: var(--surface);
  transition: border-color .13s, color .13s, background .13s;
}
.aile a:hover { border-color: var(--ink); color: var(--ink); }
.aile a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.inis-hero .aile { justify-content: center; margin-top: 16px; }
.aile-alan { margin-bottom: 18px; }

/* Sayfa ızgarası — düzenleme ve PDF'ten görsel */
.pages {
  display: grid; gap: 12px; margin-top: 16px;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
}
.page {
  border: 2px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--surface-2); cursor: pointer; position: relative;
  transition: border-color .13s, transform .13s, opacity .13s;
}
.page:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.page.sel { border-color: var(--accent); }
.page.sel::after {
  content: "✓"; position: absolute; top: 6px; right: 6px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 12px;
  display: grid; place-items: center; font-weight: 700;
}
.page.gone { opacity: .3; }
.page.gone::after { content: "✕"; background: var(--bad); }
.page canvas { display: block; width: 100%; height: auto; background: #fff; }
.page .num {
  font-size: 11.5px; font-weight: 600; text-align: center;
  padding: 5px; color: var(--muted); background: var(--surface);
  border-top: 1px solid var(--line);
}
.page .ph { aspect-ratio: 3/4; display: grid; place-items: center; color: var(--faint); font-size: 12px; }
/* Sürükleme: taşınan soluk, bırakılacak yer kartın kenarında bir çizgi. */
.page[draggable="true"] { cursor: grab; }
.page.suruklenen { opacity: .35; }
.page.hedef-once { box-shadow: -5px 0 0 -1px var(--accent); }
.page.hedef-sonra { box-shadow: 5px 0 0 -1px var(--accent); }

/* Sıralanabilir dosya listesi — birleştirme ve görselden PDF */
.filelist { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.filelist:empty { margin: 0; }
.filelist .item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; background: var(--surface-2); border-radius: var(--radius-sm);
  cursor: grab;
}
.filelist .item .n { font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; }
.filelist .item .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.filelist .item .sz { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.filelist .item .kucuk {
  width: 38px; height: 38px; object-fit: cover; flex: none;
  border-radius: 3px; border: 1px solid var(--line); background: var(--surface);
}
.filelist .item.suruklenen { opacity: .35; }
.filelist .item.hedef-ust { box-shadow: inset 0 3px 0 var(--accent); }
.filelist .item.hedef-alt { box-shadow: inset 0 -3px 0 var(--accent); }
@media (max-width: 560px) { .filelist .item .sz { display: none; } }

/* Bölme önizlemesi: çıkacak her dosya bir çip. */
.parcalar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.parcalar:empty { display: none; }
.parcalar .parca {
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 4px 9px; border-radius: 3px;
  background: var(--c-belge-soft); color: var(--c-belge);
}
.parcalar .daha { background: var(--surface-2); color: var(--muted); }
.inline-note.hata { color: var(--bad); }

/* ============================================================ 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 */

/* Altbilgideki bütün araçlar: her sayfadan her araca bir bağlantı.
   Araç sayfaları yalnızca kendi ailesine bağlanıyordu; Google araç
   sayfalarının çoğunu ya hiç bilmiyor ya da tarayıp geçiyordu (ölçüm
   20.09.2026). Kullanıcı için de aradığı başka araç bir tık uzakta.
   Görsel olarak geri planda: asıl iş sayfanın kendisi. */
.araclar-listesi { border-top: 1px solid var(--line); padding: 26px 0 4px; }
.araclar-listesi .wrap {
  display: grid; gap: 18px 28px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.araclar-listesi h2 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 8px; font-weight: 600; }
.araclar-listesi ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.araclar-listesi li { font-size: 13.5px; line-height: 1.35; }
.araclar-listesi a { color: var(--ink-2); text-decoration: none; }
.araclar-listesi a:hover { color: var(--accent); text-decoration: underline; }
.araclar-listesi [aria-current="page"] { color: var(--faint); }

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;
}

/* ============================================================ mobil

   Telefon ayrı bir tasarım gibi davranır: daha az dikey boşluk, tek sütun,
   kart yerine liste satırı. Masaüstündeki editoryal ızgara 375 pikselde
   okunmuyordu — kart başına 157 piksel yükseklik, 19 araç için 1.500
   pikselden fazla kaydırma demekti.

   YAN BOŞLUK. Burada ayrıca bir hata düzeliyor: .hero, .tools, .icerik ve
   .inis-hero .ic kendi `padding` kısayollarını yazarken (`68px 0` gibi)
   .wrap'in yan boşluğunu da siliyorlardı. Masaüstünde bu göze batmıyor,
   çünkü .wrap zaten en fazla 1280 piksel ve ekran genişse iki yanda yer
   kalıyor. Telefonda kalmıyor: arama kutusu ve bölüm başlıkları ekranın
   kenarına yapışıyordu. Izgaranın boydan boya kesmesi bilinçli, metnin
   kenara yapışması değil — o yüzden boşluk yalnızca metne geri veriliyor.

   Dokunmatikte hover yok; buradaki hiçbir kural hover'a bağlı değil. */

/* Tablet ve dar dizüstü (641–1024 px): telefon tasarımına geçmeye gerek yok,
   ama aynı yan boşluk sorunu burada da var. .wrap en fazla 1280 piksel
   olduğu için geniş ekranda iki yanda yer kalıyor ve boşluk göze batmıyor;
   1024 pikselde kalmıyor, başlık ekranın kenarına dayanıyor. Yalnızca yan
   boşluk geri veriliyor, yerleşim aynı kalıyor. */
@media (min-width: 641px) and (max-width: 1024px) {
  .hero { padding-left: 26px; padding-right: 26px; }
  .tools { padding-left: 26px; padding-right: 26px; }
  .icerik { padding-left: 26px; padding-right: 26px; }
  .inis-hero .ic { padding-left: 26px; padding-right: 26px; }
}

@media (max-width: 640px) {

  /* ---------------------------------------------------------- giriş */
  .hero { padding: 34px 18px 26px; }
  .hero h1 { font-size: clamp(30px, 8.5vw, 38px); letter-spacing: -.035em; }
  .search { margin-top: 20px; }
  /* 16px altına inme: iOS Safari daha küçük yazıda odaklanınca sayfayı
     kendiliğinden yakınlaştırıyor ve kullanıcı elle geri çıkmak zorunda. */
  .search input { font-size: 16px; padding: 12px 14px 12px 36px; }

  /* ------------------------------------------------------ araç listesi */
  .tools { padding: 4px 0 44px; }
  .section-head { margin: 26px 18px 0; }

  /* Kart bir kutu değil, liste satırı: ikon başlığın solunda, açıklama
     altında. Aynı bilgi, üçte iki yükseklikte. */
  .grid { grid-template-columns: 1fr; margin-right: 0; }
  .card {
    display: grid; grid-template-columns: 22px minmax(0, 1fr);
    column-gap: 12px; padding: 14px 18px 16px; border-right: 0;
  }
  .card .icon { margin: 0; font-size: 17px; line-height: 1.45; }
  .card h3 { margin: 0; font-size: 15.5px; }
  .card p { grid-column: 2; margin-top: 3px; font-size: 13px; line-height: 1.5; }
  .card .tags { grid-column: 2; margin-top: 6px; padding-top: 0; }

  /* ------------------------------------------------------ araç sayfası */
  .inis-hero .ic { padding: 28px 18px 30px; gap: 22px; }
  .icerik { padding: 28px 18px 44px; }
  .bolum-baslik { margin-top: 30px; }

  /* İçerik kartları da tek sütun; ayraç çizgisi sütun arası değil satır arası. */
  .kart-izgara { grid-template-columns: 1fr; margin-right: 0; }
  .kart-izgara > * { padding: 16px 0 18px; border-right: 0; border-top: 1px solid var(--line); }
  .kart-izgara > *:first-child { border-top: 0; }
  .icerik .faq details { padding: 14px 0; }

  /* ---------------------------------------------------------- altbilgi */
  footer { padding: 22px 0 38px; }
  footer .wrap { flex-direction: column; align-items: flex-start; gap: 8px; }
  footer .spacer { display: none; }
}

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