@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

/* ESNAF TEMA (Koyu Modern) */
:root {
    --arkaplan: linear-gradient(135deg, #121212 0%, #1e1e1e 100%);
    --metin-ana: #F0F2F5;
    --metin-ikincil: #A0A0A0;
    --glass-bg: rgba(30, 30, 32, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
    --vurgu-mor: #00dbde; 
    --vurgu-mor-koyu: #fc00ff; 
    --kutu-golge: rgba(0, 0, 0, 0.5);
    --menu-bg: rgba(20, 20, 20, 0.9);
    --input-bg: rgba(0, 0, 0, 0.3);
    --basari: #00E676;
    --neon-gradient: linear-gradient(135deg, var(--vurgu-mor), var(--vurgu-mor-koyu));
}

* { 
    box-sizing: border-box; 
    font-family: 'Inter', sans-serif; 
    -webkit-tap-highlight-color: transparent; 
}

body { 
    margin: 0; 
    padding: 0; 
    background: var(--arkaplan); 
    min-height: 100vh; 
    color: var(--metin-ana); 
    padding-bottom: 90px; 
}

/* HEADER */
.header { 
    padding: 30px 20px 10px 20px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.header h1 { 
    margin: 0; 
    font-size: 28px; 
    font-weight: 800; 
    letter-spacing: -1px; 
}

.header span { 
    background: var(--neon-gradient); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}

.mekan-badge { 
    background: var(--glass-bg); 
    padding: 8px 15px; 
    border-radius: 50px; 
    border: 1px solid var(--glass-border); 
    font-size: 14px; 
    font-weight: 600; 
    color: var(--metin-ana); 
}

/* KARTLAR */
.kart { 
    margin: 20px; 
    padding: 25px; 
    border-radius: 28px; 
    background: var(--glass-bg); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px); 
    border: 1px solid var(--glass-border); 
    box-shadow: 0 20px 40px var(--kutu-golge); 
    position: relative; 
    overflow: hidden; 
}

/* HOŞ GELDİNİZ EKRANI */
.talimat-kutu { 
    text-align: center; 
    padding: 10px 0; 
}

.talimat-baslik { 
    font-size: 20px; 
    font-weight: 800; 
    margin-bottom: 5px; 
    color: white; 
}

.mekan-hosgeldin-isim {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 25px;
    color: var(--vurgu-mor);
    text-shadow: 0 0 10px rgba(0, 219, 222, 0.4);
}

.talimat-metin { 
    font-size: 14px; 
    color: var(--metin-ikincil); 
    line-height: 1.5; 
    margin-bottom: 25px; 
}

.neon-cizgi { 
    height: 2px; 
    width: 60px; 
    background: var(--neon-gradient); 
    margin: 0 auto 20px auto; 
    border-radius: 2px; 
}

/* QR KAMERA MODALI */
.camera-modal { 
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.9); 
    backdrop-filter: blur(10px); 
    padding: 20px; 
    flex-direction: column; 
    justify-content: center; 
}

#reader { 
    width: 100%; 
    border-radius: 24px; 
    overflow: hidden; 
    border: 2px solid var(--glass-border); 
    background: black; 
    box-shadow: 0 0 30px rgba(0, 219, 222, 0.2); 
}

.kamera-mod-baslik {
    text-align: center;
    color: white;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 15px;
}

/* SONUÇ MESAJI */
#islem-sonucu { 
    margin-top: 20px; 
    padding: 18px; 
    border-radius: 16px; 
    text-align: center; 
    font-weight: bold; 
    font-size: 16px; 
    display: none; 
}

.basari { 
    background: rgba(0, 230, 118, 0.15); 
    color: var(--basari); 
    border: 1px solid var(--basari); 
    text-shadow: 0 0 10px var(--basari); 
}

.hata { 
    background: rgba(252, 0, 255, 0.15); 
    color: var(--vurgu-mor-koyu); 
    border: 1px solid var(--vurgu-mor-koyu); 
}

/* BUTONLAR VE INPUTLAR */
.btn-modern { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 100%; 
    padding: 18px; 
    border-radius: 50px; 
    border: none; 
    font-size: 16px; 
    font-weight: 800; 
    background: var(--metin-ana); 
    color: #121212; 
    cursor: pointer; 
    transition: transform 0.2s; 
    text-decoration: none; 
}

.btn-modern:active { 
    transform: scale(0.96); 
}

.btn-neon { 
    background: var(--neon-gradient); 
    color: white; 
    box-shadow: 0 5px 15px rgba(252, 0, 255, 0.2); 
}

.btn-kapat { 
    position: absolute; 
    top: 30px; 
    right: 20px; 
    background: rgba(255,255,255,0.1); 
    color: white; 
    border: none; 
    padding: 10px 20px; 
    border-radius: 50px; 
    font-weight: bold; 
    cursor: pointer; 
    z-index: 1001; 
}

input { 
    width: 100%; 
    padding: 18px; 
    font-size: 16px; 
    font-weight: 600; 
    border: 1px solid var(--glass-border); 
    border-radius: 16px; 
    margin-bottom: 15px; 
    background: var(--input-bg); 
    color: var(--metin-ana); 
    outline: none; 
    text-align: center;
}

input:focus { 
    border-color: var(--vurgu-mor); 
}

/* ALT MENÜ */
.alt-menu { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 85px; 
    background: var(--menu-bg); 
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px); 
    border-top: 1px solid var(--glass-border); 
    display: none; 
    justify-content: space-around; 
    align-items: center; 
    padding-bottom: 15px; 
    z-index: 100; 
}

.menu-item { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 4px; 
    color: var(--metin-ikincil); 
    font-size: 12px; 
    font-weight: 600; 
    text-decoration: none; 
    width: 80px; 
    transition: color 0.3s; 
}

.menu-item.aktif { 
    color: var(--vurgu-mor); 
}

.menu-ikon { 
    font-size: 24px; 
    margin-bottom: 2px; 
}

/* SEKMELER */
.sekme { 
    display: none; 
    animation: fadeIn 0.4s; 
}

.sekme.aktif-sekme { 
    display: block; 
}

@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}

/* İSTATİSTİK GRID */
.istatistik-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 15px; 
    margin-top: 20px; 
}

.istatistik-kutu { 
    background: rgba(0,0,0,0.3); 
    padding: 20px; 
    border-radius: 20px; 
    text-align: center; 
    border: 1px solid var(--glass-border); 
}

.istatistik-kutu.genis { 
    grid-column: span 2; 
    background: rgba(255,255,255,0.03); 
}

.ist-sayi { 
    font-size: 36px; 
    font-weight: 800; 
    color: white; 
    margin: 10px 0 5px 0; 
}

.ist-baslik { 
    font-size: 11px; 
    color: var(--metin-ikincil); 
    text-transform: uppercase; 
    letter-spacing: 1.5px; 
    font-weight: 600; 
}

/* MODAL (PIN EKRANI) */
.modal-arkaplan { 
    display: none; 
    position: fixed; 
    z-index: 999; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.8); 
    backdrop-filter: blur(10px); 
}

.modal-icerik { 
    background: var(--glass-bg); 
    padding: 30px; 
    border-radius: 32px; 
    width: 85%; 
    max-width: 320px; 
    text-align: center; 
    border: 1px solid var(--glass-border); 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}