@font-face {
  font-family: "Montserrat"; font-weight: 400; font-display: swap;
  src: url("fonts/Montserrat-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat"; font-weight: 600; font-display: swap;
  src: url("fonts/Montserrat-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat"; font-weight: 800; font-display: swap;
  src: url("fonts/Montserrat-ExtraBold.ttf") format("truetype");
}

:root {
  --zemin: #000000;
  --kart: #3c3c3c;
  --urunAdi: #4a90e2;
  --fiyat: #4caf50;
  --dugme: #3b7ce8;
  --ikincil: #bdbdbd;
  --hata: #ff5252;
  --cizgi: #6a6a6a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--zemin);
  color: #fff;
  font-family: "Montserrat", system-ui, sans-serif;
  min-height: 100dvh;
  padding: env(safe-area-inset-top) 20px env(safe-area-inset-bottom);
}

.ekran { display: flex; flex-direction: column; gap: 18px; min-height: 100dvh; padding-top: 28px; }
.ekran[hidden] { display: none; }

h1 { font-weight: 800; font-size: 34px; text-align: center; margin: 8px 0 18px; }
.ipucu { color: var(--ikincil); text-align: center; margin: 0; }

input {
  width: 100%; padding: 18px 16px; font: inherit; font-size: 20px;
  color: #fff; background: transparent;
  border: 1px solid var(--cizgi); border-radius: 10px;
}
input::placeholder { color: var(--ikincil); }
input:focus { outline: 2px solid var(--dugme); outline-offset: 1px; }

button { font: inherit; font-weight: 600; border: 0; border-radius: 999px; cursor: pointer; }
.birincil { background: var(--dugme); color: #fff; padding: 18px; font-size: 19px; }
.birincil:active { filter: brightness(0.85); }
.genis { width: 100%; }
.duz { background: transparent; color: #fff; padding: 0 8px; font-size: 19px; }

.aramaSatiri {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--cizgi); border-radius: 10px; padding-right: 12px;
}
.aramaSatiri input { border: 0; }
.aramaSatiri input:focus { outline: none; }

.kart { background: var(--kart); border-radius: 14px; padding: 22px; text-align: center; }
.urunAdi { color: var(--urunAdi); font-weight: 800; font-size: 28px; margin: 0 0 10px; }
.stokKodu { color: #e8e8e8; font-size: 17px; margin: 0; }
.kart hr { border: 0; border-top: 1px solid var(--cizgi); margin: 18px 10px; }
.fiyatEtiket { font-weight: 600; font-size: 18px; letter-spacing: 1px; margin: 0 0 6px; }
.fiyat { color: var(--fiyat); font-weight: 800; font-size: 52px; margin: 0; }

.hata { color: var(--hata); text-align: center; font-weight: 600; }
.cikis { margin-top: auto; margin-bottom: 20px; align-self: center;
         background: transparent; color: var(--ikincil); font-size: 15px; padding: 10px; }

.kamera { padding: 0; position: relative; justify-content: flex-end; }
.kamera video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kamera button { position: relative; margin: 0 auto 40px; padding: 16px 48px; }