/* 1. Kutu Genel ve Responsive Ayarları */
.kamera-wrapper { padding: 0 15px; /* Mobilde kenarlara yapışmasın diye pay */ }

#kameraKutusu { width: 100%; max-width: 400px; /* Ustanın istediği gibi max sınır */ aspect-ratio: 4 / 3; background-color: #f8f9fa; border: 3px dashed #cccccc; border-radius: 10px; margin: 0 auto; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; transition: border-color 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 0 15px rgba(0, 0, 0, 0.05); }

/* 2. Yüz Tarama Lazer Çizgisi */
.tarama-cizgisi { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: rgba(46, 204, 113, 0.9); box-shadow: 0 0 15px 4px rgba(46, 204, 113, 0.6), 0 0 30px rgba(46, 204, 113, 0.4); z-index: 10; display: none; animation: taramaHareketi 2s infinite linear alternate; }

/* Lazerin Yukarı Aşağı Hareketi (Yüksekliğe göre otomatik hesaplar) */
@keyframes taramaHareketi {
    0% { top: 0; opacity: 0.6; }
    50% { opacity: 1; }
    100% { top: calc(100% - 4px); opacity: 0.6; }
}

/* 3. Kamera Köşe Odak Çerçeveleri */
.odak-kosesi { position: absolute; width: 10%; /* Yüzde vererek mobilde çok büyük durmasını engelledik */ min-width: 30px; aspect-ratio: 1 / 1; border-color: #bdc3c7; border-style: solid; z-index: 5; display: none; transition: all 0.3s ease; }

.odak-sol-ust { top: 10px; left: 10px; border-width: 4px 0 0 4px; }
.odak-sag-ust { top: 10px; right: 10px; border-width: 4px 4px 0 0; }
.odak-sol-alt { bottom: 10px; left: 10px; border-width: 0 0 4px 4px; }
.odak-sag-alt { bottom: 10px; right: 10px; border-width: 0 4px 4px 0; }

/* 4. Tarama Başladığındaki Kutu Efekti */
#kameraKutusu.scanning .odak-kosesi { border-color: #f1c40f; animation: pulseOdak 1s infinite alternate; }

@keyframes pulseOdak {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.15); opacity: 1; }
}