/* Prototip sayfası — site temasına (okyanus / cyan) uyarlanmış, .proto altında kapsüllenmiş */
.proto {
  --ink: var(--text-primary);
  --muted: var(--text-muted);
  --line: rgba(0, 180, 216, 0.22);
  --surface: #0a2030;
  --accent: var(--teal);
  --accent-soft: rgba(0, 180, 216, 0.18);
  --note: var(--gold);
  --metal: #8fa4ad;
  --pcb: #c23b2e;
  --f-display: 'Playfair Display', serif;
  --f-body: 'Outfit', sans-serif;
  --f-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  max-width: 1180px;
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-primary);
}
.proto .proto-wrap { display: flex; flex-direction: column; gap: 3.5rem; }
.proto h1, .proto h2, .proto h3 { font-family: var(--f-display); font-weight: 400; color: var(--white); text-wrap: balance; }
.proto h2 { font-size: 1.5rem; letter-spacing: .01em; }
.proto h3 { font-size: 1.15rem; }
.proto p { max-width: 65ch; }
.proto .eyebrow {
  font-family: var(--f-body); font-size: .7rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--teal); opacity: .8; margin: 0;
}
.proto .mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* başlık */
.proto .head { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; }
.proto .page-title { font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.02; margin-top: .6rem; color: var(--white); }
.proto .page-title em { color: var(--cyan); font-style: italic; }
.proto .head .lead { font-size: 1.05rem; color: var(--text-muted); margin-top: 1rem; }
.proto .tblock {
  display: grid; grid-template-columns: auto auto; font-family: var(--f-mono); font-size: 12px;
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px;
  backdrop-filter: blur(12px); overflow: hidden;
}
.proto .tblock div { padding: 7px 14px; border-bottom: 1px solid var(--glass-border); }
.proto .tblock div:nth-child(odd) { color: var(--text-muted); border-right: 1px solid var(--glass-border); }
.proto .tblock div:nth-last-child(-n+2) { border-bottom: 0; }
.proto .pill { display: inline-block; padding: 1px 10px; border-radius: 99px; background: rgba(240,192,96,.15); color: var(--gold); font-weight: 400; }

/* 3D sahne */
.proto .stage {
  position: relative; width: 100%; aspect-ratio: 16/9; min-height: 360px; max-height: 680px; overflow: hidden;
  border: 1px solid var(--glass-border); border-radius: 16px;
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(0,180,216,.22), transparent 60%),
    linear-gradient(180deg, #06131f 0%, #0a2a4a 100%);
  box-shadow: 0 8px 40px rgba(0,200,224,.12);
}
.proto .stage canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.proto .stage canvas:active { cursor: grabbing; }
.proto .hint, .proto .corner {
  position: absolute; top: 12px; font-family: var(--f-mono); font-size: 11.5px; color: var(--text-muted); pointer-events: none;
}
.proto .hint { left: 16px; max-width: 70%; }
.proto .corner { right: 16px; text-align: right; }
.proto .lbls { position: absolute; inset: 0; pointer-events: none; }
.proto .lbl {
  position: absolute; transform: translate(10px, -50%); white-space: nowrap; font-family: var(--f-mono); font-size: 11.5px;
  background: var(--glass-bg); color: var(--white); border: 1px solid var(--glass-border); padding: 2px 8px; border-radius: 6px;
  backdrop-filter: blur(6px); transition: opacity .25s;
}
.proto .lbl::before { content: ""; position: absolute; left: -14px; top: 50%; width: 12px; border-top: 1px solid var(--cyan); }
.proto .fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-muted); padding: 24px; text-align: center; }
.proto .fallback[hidden] { display: none; }

/* kontroller */
.proto .controls { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; margin-top: 1rem; }
.proto .grp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.proto .grp > .eyebrow { margin-right: 4px; }
.proto .seg { display: inline-flex; border: 1px solid var(--glass-border); border-radius: 999px; overflow: hidden; background: var(--glass-bg); }
.proto .seg button, .proto .chip {
  font: 400 .85rem var(--f-body); color: var(--text-primary); background: transparent; border: 0; padding: 7px 16px; cursor: pointer; transition: all .2s;
}
.proto .seg button + button { border-left: 1px solid var(--glass-border); }
.proto .seg button:hover, .proto .chip:hover { background: rgba(0,180,216,.12); }
.proto .seg button[aria-pressed="true"] { background: linear-gradient(135deg, var(--cyan), var(--teal)); color: var(--deep); font-weight: 500; }
.proto .chip { border: 1px solid var(--glass-border); border-radius: 999px; background: var(--glass-bg); }
.proto .chip[aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan); }
.proto button:focus-visible, .proto input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.proto .sw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--glass-border); cursor: pointer; padding: 0; }
.proto .sw[aria-pressed="true"] { border-color: var(--cyan); box-shadow: 0 0 0 2px var(--ocean-deep) inset, 0 0 12px rgba(0,229,255,.4); }
.proto .time { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 300px; }
.proto .time input { flex: 1; accent-color: var(--cyan); min-width: 120px; }
.proto .time output { font-family: var(--f-mono); font-size: 13px; min-width: 150px; color: var(--white); }

/* özet şeridi */
.proto .specs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px; overflow: hidden; backdrop-filter: blur(12px);
}
.proto .specs > div { padding: 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.proto .specs > div + div { border-left: 1px solid var(--glass-border); }
.proto .specs b { font-family: var(--f-display); font-size: 1.7rem; font-weight: 400; color: var(--cyan); }
.proto .specs span { color: var(--text-muted); font-size: .85rem; }

.proto .grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; }
.proto .sheet { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.proto .sheet .tag { font-family: var(--f-mono); font-size: 12px; color: var(--teal); }
.proto .draw { border: 1px solid var(--glass-border); background: var(--glass-bg); border-radius: 14px; overflow-x: auto; }
.proto .draw svg { display: block; width: 100%; height: auto; min-width: 520px; }
.proto ul.pts { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; max-width: 65ch; color: var(--white-dim); }
.proto ul.pts li::marker { color: var(--cyan); }
.proto .note {
  align-self: start; background: rgba(240,192,96,.08); border: 1px solid rgba(240,192,96,.3); border-radius: 12px; padding: 1rem 1.2rem; color: var(--white-dim);
}
.proto .note b { color: var(--gold); }

/* tablolar */
.proto .tablewrap { overflow-x: auto; border: 1px solid var(--glass-border); border-radius: 14px; background: var(--glass-bg); }
.proto table { border-collapse: collapse; width: 100%; font-size: .9rem; min-width: 640px; }
.proto th, .proto td { text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--glass-border); vertical-align: top; }
.proto tbody tr:last-child td { border-bottom: 0; }
.proto th { font-weight: 400; font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: var(--teal); }
.proto td.mono { white-space: nowrap; }
.proto .ok { color: var(--cyan); font-size: .85rem; }

/* alt bölüm */
.proto .ask { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2.5rem; }
.proto .ask ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--white-dim); }
.proto .ask ol li::marker { color: var(--cyan); }
.proto .next {
  background: linear-gradient(135deg, #041428 40%, rgba(0,200,224,.35) 100%); border: 1px solid var(--glass-border);
  padding: 1.5rem; border-radius: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 8px 32px rgba(0,200,224,.18);
}
.proto .next p { color: var(--white-dim); }

/* svg çizim stilleri */
.proto .s-line { stroke: var(--ink); stroke-width: 1.2; fill: none; }
.proto .s-shell { fill: var(--surface); stroke: var(--ink); stroke-width: 1.3; }
.proto .s-hatch { fill: url(#hatch); stroke: var(--ink); stroke-width: 1.3; }
.proto .s-metal { fill: var(--metal); stroke: var(--ink); stroke-width: 1; }
.proto .s-glass { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1; }
.proto .s-pcb { fill: var(--pcb); stroke: var(--ink); stroke-width: .8; }
.proto .s-dim { stroke: var(--muted); stroke-width: .9; fill: none; }
.proto .s-dimA { stroke: var(--accent); stroke-width: 1.2; fill: none; }
.proto .s-txt { fill: var(--ink); font-family: var(--f-mono); font-size: 11px; }
.proto .s-mut { fill: var(--muted); font-family: var(--f-mono); font-size: 10.5px; }
.proto .s-acc { fill: var(--cyan); font-family: var(--f-mono); font-size: 11px; font-weight: 500; }
.proto .s-dark { fill: var(--ink); }
.proto .flow { stroke: var(--cyan); stroke-width: 1.6; fill: none; stroke-dasharray: 5 5; animation: proto-flow 1.4s linear infinite; }
@keyframes proto-flow { to { stroke-dashoffset: -20; } }
@media (prefers-reduced-motion: reduce) { .proto .flow { animation: none; } }

@media (max-width: 860px) {
  .proto .head, .proto .grid2, .proto .ask { grid-template-columns: 1fr; }
  .proto .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proto .specs > div:nth-child(3) { border-left: 0; }
  .proto .specs > div:nth-child(n+3) { border-top: 1px solid var(--glass-border); }
  .proto .stage { aspect-ratio: 4/3; }
  .proto .corner { display: none; }
}
@media (max-width: 600px) { .page-wrap { padding: 2rem 1rem 3rem; } }