/* CrispSVG — ortak stil. index.html ve app.html paylasir.
   Tokenlar: acik palet cikplak :root'ta TAM; koyu yalnizca tokenlari
   yeniden tanimlar. Hicbir renk sadece media/[data-theme] blogunun
   icinde tanimlanmaz - yoksa damgasiz (system) durumda uygulanmaz. */
/* ── tokens ─────────────────────────────────────────────────────────
   Light palette is complete on bare :root. Dark redefines tokens only,
   guarded so an explicit light choice beats a dark OS. ─────────────── */
:root {
  --ground:    #F2F4F3;
  --surface:   #FFFFFF;
  --sunken:    #E7EBEA;
  --ink:       #12181B;
  --ink-soft:  #4A585C;
  --ink-faint: #7B8A8E;
  --rule:      #CFD8D7;
  --accent:    #0B7A8C;
  --accent-in: #FFFFFF;
  --anchor:    #D6217C;
  --shadow:    0 1px 2px rgba(18, 24, 27, .05), 0 8px 24px -12px rgba(18, 24, 27, .18);

  --f-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --f-mono:    "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --measure: 34rem;
  --wide:    64rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:    #0E1416;
    --surface:   #151D20;
    --sunken:    #0A0F11;
    --ink:       #E8EDEE;
    --ink-soft:  #A6B5B8;
    --ink-faint: #718085;
    --rule:      #2A3639;
    --accent:    #47B9CB;
    --accent-in: #06181C;
    --anchor:    #F04E9B;
    --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .7);
  }
}
:root[data-theme="dark"] {
  --ground:    #0E1416;
  --surface:   #151D20;
  --sunken:    #0A0F11;
  --ink:       #E8EDEE;
  --ink-soft:  #A6B5B8;
  --ink-faint: #718085;
  --rule:      #2A3639;
  --accent:    #47B9CB;
  --accent-in: #06181C;
  --anchor:    #F04E9B;
  --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .7);
}

/* ── base ───────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
/* [hidden] tarayicinin UA stilinde display:none'dir, ama author CSS'teki
   herhangi bir display onu ezer (.credits inline-flex gibi). Bu yuzden
   acikca ve !important ile geri aliniyor. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  font-optical-sizing: auto;
}
/* height:auto is load-bearing — the width/height attributes on every <img>
   would otherwise hold the intrinsic height while width shrinks, squashing
   the artwork we are here to show off. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: .06em; }
:focus-visible { outline: 2px solid var(--anchor); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: -.022em;
  text-wrap: balance;
  line-height: 1.06;
  margin: 0;
}
h1 { font-size: clamp(2.6rem, 1.7rem + 4.2vw, 5rem); }
h2 { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); }
h3 { font-size: 1.1rem; font-weight: 600; letter-spacing: -.01em; }
p  { margin: 0; }

.shell { width: min(100% - 2.5rem, var(--wide)); margin-inline: auto; }
.col   { width: min(100%, var(--measure)); }

.stack     { display: flex; flex-direction: column; gap: 1.1rem; }
.stack-lg  { display: flex; flex-direction: column; gap: 2rem; }
.section   { display: flex; flex-direction: column; gap: 2rem; padding-block: clamp(2.5rem, 4.5vw, 4rem); }

/* ── vector-editor chrome: the page's structural motif ──────────────
   A section marker is drawn as an editor selection would draw it —
   a hairline path with an anchor square and one control handle. ── */
.marker { display: flex; align-items: center; gap: .6rem; }
.marker::before {
  content: "";
  width: 7px; height: 7px; flex: none;
  background: var(--anchor);
  box-shadow: 0 0 0 1px var(--ground);
}
.marker::after {
  content: "";
  height: 1px; flex: 1 1 auto;
  background: linear-gradient(90deg, var(--rule), transparent);
}
.eyebrow {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* ── header ─────────────────────────────────────────────────────── */
.top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding-block: 1.5rem; flex-wrap: wrap;
}
.wordmark {
  font-family: var(--f-display); font-weight: 800; font-size: 1.15rem;
  letter-spacing: -.03em;
}
.wordmark span { color: var(--accent); }
.top .eyebrow { color: var(--ink-soft); }

/* ── hero ───────────────────────────────────────────────────────── */
.lede { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); color: var(--ink-soft); }
.lede strong { color: var(--ink); font-weight: 600; }

/* ── before / after split ───────────────────────────────────────── */
.compare {
  position: relative;
  border: 1px solid var(--rule);
  background: var(--sunken);
  overflow: hidden;
  touch-action: pan-y;
  cursor: ew-resize;
  box-shadow: var(--shadow);
}
.compare img { width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.compare .after {
  position: absolute; inset: 0;
  clip-path: inset(0 0 0 var(--split, 50%));
}
.compare .after img { height: 100%; object-fit: cover; object-position: left top; }
.handle {
  position: absolute; top: 0; bottom: 0; left: var(--split, 50%);
  width: 1px; background: var(--anchor); pointer-events: none;
}
.handle::before, .handle::after {
  content: ""; position: absolute; left: 50%;
  width: 11px; height: 11px; margin-left: -5.5px;
  background: var(--anchor); box-shadow: 0 0 0 2px var(--surface);
}
.handle::before { top: -1px; }
.handle::after  { bottom: -1px; }
.tag {
  position: absolute; bottom: .7rem;
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase;
  padding: .25rem .5rem;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
}
.tag-l { left: .7rem; }
.tag-r { right: .7rem; }
.caption {
  font-family: var(--f-mono); font-size: .72rem; color: var(--ink-faint);
  line-height: 1.5;
}

/* ── the number ─────────────────────────────────────────────────── */
.ledger {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  background: var(--rule);
  border: 1px solid var(--rule);
}
.cell { background: var(--surface); padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .35rem; }
.cell dt {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.cell dd {
  margin: 0;
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cell .note { font-size: .84rem; color: var(--ink-soft); line-height: 1.45; }
.cell.win dd { color: var(--accent); }

/* ── zoom pairs ─────────────────────────────────────────────────── */
.pairs { display: grid; gap: 2rem; }
.pair { display: flex; flex-direction: column; gap: .7rem; }
.pair-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
/* No aspect-ratio crop here: these are WHOLE images, and cropping them to a
   uniform box would undercut the point that the output matches the source.
   Both images in a pair share dimensions, so they line up on their own. */
.pair-imgs figure { margin: 0; position: relative; background: var(--sunken); }
.pair-imgs figure img { width: 100%; }
.pair-imgs figcaption {
  position: absolute; top: 0; left: 0;
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase;
  padding: .2rem .45rem;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  color: var(--ink-soft);
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}

/* ── feature list ───────────────────────────────────────────────── */
.feats { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 46rem) { .feats { grid-template-columns: repeat(3, 1fr); } }
.feat { background: var(--surface); padding: 1.5rem; display: flex; flex-direction: column; gap: .55rem; }
.feat code {
  font-family: var(--f-mono); font-size: .74rem; color: var(--accent);
  background: var(--sunken); padding: .12rem .35rem; align-self: flex-start;
}
.feat p { font-size: .93rem; color: var(--ink-soft); }

/* ── honesty panel ──────────────────────────────────────────────── */
.plain {
  border-left: 2px solid var(--anchor);
  padding: .1rem 0 .1rem 1.25rem;
  display: flex; flex-direction: column; gap: .8rem;
}

/* ── waitlist ───────────────────────────────────────────────────── */
.signup {
  background: var(--surface); border: 1px solid var(--rule);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  display: flex; flex-direction: column; gap: 1.1rem;
  box-shadow: var(--shadow);
}
.field { display: flex; gap: .6rem; flex-wrap: wrap; }
.field input {
  flex: 1 1 15rem; min-width: 0;
  font: inherit; font-size: 1rem;
  padding: .7rem .85rem;
  color: var(--ink); background: var(--ground);
  border: 1px solid var(--rule); border-radius: 0;
}
.field input::placeholder { color: var(--ink-faint); }
.field button {
  font-family: var(--f-display); font-weight: 600; font-size: .95rem;
  letter-spacing: -.01em;
  padding: .7rem 1.4rem;
  color: var(--accent-in); background: var(--accent);
  border: 1px solid var(--accent); border-radius: 0;
  cursor: pointer;
  transition: opacity .15s ease;
}
.field button:hover { opacity: .86; }
.form-note { font-family: var(--f-mono); font-size: .72rem; color: var(--ink-faint); }
.form-note[data-state="ok"]  { color: var(--accent); }
.form-note[data-state="err"] { color: var(--anchor); }

/* ── footer ─────────────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--rule);
  padding-block: 2rem 3rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: .72rem; color: var(--ink-faint);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   app.html — yukleme akisi
   Durumlar: idle -> chosen -> uploading -> queued -> running -> done
   Her durum kendi <section data-state> blogu; JS yalnizca hangisinin
   gorunur oldugunu degistiriyor, DOM'u yeniden kurmuyor.
   ═══════════════════════════════════════════════════════════════════ */

.app-main { min-height: 60vh; }
[data-state] { display: none; }
[data-state].on { display: flex; flex-direction: column; gap: 1.5rem; }

/* ── birakma alani ─────────────────────────────────────────────── */
.drop {
  border: 1px dashed var(--rule);
  background: var(--surface);
  padding: clamp(2.5rem, 8vw, 5rem) 1.5rem;
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.drop:hover, .drop:focus-visible { border-color: var(--accent); }
.drop.over {
  border-color: var(--anchor);
  border-style: solid;
  background: color-mix(in srgb, var(--anchor) 5%, var(--surface));
}
.drop h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); }
.drop p { color: var(--ink-soft); max-width: 34rem; }
.drop .limits {
  font-family: var(--f-mono); font-size: .72rem; color: var(--ink-faint);
  letter-spacing: .04em;
}

/* ── secilen dosyanin kunyesi ──────────────────────────────────── */
.slip {
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 40rem) { .slip { grid-template-columns: 14rem minmax(0, 1fr); } }
.slip-thumb { background: var(--sunken); display: flex; }
.slip-thumb img { width: 100%; height: 100%; object-fit: contain; }
.slip-facts { background: var(--surface); padding: 1.25rem 1.4rem; display: flex; flex-direction: column; gap: .8rem; }
.facts { display: grid; gap: .55rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); margin: 0; }
.facts div { display: flex; flex-direction: column; gap: .1rem; }
.facts dt {
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.facts dd {
  margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 1.05rem;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.facts dd.warn { color: var(--anchor); }

/* ── butonlar ──────────────────────────────────────────────────── */
.row { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.btn {
  font-family: var(--f-display); font-weight: 600; font-size: .95rem;
  letter-spacing: -.01em; padding: .7rem 1.4rem;
  border-radius: 0; cursor: pointer;
  border: 1px solid var(--accent);
  color: var(--accent-in); background: var(--accent);
  transition: opacity .15s ease;
}
.btn:hover:not(:disabled) { opacity: .86; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-quiet { background: transparent; color: var(--ink-soft); border-color: var(--rule); }
.btn-quiet:hover { color: var(--ink); border-color: var(--ink-faint); opacity: 1; }

/* ── ilerleme ──────────────────────────────────────────────────── */
.progress {
  background: var(--surface); border: 1px solid var(--rule);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  display: flex; flex-direction: column; gap: 1.1rem;
}
.bar { height: 3px; background: var(--sunken); overflow: hidden; }
.bar span {
  display: block; height: 100%; width: 0%;
  background: var(--accent);
  transition: width .4s ease;
}
/* Suresi bilinmeyen bekleme: belirsiz kayan cizgi. Reduced-motion'da durur. */
.bar.wait span {
  width: 30%; background: var(--anchor);
  animation: slide 1.4s ease-in-out infinite;
}
@keyframes slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(333%); }
}
.step { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; flex-wrap: wrap; }
.step strong { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -.015em; }
.step .clock { font-family: var(--f-mono); font-size: .8rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.hint { font-size: .9rem; color: var(--ink-soft); }

/* ── sonuc ─────────────────────────────────────────────────────── */
.result-imgs { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); grid-template-columns: 1fr 1fr; }
.result-imgs figure { margin: 0; position: relative; background: var(--sunken); }
.result-imgs figure img { width: 100%; }
.result-imgs figcaption {
  position: absolute; top: 0; left: 0;
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; padding: .2rem .45rem;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  color: var(--ink-soft);
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}

/* ── hata ──────────────────────────────────────────────────────── */
.fail {
  border-left: 2px solid var(--anchor);
  padding: .1rem 0 .1rem 1.25rem;
  display: flex; flex-direction: column; gap: .6rem;
}
.fail strong { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; }
.fail p { color: var(--ink-soft); }

/* ── kredi rozeti ──────────────────────────────────────────────── */
.credits {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em;
  color: var(--ink-soft);
  border: 1px solid var(--rule); padding: .3rem .6rem;
  display: inline-flex; gap: .45rem; align-items: center;
}
.credits b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.credits.low b { color: var(--anchor); }