/* ==========================================================================
   DentAI — Sayfa içi kamera + hizalama rehberi (AR overlay)
   Neon hatlı klinik rehber: beyaz çizgi + mavi vurgu, %40 saydam.
   ========================================================================== */

.dcam {
  --dc-blue: #7ba7c9;
  --dc-ink: #0f1720;
  --dc-ok: #6ee7b7;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: #000;
  display: none;
  flex-direction: column;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #fff;
  overscroll-behavior: none;
  touch-action: manipulation;
}
.dcam.acik { display: flex; }
.dcam * { box-sizing: border-box; }

/* ---------- Kamera sahnesi ---------- */
.dcam-sahne { position: relative; flex: 1; overflow: hidden; background: #000; }
.dcam-video, .dcam-onizleme {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* Canlı görüntü ayna gibi davransın: kullanıcı sağa gidince görüntü de sağa
   gitsin. Aksi halde ters yönde kayar ve rehbere hizalamak imkânsızlaşır.
   Çekilen kare aynalanmaz — kayıt gerçek yönde kalır. */
.dcam-video { transform: scaleX(-1); }
.dcam-onizleme { display: none; z-index: 2; }
.dcam.onizlemede .dcam-onizleme { display: block; }
.dcam.onizlemede .dcam-rehber,
.dcam.onizlemede .dcam-ipuclari { display: none; }

/* ---------- Üst çubuk ---------- */
.dcam-ust {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  padding: max(12px, env(safe-area-inset-top)) 14px 12px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  background: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,0));
}
.dcam-adim {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--dc-blue); display: block; margin-bottom: 1px;
}
.dcam-ad { font-size: 16px; font-weight: 700; line-height: 1.2; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.dcam-yuvarlak {
  width: 36px; height: 36px; flex: none; border: none; border-radius: 50%;
  background: rgba(255,255,255,.16); backdrop-filter: blur(8px);
  color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s;
}
.dcam-yuvarlak:active { background: rgba(255,255,255,.32); }
.dcam-yuvarlak svg { width: 17px; height: 17px; display: block; }
.dcam-yuvarlak.isik-acik { background: #fff; color: var(--dc-ink); }

/* ---------- Rehber katmanı ---------- */
.dcam-rehber {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none; display: grid; place-items: center;
}
.dcam-rehber svg { width: 100%; height: 100%; }

/* Neon hat: %40 saydam, canlı görüntüyü kapatmaz */
.dcam-rehber .hat {
  fill: none; stroke: #fff; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .4;
}
.dcam-rehber .hat-ince { fill: none; stroke: #fff; stroke-width: 1.5; opacity: .32; }
.dcam-rehber .dis      { fill: rgba(255,255,255,.05); stroke: #fff; stroke-width: 1.5; opacity: .38; }
.dcam-rehber .orta     { fill: none; stroke: #fff; stroke-width: 1.4; stroke-dasharray: 6 7; opacity: .45; }
.dcam-rehber .ayrac    { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .55; }
.dcam-rehber .ok       { fill: none; stroke: var(--dc-blue, #7ba7c9); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }

/* Hizalanınca yeşile döner */
.dcam.hazir .dcam-rehber .hat,
.dcam.hazir .dcam-rehber .dis { stroke: var(--dc-ok); opacity: .55; }
.dcam.hazir .dcam-rehber .ayrac { stroke: var(--dc-ok); }

/* ---------- Alt ipuçları (3'lü) ---------- */
.dcam-ipuclari {
  position: absolute; left: 0; right: 0; bottom: 10px; z-index: 5;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 0 12px;
}
.dcam-ipucu { display: flex; align-items: center; gap: 5px; min-width: 0; }
.dcam-ipucu svg { width: 15px; height: 15px; flex: none; opacity: .55; }
.dcam-ipucu span {
  font-size: 9.5px; line-height: 1.2; color: rgba(255,255,255,.62);
  min-width: 0; overflow-wrap: anywhere;
}

/* ---------- Alt kontrol ---------- */
.dcam-alt {
  position: relative; z-index: 6;
  padding: 14px 18px max(16px, env(safe-area-inset-bottom));
  background: #0b1016;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
}
.dcam-deklansor {
  width: 66px; height: 66px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,.9);
  background: transparent; padding: 4px; cursor: pointer;
  justify-self: center; transition: transform .12s;
}
.dcam-deklansor:active { transform: scale(.93); }
.dcam-deklansor span { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; }
.dcam-deklansor:disabled { opacity: .4; }
.dcam-metin-btn {
  border: none; background: none; color: #fff; font-family: inherit;
  font-size: 14px; font-weight: 700; cursor: pointer; padding: 10px 2px;
}
.dcam-metin-btn.vurgulu { color: var(--dc-blue); }
.dcam-alt .sag { text-align: right; }
.dcam-onizleme-kontrol { display: none; }
.dcam.onizlemede .dcam-cekim-kontrol { display: none; }
.dcam.onizlemede .dcam-onizleme-kontrol { display: contents; }

/* ---------- İzin / hata ---------- */
.dcam-hata {
  position: absolute; inset: 0; z-index: 7; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 13px; padding: 30px; text-align: center; background: #0b1016;
}
.dcam.hatali .dcam-hata { display: flex; }
.dcam-hata .ikon {
  width: 54px; height: 54px; border-radius: 16px;
  background: rgba(123,167,201,.16); color: var(--dc-blue);
  display: grid; place-items: center;
}
.dcam-hata .ikon svg { width: 25px; height: 25px; }
.dcam-hata h3 { margin: 0; font-size: 16.5px; font-weight: 700; }
.dcam-hata p { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.68); max-width: 320px; }
.dcam-hata button {
  margin-top: 4px; padding: 12px 22px; border: none; border-radius: 9999px;
  background: #fff; color: var(--dc-ink); font-family: inherit;
  font-size: 14px; font-weight: 700; cursor: pointer;
}

@media (max-height: 700px) {
  .dcam-ipuclari { display: none; }
}

/* Üst çubuktaki yönerge satırı (ortadaki balonların yerine) */
.dcam-baslik { min-width: 0; max-width: 78%; }
.dcam-yonerge {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(255,255,255,.82);
  text-shadow: 0 1px 4px rgba(0,0,0,.7);
}

/* Sonraki açıya geçerken kısa onay vurgusu */
.dcam.gecis .dcam-rehber .hat,
.dcam.gecis .dcam-rehber .dis { stroke: var(--dc-ok, #6ee7b7); opacity: .6; }
.dcam.gecis .dcam-sahne::after {
  content: "";
  position: absolute; inset: 0; z-index: 4;
  background: rgba(110, 231, 183, .12);
  pointer-events: none;
  animation: dcamGecis .42s ease-out;
}
@keyframes dcamGecis { from { opacity: 1 } to { opacity: 0 } }