/* =========================================================
   Hızlı Satış Sistemi - Gökmavisi & Beyaz Tema
   ========================================================= */

:root {
    --gok-mavisi: #2196d8;
    --gok-mavisi-koyu: #1672ad;
    --gok-mavisi-acik: #e8f4fc;
    --gok-mavisi-orta: #6cc3ec;
    --beyaz: #ffffff;
    --gri-arka: #f4f8fb;
    --gri-metin: #5b6b7a;
    --koyu-metin: #1e2f3d;
    --kirmizi: #e0524d;
    --yesil: #2fb380;
    --sari: #f0ad4e;
    --kenar: #d8e8f3;
    --golge: 0 4px 14px rgba(33, 150, 216, 0.10);
    --radius: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--gri-arka);
    color: var(--koyu-metin);
    min-height: 100vh;
}

a { text-decoration: none; color: var(--gok-mavisi-koyu); }

/* ---------------------------------------------------------
   Üst Bar / Navigasyon
   --------------------------------------------------------- */
.ust-bar {
    background: linear-gradient(135deg, var(--gok-mavisi) 0%, var(--gok-mavisi-koyu) 100%);
    box-shadow: var(--golge);
    position: sticky;
    top: 0;
    z-index: 100;
}

.ust-bar-ic {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.logo {
    color: var(--beyaz);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.logo span { font-weight: 300; opacity: 0.85; }

.menu {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.menu a {
    color: var(--beyaz);
    padding: 8px 14px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s ease;
}

.menu a:hover, .menu a.aktif {
    background: rgba(255,255,255,0.18);
}

.kullanici-bilgi {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--beyaz);
    font-size: 14px;
}

.rol-etiket {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.rol-admin { background: var(--beyaz); color: var(--gok-mavisi-koyu); }
.rol-kasiyer { background: rgba(255,255,255,0.2); color: var(--beyaz); }

.cikis-link {
    color: var(--beyaz);
    background: rgba(255,255,255,0.15);
    padding: 6px 14px;
    border-radius: var(--radius);
    font-weight: 600;
    transition: background 0.2s ease;
}
.cikis-link:hover { background: rgba(255,255,255,0.3); }

/* ---------------------------------------------------------
   İçerik Alanı
   --------------------------------------------------------- */
.icerik {
    max-width: 1300px;
    margin: 0 auto;
    padding: 24px;
}

.sayfa-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.sayfa-baslik h1 {
    color: var(--gok-mavisi-koyu);
    font-size: 24px;
    margin: 0;
}

/* ---------------------------------------------------------
   Kartlar / Kutular
   --------------------------------------------------------- */
.kart {
    background: var(--beyaz);
    border-radius: var(--radius);
    box-shadow: var(--golge);
    border: 1px solid var(--kenar);
    padding: 20px;
    margin-bottom: 20px;
}

.istatistik-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.istatistik-kart {
    background: var(--beyaz);
    border-radius: var(--radius);
    box-shadow: var(--golge);
    border: 1px solid var(--kenar);
    padding: 18px 20px;
    border-left: 5px solid var(--gok-mavisi);
}

.istatistik-kart .deger {
    font-size: 26px;
    font-weight: 700;
    color: var(--gok-mavisi-koyu);
    margin: 4px 0;
}

.istatistik-kart .etiket {
    color: var(--gri-metin);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ---------------------------------------------------------
   Form Elemanları
   --------------------------------------------------------- */
.form-grup {
    margin-bottom: 16px;
}

.form-grup label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 14px;
    color: var(--koyu-metin);
}

.form-grup input,
.form-grup select,
.form-grup textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--kenar);
    border-radius: var(--radius);
    font-size: 14px;
    background: var(--beyaz);
    color: var(--koyu-metin);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-grup input:focus,
.form-grup select:focus,
.form-grup textarea:focus {
    outline: none;
    border-color: var(--gok-mavisi);
    box-shadow: 0 0 0 3px rgba(33, 150, 216, 0.15);
}

.form-satir {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

/* ---------------------------------------------------------
   Butonlar
   --------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: var(--radius);
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.1s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn:active { transform: scale(0.97); }

.btn-birincil {
    background: var(--gok-mavisi);
    color: var(--beyaz);
}
.btn-birincil:hover { background: var(--gok-mavisi-koyu); }

.btn-ikincil {
    background: var(--beyaz);
    color: var(--gok-mavisi-koyu);
    border: 1px solid var(--gok-mavisi-orta);
}
.btn-ikincil:hover { background: var(--gok-mavisi-acik); }

.btn-tehlike {
    background: var(--kirmizi);
    color: var(--beyaz);
}
.btn-tehlike:hover { background: #c8413c; }

.btn-basari {
    background: var(--yesil);
    color: var(--beyaz);
}
.btn-basari:hover { background: #259469; }

.btn-kucuk { padding: 6px 12px; font-size: 12px; }
.btn-tam { width: 100%; }

/* ---------------------------------------------------------
   Tablolar
   --------------------------------------------------------- */
.tablo-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

table th, table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--kenar);
}

table th {
    background: var(--gok-mavisi-acik);
    color: var(--gok-mavisi-koyu);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
}

table tr:hover td { background: #f8fcff; }

.durum-rozet {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}
.durum-aktif { background: #e6f7ef; color: var(--yesil); }
.durum-pasif { background: #fdeceb; color: var(--kirmizi); }
.durum-kritik { background: #fff5e6; color: var(--sari); }

/* ---------------------------------------------------------
   Bildirimler
   --------------------------------------------------------- */
.bildirim {
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
}
.bildirim-basari { background: #e6f7ef; color: #1c7a52; border: 1px solid #b8e8d2; }
.bildirim-hata { background: #fdeceb; color: #b8392f; border: 1px solid #f7c5c1; }
.bildirim-bilgi { background: var(--gok-mavisi-acik); color: var(--gok-mavisi-koyu); border: 1px solid var(--kenar); }

/* ---------------------------------------------------------
   Giriş (Login) Sayfası
   --------------------------------------------------------- */
.login-sayfa {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gok-mavisi-acik) 0%, #ffffff 60%);
    padding: 20px;
}

.login-kutu {
    background: var(--beyaz);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(33, 150, 216, 0.15);
    padding: 40px;
    width: 100%;
    max-width: 400px;
    border-top: 5px solid var(--gok-mavisi);
}

.login-kutu h1 {
    text-align: center;
    color: var(--gok-mavisi-koyu);
    margin-top: 0;
    font-size: 26px;
}

.login-kutu .alt-yazi {
    text-align: center;
    color: var(--gri-metin);
    font-size: 13px;
    margin-bottom: 28px;
}

.login-logo {
    text-align: center;
    font-size: 42px;
    margin-bottom: 8px;
}

/* ---------------------------------------------------------
   Satış (POS) Ekranı
   --------------------------------------------------------- */
.pos-duzen {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 900px) {
    .pos-duzen { grid-template-columns: 1fr; }
}

.urun-arama {
    margin-bottom: 16px;
}

.urun-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    max-height: 600px;
    overflow-y: auto;
    padding-right: 4px;
}

.urun-karti {
    background: var(--beyaz);
    border: 1px solid var(--kenar);
    border-radius: var(--radius);
    padding: 14px;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s ease;
    user-select: none;
    overflow: hidden;
}

.urun-karti:hover {
    border-color: var(--gok-mavisi);
    box-shadow: var(--golge);
    transform: translateY(-2px);
}

.urun-resim {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 8px;
    background: var(--gri-arka);
}

.urun-resim-bos {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--gok-mavisi-orta);
}

.urun-karti .ad {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
    color: var(--koyu-metin);
    min-height: 36px;
}

.urun-karti .fiyat {
    color: var(--gok-mavisi-koyu);
    font-weight: 700;
    font-size: 16px;
}

.urun-karti .stok-bilgi {
    font-size: 11px;
    color: var(--gri-metin);
    margin-top: 4px;
}

.urun-karti.tukendi {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Sepet */
.sepet-kutu {
    background: var(--beyaz);
    border-radius: var(--radius);
    box-shadow: var(--golge);
    border: 1px solid var(--kenar);
    padding: 20px;
    position: sticky;
    top: 90px;
}

.sepet-kutu h2 {
    margin-top: 0;
    color: var(--gok-mavisi-koyu);
    font-size: 18px;
    border-bottom: 2px solid var(--gok-mavisi-acik);
    padding-bottom: 10px;
}

.sepet-listesi {
    max-height: 320px;
    overflow-y: auto;
    margin-bottom: 16px;
}

.sepet-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--kenar);
    gap: 8px;
}

.sepet-satir .urun-bilgi {
    flex: 1;
    min-width: 0;
}

.sepet-satir .urun-bilgi .ad {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sepet-satir .urun-bilgi .fiyat-bilgi {
    font-size: 12px;
    color: var(--gri-metin);
}

.miktar-kontrol {
    display: flex;
    align-items: center;
    gap: 6px;
}

.miktar-kontrol button {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--gok-mavisi-orta);
    background: var(--gok-mavisi-acik);
    color: var(--gok-mavisi-koyu);
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
}

.miktar-kontrol button:hover { background: var(--gok-mavisi-orta); color: var(--beyaz); }

.miktar-kontrol .miktar { min-width: 24px; text-align: center; font-weight: 700; }

.sepet-sil {
    color: var(--kirmizi);
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    padding: 0 4px;
}

.sepet-bos {
    text-align: center;
    color: var(--gri-metin);
    padding: 30px 0;
    font-size: 14px;
}

.toplam-satir {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
    color: var(--gri-metin);
}

.toplam-satir.genel {
    font-size: 22px;
    font-weight: 700;
    color: var(--gok-mavisi-koyu);
    border-top: 2px solid var(--gok-mavisi-acik);
    margin-top: 8px;
    padding-top: 12px;
}

.odeme-secenekleri {
    display: flex;
    gap: 8px;
    margin: 14px 0;
}

.odeme-secenekleri label {
    flex: 1;
    text-align: center;
    padding: 10px;
    border: 1px solid var(--kenar);
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.15s ease;
}

.odeme-secenekleri input { display: none; }

.odeme-secenekleri input:checked + span,
.odeme-secenekleri label:has(input:checked) {
    background: var(--gok-mavisi);
    color: var(--beyaz);
    border-color: var(--gok-mavisi);
}

/* ---------------------------------------------------------
   Yardımcı Sınıflar
   --------------------------------------------------------- */
.metin-merkez { text-align: center; }
.metin-sag { text-align: right; }
.flex-arasi { display: flex; justify-content: space-between; align-items: center; }
.bos-durum {
    text-align: center;
    padding: 40px;
    color: var(--gri-metin);
}
.bos-durum .ikon { font-size: 48px; margin-bottom: 12px; }

/* ---------------------------------------------------------
   Alt Bilgi
   --------------------------------------------------------- */
.alt-bilgi {
    text-align: center;
    padding: 20px;
    color: var(--gri-metin);
    font-size: 13px;
}

/* ---------------------------------------------------------
   Modal (Fiş yazdırma vs.)
   --------------------------------------------------------- */
.modal-arka {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(30, 47, 61, 0.5);
    z-index: 999;
    align-items: center;
    justify-content: center;
}
.modal-arka.acik { display: flex; }

.modal-kutu {
    background: var(--beyaz);
    border-radius: var(--radius);
    padding: 24px;
    width: 100%;
    max-width: 380px;
    max-height: 90vh;
    overflow-y: auto;
}

.fis-onizleme {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    border: 1px dashed var(--kenar);
    padding: 16px;
    border-radius: var(--radius);
    background: #fafdff;
}
.fis-onizleme hr { border: none; border-top: 1px dashed var(--kenar); }
.fis-onizleme .satir { display: flex; justify-content: space-between; }
/* ---------------------------------------------------------
   Favori Sistemi — stil.css dosyasının sonuna ekleyin
   --------------------------------------------------------- */

/* Favori filtre butonu */
.filtre-btn-favori {
    background: #fff8e1;
    color: #c17f00;
    border: 1px solid #f0c040;
    font-weight: 700;
    transition: all 0.15s ease;
}

.filtre-btn-favori:hover,
.filtre-btn-favori.aktif {
    background: #f0ad4e;
    color: var(--beyaz);
    border-color: #e09a30;
}

.favori-sayac {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #c17f00;
    color: #fff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 11px;
    font-weight: 700;
    margin-left: 4px;
}

.filtre-btn-favori.aktif .favori-sayac {
    background: rgba(255,255,255,0.35);
}

/* Ürün kartı üzerindeki yıldız butonu */
.urun-karti {
    position: relative; /* favori-btn için */
}

.favori-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s ease, transform 0.1s ease;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

.favori-btn:hover {
    background: #fff8e1;
    transform: scale(1.15);
}

.favori-btn.aktif {
    background: #fff3cc;
}

/* Favori olan kartın hafif altın kenarlığı */
.urun-karti.favori {
    border-color: #f0c040;
    box-shadow: 0 0 0 2px rgba(240, 192, 64, 0.25);
}


/* ---------------------------------------------------------
   Çoklu Müşteri Sekmeleri
   --------------------------------------------------------- */
.musteri-sekmeler {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.musteri-sekme {
    flex: 1;
    min-width: 0;
    padding: 7px 6px 5px;
    border: 1px solid var(--kenar);
    border-radius: var(--radius);
    background: var(--beyaz);
    color: var(--gri-metin);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    transition: all 0.15s ease;
    line-height: 1.2;
}

.musteri-sekme:hover {
    background: var(--gok-mavisi-acik);
    border-color: var(--gok-mavisi-orta);
    color: var(--gok-mavisi-koyu);
}

.musteri-sekme.aktif {
    background: var(--gok-mavisi);
    border-color: var(--gok-mavisi-koyu);
    color: var(--beyaz);
}

.musteri-sekme.dolu {
    border-color: var(--yesil);
    color: var(--yesil);
}

.musteri-sekme.aktif.dolu {
    background: var(--gok-mavisi);
    color: var(--beyaz);
}

.musteri-tutar {
    font-size: 10px;
    font-weight: 700;
    opacity: 0.85;
}

.musteri-sekme.dolu .musteri-tutar {
    color: var(--yesil);
}

.musteri-sekme.aktif .musteri-tutar {
    color: rgba(255,255,255,0.9);
}

/* Arama kutusu büyütme */
#urunAra {
    width: 100% !important;
    padding: 16px 20px !important;
    font-size: 18px !important;
    border: 2px solid var(--gok-mavisi-orta) !important;
    border-radius: var(--radius) !important;
    background: var(--beyaz) !important;
    color: var(--koyu-metin) !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#urunAra:focus {
    outline: none !important;
    border-color: var(--gok-mavisi) !important;
    box-shadow: 0 0 0 4px rgba(33, 150, 216, 0.18) !important;
}