/* ==========================================================================
   CSKPEDIA — cam-lab.css · OptiPedia Cam laboratuvarı (optipedia/lab.html)
   lenspedia.css üstüne yüklenir. Sahneler koyu "stüdyo" zeminde (cam ve
   yansıma okunsun), ölçüler fildişi plakada (OptiPedia çizim dili).
   ========================================================================== */
.bolum.lab{ grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); align-items: start }
.lab-sol{ display: grid; gap: 16px; min-width: 0 }
.lab-panel{ position: sticky; top: 84px; min-width: 0 }
.lab-bas h2{ margin-bottom: 8px }
.lab-bas p{ color: var(--murekkep-2); margin: 0 }
.lab-panel{ padding-top: 6px }

/* 3D sahne */
.lab-sahne{
  position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 18%, #2B3550 0%, #121A30 55%, #070D1F 100%);
  box-shadow: 0 0 0 1px rgba(233,207,138,.35), 0 30px 60px -32px #000;
  touch-action: none;
}
.lab-sahne .lab-3d{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab }
.lab-sahne .lab-3d:active{ cursor: grabbing }
.lab-sahne .sahne-temsili, .lab-harita-kap .sahne-temsili{
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font: 600 11px var(--font-marka); letter-spacing: .14em; text-transform: uppercase;
  color: #F2C98A; background: rgba(7,13,31,.72); border: 1px solid rgba(242,201,138,.35);
  padding: 4px 9px; border-radius: 6px;
}
.lab-etiket{
  position: absolute; top: 48px; z-index: 2; font: 600 13px var(--font-marka); color: #F4EFE4;
  background: rgba(7,13,31,.6); padding: 4px 10px; border-radius: 999px; pointer-events: none;
}
.lab-etiket.sol{ left: 22% ; transform: translateX(-50%) }
.lab-etiket.sag{ left: 78%; transform: translateX(-50%) }
.lab-kamera{ position: absolute; right: 10px; bottom: 6px; z-index: 2; margin: 0 }
.lab-kamera button{ min-height: 36px; padding: 0 12px; font-size: 13px; background: rgba(7,13,31,.7) }
.lab-ipucu{ position: absolute; left: 12px; bottom: 14px; z-index: 2; font-size: 12px; color: rgba(244,239,228,.7); pointer-events: none }
.lab-sahne:not(.lab-3d-var) .lab-etiket, .lab-sahne:not(.lab-3d-var) .lab-kamera, .lab-sahne:not(.lab-3d-var) .lab-ipucu{ display: none }
.lab-sahne.lab-3d-yok{ aspect-ratio: auto; min-height: 0; background: none; box-shadow: none }
.lab-sahne.lab-3d-yok .sahne-temsili{ position: static; display: inline-block; margin-bottom: 4px }

/* kesit ve tablo: fildişi plaka */
.lab-kesit-kap, .lab-tablo{
  --murekkep: #0C1730; --murekkep-2: #56637E; --murekkep-3: #5A6680; --mavi: #002695; --cizgi-y: #E4E8EE;
  color: var(--murekkep); border-radius: 14px;
  background: radial-gradient(circle at 30% 0%, #FFFDF8, #F4EFE4 55%, #ECE4D2);
  box-shadow: 0 0 0 1px rgba(233,207,138,.45);
}
.lab-kesit-kap{ margin: 0; padding: 12px 14px 10px }
.lab-kesit{ display: block; width: 100%; height: clamp(180px, 22vw, 250px) }
.lab-kesit-kap figcaption{ font-size: 12.5px; color: var(--murekkep-3); margin-top: 6px }
.lab-tablo{ margin: 0; overflow: hidden; border-collapse: separate; border-spacing: 0 }
.lab-tablo th, .lab-tablo td{ padding: 10px 14px; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--cizgi-y); white-space: normal; overflow-wrap: anywhere }
.lab-tablo td{ white-space: nowrap }
.lab-tablo thead th{ font: 700 11.5px var(--font-marka); letter-spacing: .12em; text-transform: uppercase; color: var(--murekkep-3); width: auto }
.lab-tablo tbody th{ color: var(--murekkep); font-weight: 600; width: 40% }
.lab-tablo tr:last-child th, .lab-tablo tr:last-child td{ border-bottom: 0 }
.lab-fark{ margin-left: 8px; font: 700 11.5px var(--font-marka); color: #8A5200; background: #FFF1D6; border-radius: 4px; padding: 1px 6px }
.lab-fark.iyi{ color: #17533A; background: #E2F3EA }
/* beş indeks yan yana */
.lab-besli caption{ caption-side: top; text-align: left; padding: 12px 14px 4px; font: 700 11.5px var(--font-marka); letter-spacing: .12em; text-transform: uppercase; color: var(--murekkep) }
.lab-besli tbody th{ width: 34% }
.lab-besli tr.secili th, .lab-besli tr.secili td{ background: #FFF6E2 }
.lab-cubuk{ display: block; height: 4px; margin-top: 6px; border-radius: 2px; background: var(--cizgi-y) }
.lab-cubuk i{ display: block; height: 100%; border-radius: 2px; background: #B8892E }
.lab-ozet{ margin: 0; font-size: calc(15px * var(--olcek)); line-height: 1.6; color: var(--murekkep) }
.lab-uyari{ margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: var(--uyari-zemin); color: var(--uyari); font-weight: 600 }

/* form */
.lab-form fieldset{ border: 0; margin: 0 0 6px; padding: 14px 0 0; border-top: 1px solid var(--cizgi-y); min-width: 0 }
.lab-form legend{ font: 700 12px var(--font-marka); letter-spacing: .14em; text-transform: uppercase; color: var(--mavi); padding: 0; margin-bottom: 8px }
.lab-form .kaydirici{ margin: 4px 0 10px; max-width: none }
.lab-form .kaydirici label{ gap: 12px }
.lab-form .kaydirici output{ font-variant-numeric: tabular-nums; white-space: nowrap }
.lab-form .secici{ margin: 2px 0 12px }
.lab-sec{ display: grid; gap: 6px; margin: 0 0 12px; font: 600 calc(14px * var(--olcek)) var(--font-marka) }
.lab-sec select{
  min-height: calc(44px * var(--olcek)); padding: 0 12px; border-radius: 10px; border: 1px solid var(--cizgi);
  background: rgba(244,239,228,.04); color: var(--murekkep); font: inherit; font-weight: 500;
}
.lab-sec select option{ background: #0C1730 }
.lab-alt-etiket{ display: block; font: 600 calc(14px * var(--olcek)) var(--font-marka); margin-bottom: 6px }
.lab-varsayim{ margin-top: 8px; border-top: 1px solid var(--cizgi-y); padding-top: 4px }
.lab-varsayim summary{ cursor: pointer; min-height: 44px; display: flex; align-items: center; font: 600 calc(14.5px * var(--olcek)) var(--font-marka); color: var(--murekkep) }
.lab-varsayim ul{ margin: 4px 0 8px; font-size: calc(14px * var(--olcek)); color: var(--murekkep-2) }

/* progresif harita */
.lab-harita-izgara{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px }
.lab-harita-kap{ position: relative; margin: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px rgba(233,207,138,.35), 0 24px 50px -30px #000; background: #070D1F }
.lab-harita{ display: block; width: 100%; aspect-ratio: 1 / 1; touch-action: none; cursor: crosshair }
.lab-harita-kap figcaption{ padding: 10px 12px; font-size: 13px; color: var(--murekkep-2); background: rgba(244,239,228,.04) }
.lab-olcek{ display: grid; gap: 4px; max-width: 420px }
.lab-olcek-cubuk{ height: 10px; border-radius: 99px; background: linear-gradient(90deg, rgb(47,158,107) 0%, rgb(176,200,92) 23%, rgb(242,201,82) 45%, rgb(232,132,64) 68%, rgb(196,64,54) 100%) }
.lab-olcek-yazi{ display: flex; justify-content: space-between; font-size: 12px; color: var(--murekkep-3); font-variant-numeric: tabular-nums }
.lab-olcek-not{ margin: 0; font-size: 13px; color: var(--murekkep-3) }
.lab-bakis{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: stretch }
.lab-goruntu{ display: block; width: 100%; height: 100%; min-height: 150px; border-radius: 12px; box-shadow: 0 0 0 1px rgba(233,207,138,.35) }
.lab-okuma{ margin: 0; display: grid; gap: 0; align-content: start }
.lab-okuma div{ display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--cizgi-y) }
.lab-okuma dt{ font-size: calc(14px * var(--olcek)); color: var(--murekkep-2) }
.lab-okuma dd{ margin: 0; font: 600 calc(15px * var(--olcek)) var(--font-marka); font-variant-numeric: tabular-nums; color: #F4EFE4; white-space: nowrap }
.lab-durum{ display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 13px }
.lab-durum.iyi{ background: #17533A; color: #E6F6EC }
.lab-durum.orta{ background: #6B4A0E; color: #FFF0CF }
.lab-durum.kotu{ background: #8E2A24; color: #FFE6E3 }

/* yönlendirme kartı (dene.html ve cam.html'de) */
.lab-gecis{
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center;
  margin: 0 var(--kenar); padding: 18px 22px; border-radius: 16px; text-decoration: none; color: inherit;
  border: 1px solid rgba(233,207,138,.35); background: linear-gradient(100deg, rgba(233,207,138,.12), rgba(233,207,138,.02) 70%);
  transition: border-color .2s, transform .2s var(--ease-cikis);
}
.lab-gecis svg{ width: 44px; height: 44px; stroke: #E9CF8A; fill: none; stroke-width: 1.6 }
.lab-gecis small{ display: block; font: 600 11px var(--font-marka); letter-spacing: .16em; text-transform: uppercase; color: #E9CF8A }
.lab-gecis b{ display: block; font-family: var(--font-baslik); font-size: clamp(18px, 2vw, 22px); color: #F4EFE4 }
.lab-gecis span span{ color: var(--murekkep-2); font-size: 14.5px }
.lab-gecis:active{ transform: scale(.99) }
@media (hover: hover) and (pointer: fine){ .lab-gecis:hover{ border-color: #E9CF8A } }
.lab-gecis:focus-visible{ outline: 2px solid #E9CF8A; outline-offset: 3px }

@media (max-width: 960px){
  /* telefonda sıra: başlık → sahne/harita → kontroller → kesit ve ölçüler */
  .bolum.lab{ grid-template-columns: minmax(0, 1fr); gap: 16px }
  .lab-sol{ display: contents }
  .lab-bas{ order: 1 } .lab-sahne, .lab-harita-izgara{ order: 2 } .lab-olcek, .lab-olcek-not{ order: 3 }
  .bolum.lab > .lab-panel{ display: block; position: static; order: 4 }
  .lab-bakis, .lab-kesit-kap, .lab-tablo, .lab-ozet, #camSahneTarif{ order: 5 }
  .lab-sahne{ aspect-ratio: 4 / 3 }
}
@media (max-width: 560px){
  .lab-bakis{ grid-template-columns: minmax(0, 1fr) }
  .lab-etiket{ top: 46px; font-size: 12px }
  .lab-tablo th, .lab-tablo td{ padding: 9px 8px; font-size: 13.5px }
  .lab-kamera button{ padding: 0 10px }
  .lab-ipucu{ display: none }
  .lab-gecis{ grid-template-columns: minmax(0, 1fr); margin: 0 16px }
  .lab-gecis svg:first-child{ display: none }
}
@media (prefers-reduced-motion: reduce){ .lab-gecis{ transition: none } }

/* dokunmatik: hedefler en az 44 px */
@media (pointer: coarse){ .lab-kamera button{ min-height: 44px } }