/* css/style.css */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  background: #000;
}

/* Üst kontrol bar */
#controls {
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 9999;

  display: flex;
  gap: 10px;
  align-items: center;

  padding: 10px 12px;
  border-radius: 12px;

  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
}

#controls button, #controls select {
  border: none;
  outline: none;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
}

#controls button {
  cursor: pointer;
}

#controls #status {
  margin-left: auto;
  font-size: 14px;
  opacity: 0.9;
  color: #fff;
}

/* Kamera alanı */
#camera-container {
  width: 100%;
  height: 100%;
  position: relative;
}

/* Video tam ekran */
#video {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
  object-fit: cover;

  /* Ön kamera aynalama (selfie görünümü) */
  transform: scaleX(-1);
}

/* Canvas video üstünde */
#overlay {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  /* Canvas üstüne tıklanmasın */
  pointer-events: none;

  /* Video aynalandıysa maske de aynalansın */
  transform: scaleX(-1);
}

/* Mobilde kontroller çok büyümesin */
@media (max-width: 480px) {
  #controls {
    top: 10px;
    left: 10px;
    right: 10px;
    gap: 8px;
    padding: 8px 10px;
  }

  #controls button, #controls select {
    padding: 9px 10px;
    font-size: 13px;
  }

  #controls #status {
    font-size: 13px;
  }
}