/*
  Angle: vizör metaforlu minimalist arayüz.
  Şekil kuralı: kartlar 14px, kontroller (düğme, segment, çip) 8px, bilgi etiketleri tam yuvarlak.
  Tek vurgu rengi: --accent. Tema her zaman koyu.
*/

:root {
  /* Site her zaman koyu temada. Tek vurgu rengi: --accent. */
  --scene: #161617;
  --veil: rgb(12 12 13 / .74);
  --surface: #1b1b1d;
  --surface-2: #242427;
  --ink: #f2f2f0;
  --muted: #9c9c98;
  --faint: #5e5e5b;
  --line: rgb(255 255 255 / .08);
  --line-strong: rgb(255 255 255 / .16);
  --accent: #4dcd53;
  --on-accent: #0c0c0d;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --shadow-card: 0 1px 2px rgb(0 0 0 / .3), 0 16px 40px -18px rgb(0 0 0 / .6);

  --clay: #b3b1ab;
  --eye: #1a1918;
  --label: #4dcd53;
  --dummy: #c4a860;
  --metal: #34322f;
  --column: #2a2a2c;
  --grid: #303032;
  --sky: #d9d8d4;
  --bounce: #2a2a2b;
  --shadow: #000000;
  --shadow-alpha: 0.5;
  --ov: #212123;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }

body {
  background: var(--scene);
  color: var(--ink);
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, p, dl, dd, figure { margin: 0; }
.ph { font-size: 16px; line-height: 1; }

output, .readout, .frame-cap, .mono {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

/* ---------- Sahne ---------- */

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.stage.dragging { cursor: grabbing; }
.stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Vizör: kadrajın dışı karartılır, köşelerde işaret */
.frame {
  position: absolute;
  pointer-events: none;
  box-shadow: 0 0 0 200vmax var(--veil);
  transition: left .35s cubic-bezier(.16, 1, .3, 1), top .35s cubic-bezier(.16, 1, .3, 1),
    width .35s cubic-bezier(.16, 1, .3, 1), height .35s cubic-bezier(.16, 1, .3, 1);
}
.frame::before {
  content: '';
  position: absolute;
  inset: -7px;
  --c: var(--ink);
  background:
    linear-gradient(var(--c), var(--c)) left top / 18px 1.5px no-repeat,
    linear-gradient(var(--c), var(--c)) left top / 1.5px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 18px 1.5px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 1.5px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 18px 1.5px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 1.5px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 18px 1.5px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 1.5px 18px no-repeat;
}
.frame::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(var(--ink), var(--ink)) center / 10px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1px 10px no-repeat;
  opacity: .35;
}
.frame-cap {
  position: absolute;
  left: -7px;
  top: -30px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.minimap {
  position: absolute;
  left: var(--free-left, 16px);
  bottom: 16px;
  width: 200px;
  height: 136px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ov);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  pointer-events: none;
}
.minimap canvas { display: block; width: 100%; height: 100%; }
.minimap figcaption { position: absolute; top: 8px; left: 10px; font-size: 11px; color: var(--muted); }

/* ---------- Üst bar ---------- */

.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  pointer-events: none;
  z-index: 3;
}
.top > * { pointer-events: auto; }
/* Logo ve altında "powered by weis" (Parca ile aynı düzen) */
.brand-block { justify-self: start; display: grid; justify-items: center; gap: 3px; padding: 4px 6px; }
.brand { display: block; line-height: 0; }
.main-logo { display: block; height: 34px; width: auto; }
.powered-by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--muted);
  font-size: 7.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .2s ease;
}
.powered-by:hover { opacity: .75; }
.sub-logo { display: block; width: 22px; height: auto; filter: brightness(0) invert(1); opacity: .85; }
.top-end { justify-self: end; display: flex; gap: 8px; }

.seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgb(0 0 0 / .3);
}
.seg button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  transition: background-color .2s ease, color .2s ease;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); }
.seg-mono button { font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 400; font-size: 12px; padding: 0 10px; }
.seg-sm { box-shadow: none; background: var(--surface-2); border-color: transparent; }
.seg-sm button { height: 26px; padding: 0 10px; font-size: 12px; }
.seg-sm button[aria-pressed="true"] { background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / .3); }

/* ---------- Kartlar ---------- */

.card {
  position: fixed;
  top: 72px;
  z-index: 2;
  max-height: calc(100dvh - 88px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}
.inspector { left: 16px; width: 320px; }
.result { right: 16px; width: 360px; padding: 22px 22px 8px; }

h2 { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.hint { color: var(--muted); font-size: 13px; line-height: 1.55; text-wrap: pretty; }

/* Sekmeler */
.tabs {
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  padding: 6px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.tabs button {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 9px 0 7px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 500;
  transition: background-color .2s ease, color .2s ease;
}
.tabs button .ph { font-size: 18px; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { background: var(--surface-2); color: var(--ink); }
.tabs button[aria-selected="true"] .ph { color: var(--accent); }

.pane { display: none; gap: 14px; padding: 18px 20px 22px; }
.pane.active { display: grid; animation: pane-in .32s cubic-bezier(.16, 1, .3, 1); }
@keyframes pane-in { from { opacity: 0; transform: translateY(6px); } }
.pane-head { display: flex; align-items: baseline; gap: 10px; }
.pane-head output { margin-left: auto; font-size: 12px; color: var(--muted); }

/* Hazır açılar */
.presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.preset {
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  transition: background-color .2s ease, border-color .2s ease, transform .12s ease;
}
.preset:hover { background: var(--surface-2); border-color: transparent; }
.preset:active { transform: scale(.98); }
.preset b { display: block; font-weight: 500; font-size: 13.5px; line-height: 1.3; }
.preset span { display: block; font-size: 11.5px; color: var(--muted); }

/* Çipler */
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  font-size: 12.5px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.chip:hover { background: var(--surface-2); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.chip.mono { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; }

/* Kadraj ikonları */
.fgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.fbtn {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 8px 4px 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  font-size: 11px;
  color: var(--muted);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.fbtn:hover { background: var(--surface-2); }
.fbtn[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }
.ficon { width: 100%; max-width: 54px; height: auto; display: block; }
.ficon .bg { fill: var(--surface-2); }
.ficon .fig { fill: var(--faint); }
.ficon .fig .dk { fill: var(--muted); }
.ficon .fig .ac { fill: var(--accent); }
.ficon .gr { stroke: var(--line-strong); stroke-width: .6; }
.fbtn[aria-pressed="true"] .ficon .fig { fill: var(--ink); }

/* Kadran */
.dial { width: 220px; height: 220px; justify-self: center; touch-action: none; cursor: pointer; outline: none; }
.dial:focus-visible { border-radius: 50%; box-shadow: 0 0 0 3px var(--accent-soft); }
.dial .ring { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.dial .ring.inner { stroke-dasharray: 2 4; }
.dial .pt { fill: var(--surface); stroke: var(--faint); stroke-width: 1.4; transition: fill .2s ease, stroke .2s ease; }
.dial .pt-hit { fill: transparent; }
.dial .pt-g:hover .pt { stroke: var(--ink); }
.dial .pt-g.on .pt { fill: var(--ink); stroke: var(--ink); }
.dial .lbl { font-size: 10px; letter-spacing: .08em; fill: var(--faint); text-anchor: middle; font-family: 'Geist', sans-serif; font-weight: 500; }
.dial .lbl.front { fill: var(--accent); font-weight: 600; }
.dial .body { fill: var(--faint); }
.dial .nose, .dial .cap { fill: var(--ink); }
.dial .label { fill: var(--accent); }
.dial .fov { fill: var(--accent-soft); }
.dial .cam circle { fill: var(--accent); }
.dial .cam .cam-dot { fill: var(--surface); }
.dial .cam-line { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 3; opacity: .6; }

/* Şemalar */
.diagram { width: 100%; height: auto; display: block; overflow: visible; }
.diagram.draggable { cursor: grab; touch-action: none; }
.diagram.draggable:active { cursor: grabbing; }
.diagram .ground { stroke: var(--line-strong); stroke-width: 1; }
.diagram .arc { fill: none; stroke: var(--faint); stroke-opacity: .6; stroke-width: 1; stroke-dasharray: 2 4; }
.diagram .zone { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.diagram .eyeline { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 4 3; }
.diagram .fig { fill: var(--faint); }
.diagram .fig .dk { fill: var(--muted); }
.diagram .fig .ac { fill: var(--accent); }
.diagram .sight { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 3 3; }
.diagram .cam { fill: var(--ink); }
.diagram .small { font-size: 10px; fill: var(--muted); font-family: 'Geist', sans-serif; }
.diagram .zone-lbl { font-size: 12px; fill: var(--ink); font-family: 'Geist', sans-serif; font-weight: 500; }
.diagram .wedge { fill: var(--accent-soft); }
.diagram .edge { stroke: var(--accent); stroke-width: 1; opacity: .55; }
.diagram .wall { stroke: var(--line-strong); stroke-width: 3; stroke-linecap: round; }
.diagram .wall-seen { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.diagram .mm { font-family: 'Geist Mono', monospace; fill: var(--ink); font-size: 10.5px; }

/* Kaydırıcılar */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: var(--line-strong); }
input[type="range"]::-moz-range-track { height: 2px; border-radius: 2px; background: var(--line-strong); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  transition: transform .15s ease;
}
input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--ink); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--accent-soft); }
.scale-labels { display: flex; justify-content: space-between; margin-top: -8px; font-size: 11px; color: var(--muted); }

/* Anahtar */
.toggle { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding-top: 2px; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle .switch { position: relative; flex: none; width: 30px; height: 18px; margin-top: 1px; border-radius: 999px; background: var(--line-strong); transition: background-color .2s ease; }
.toggle .switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(0 0 0 / .2);
  transition: transform .2s cubic-bezier(.16, 1, .3, 1);
}
.toggle input:checked + .switch { background: var(--ink); }
.toggle input:checked + .switch::after { transform: translateX(12px); }
.toggle input:focus-visible + .switch { box-shadow: 0 0 0 3px var(--accent-soft); }
.toggle b { display: block; font-weight: 500; font-size: 13px; }
.toggle small { display: block; font-size: 12px; color: var(--muted); line-height: 1.45; }

/* ---------- Sonuç kartı ---------- */

.label { font-size: 12.5px; color: var(--muted); }
h1 {
  margin-top: 6px;
  font-size: 32px;
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.lede { margin-top: 10px; color: var(--muted); font-size: 13.5px; line-height: 1.55; text-wrap: pretty; }
.lede b { color: var(--ink); font-weight: 500; }

.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.pill {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 12.5px;
  font-weight: 500;
}
.aka { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.aka[hidden] { display: none; }
.specials { display: contents; }
.special {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 500;
  cursor: help;
}
.warn { display: flex; gap: 8px; margin-top: 14px; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.warn .ph { color: var(--accent); margin-top: 1px; }
.warn[hidden] { display: none; }

.prompt { display: grid; gap: 12px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.prompt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.field { display: grid; gap: 6px; }
.field span { font-size: 12px; color: var(--muted); }
.field input {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  outline: none;
  font-size: 13.5px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input::placeholder { color: var(--muted); opacity: .7; }
.field input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-soft); }
.prompt-text {
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 14.5px;
  line-height: 1.6;
  user-select: text;
  text-wrap: pretty;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: var(--ink);
  color: var(--surface);
  font-size: 13.5px;
  font-weight: 500;
  transition: transform .12s ease, background-color .2s ease, color .2s ease;
}
.btn-primary:hover { opacity: .92; }
.btn-primary:active { transform: scale(.98); }
.btn-primary.done { background: var(--accent); color: var(--on-accent); }

.why { margin-top: 20px; border-top: 1px solid var(--line); }
.why summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}
.why summary::-webkit-details-marker { display: none; }
.why summary .ph { transition: transform .25s cubic-bezier(.16, 1, .3, 1); color: var(--muted); }
.why[open] summary .ph { transform: rotate(45deg); }
.terms { display: grid; }
.term { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.term dt { font-size: 12px; color: var(--muted); padding-top: 1px; }
.term .en { font-weight: 500; }
.term .tr { color: var(--muted); }
.term .tr:not(:empty)::before { content: '/ '; color: var(--faint); }
.term .desc { margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.readout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 14px 0 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}
.readout span { display: block; font-family: 'Geist', sans-serif; font-size: 11px; color: var(--muted); }

button:focus-visible, summary:focus-visible, .brand:focus-visible, .powered-by:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Dar ekranlar ---------- */

@media (max-width: 1180px) {
  .inspector { width: 296px; }
  .result { width: 328px; }
  .tabs button span { font-size: 10px; }
  h1 { font-size: 28px; }
}

@media (max-width: 960px) {
  html, body { height: auto; overflow-x: clip; }
  body { overflow-y: visible; display: flex; flex-direction: column; min-height: 100dvh; }
  body > * { flex: none; }
  .top {
    position: static;
    order: 0;
    height: auto;
    /* Telefonda: logo + dil, altında konu seçimi, altında oran; hepsi ekran genişliğinde. */
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand lang" "subject subject" "aspect aspect";
    padding: 10px 12px 12px;
    gap: 8px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
  }
  .brand-block { grid-area: brand; }
  .top-end { display: contents; }
  #langSeg { grid-area: lang; justify-self: end; align-self: center; }
  #subjectSeg { grid-area: subject; }
  #aspect { grid-area: aspect; }
  #subjectSeg, #aspect { display: flex; min-width: 0; }
  #subjectSeg button, #aspect button { flex: 1; min-width: 0; justify-content: center; padding: 0 6px; }
  .stage { position: sticky; top: 0; order: 1; height: 54svh; min-height: 320px; flex: none; z-index: 2; border-bottom: 1px solid var(--line); }
  .minimap { width: 120px; height: 82px; left: 10px; bottom: 10px; border-radius: 10px; }
  .minimap figcaption, .frame-cap { display: none; }
  /* Flex öğelerinde z-index statik konumda da çalışır; kartlar sahnenin altında kalsın. */
  .card { position: static; z-index: auto; max-height: none; overflow: visible; margin: 12px; width: auto; }
  .result { order: 2; }
  .inspector { order: 3; }
  .tabs { top: 54svh; }
  .dial, .diagram { max-width: 340px; justify-self: center; }
}

@media (max-width: 420px) {
  .seg-mono button { padding: 0 7px; font-size: 11px; }
}

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