* { box-sizing: border-box; }
body { font-family: -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; background: #f4f6f9; color: #1f2937; }
header { background: #1f4e78; color: #fff; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; }
header h1 { font-size: 18px; margin: 0; }
.header-actions { display: flex; gap: 10px; align-items: center; }
.badge { padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.badge.dry { background: #fbbf24; color: #1f2937; }
.badge.live { background: #16a34a; color: #fff; }
button { cursor: pointer; border: 1px solid #cbd5e1; background: #fff; padding: 7px 12px; border-radius: 6px; font-size: 13px; }
button:hover { background: #f1f5f9; }
button.primary { background: #1f4e78; color: #fff; border-color: #1f4e78; }
button.primary:disabled { opacity: .5; cursor: not-allowed; }
button.danger { background: #dc2626; color: #fff; border-color: #dc2626; }
.logout { color: #cbd5e1; text-decoration: none; font-size: 13px; margin-left: 6px; }

.tabs { display: flex; gap: 4px; padding: 12px 20px 0; background: #f4f6f9; }
.tab { border-bottom: none; border-radius: 6px 6px 0 0; }
.tab.active { background: #fff; font-weight: 600; border-bottom: 2px solid #1f4e78; }
.tab-panel { display: none; padding: 16px 20px; }
.tab-panel.active { display: block; }

.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar input, .toolbar select { padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px; }
.toolbar #q { width: 280px; }
.spacer { flex: 1; }
.hint { color: #6b7280; font-size: 12px; }

/* Ürün (stok kodu / kart) bazlı liste */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.product { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px; display: flex; gap: 10px; }
.product .thumb { width: 72px; height: 96px; object-fit: cover; border-radius: 6px; background: #f1f5f9; flex-shrink: 0; }
.product .thumb.noimg { display:flex; }
.pbody { flex: 1; min-width: 0; }
.phead { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.phead .sk { font-weight: 700; font-family: monospace; font-size: 14px; color: #1f2937; }
.phead .renk { color: #6b7280; font-size: 13px; }
.phead .ptoplam { margin-left: auto; font-size: 12px; color: #16a34a; font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { border: 1px solid #cbd5e1; border-radius: 6px; padding: 3px 8px; font-size: 12px; cursor: pointer; display: inline-flex; gap: 5px; align-items: center; background: #fff; }
.chip:hover { border-color: #1f4e78; }
.chip.sel { border-color: #1f4e78; background: #eff6ff; box-shadow: 0 0 0 2px #1f4e78 inset; }
.chip b { color: #16a34a; }
.chip.zero b { color: #9ca3af; }

/* Görselli üye satırları (öneri & grup) */
.omembers { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.omember { display: flex; align-items: center; gap: 8px; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 8px; padding: 6px 10px; }
.omember.uyusmaz { border-color: #f59e0b; background: #fffbeb; }
.omember.pasif { opacity: .45; }
.omember .thumb-sm { width: 40px; height: 54px; object-fit: cover; border-radius: 4px; background: #e5e7eb; }
.omember .bc { font-weight: 700; font-family: monospace; font-size: 13px; }
.omember .meta { color: #6b7280; font-size: 11px; }
.omember .stok { font-weight: 800; font-size: 15px; }
.omember .stok.pos { color: #16a34a; } .omember .stok.zero { color: #9ca3af; }
.vs { display: flex; align-items: center; color: #9ca3af; font-weight: 700; }
.lazyimg { transition: opacity .2s; }

.group, .oneri { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; margin-bottom: 10px; }
.group h3, .oneri h3 { margin: 0 0 8px; font-size: 14px; }
.members { display: flex; gap: 8px; flex-wrap: wrap; }
.member { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 6px; padding: 6px 10px; font-size: 12px; font-family: monospace; }
.member.uyusmaz { border-color: #f59e0b; background: #fffbeb; }
.member.pasif { opacity: .5; text-decoration: line-through; }
.group-actions { margin-top: 10px; display: flex; gap: 8px; align-items: center; }
.uyusmaz-flag { color: #b45309; font-size: 12px; font-weight: 600; }
.guven-yuksek { border-left: 4px solid #16a34a; }
.guven-orta { border-left: 4px solid #f59e0b; }
.guven-incele { border-left: 4px solid #9ca3af; }
select.mini { padding: 4px 6px; font-size: 12px; }

.ty-ozet { display:flex; gap:18px; flex-wrap:wrap; background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:12px 16px; margin-bottom:12px; font-size:13px; }
.ty-ozet .vurgu b { color:#b45309; font-size:15px; }
.ty-table { width:100%; border-collapse:collapse; background:#fff; border-radius:8px; overflow:hidden; font-size:13px; }
.ty-table th { background:#1f4e78; color:#fff; padding:8px 10px; text-align:left; font-weight:600; }
.ty-table td { padding:6px 10px; border-bottom:1px solid #f1f5f9; }
.ty-table td.mono { font-family:monospace; }
.ty-table td.num { text-align:right; font-weight:600; }
.ty-table td.art { color:#16a34a; } .ty-table td.azal { color:#dc2626; }

#log-list .logrow { background:#fff; border:1px solid #e5e7eb; border-radius:6px; padding:8px 10px; margin-bottom:6px; font-size:12px; }
#log-list .logrow .t { color:#6b7280; }

#toast { position: fixed; bottom: 20px; right: 20px; background: #1f2937; color: #fff; padding: 12px 18px; border-radius: 8px; opacity: 0; transition: .3s; pointer-events: none; }
#toast.show { opacity: 1; }

/* Açıklama kutusu */
.aciklama { background:#eff6ff; border:1px solid #bfdbfe; border-radius:8px; padding:10px 14px; margin-bottom:14px; font-size:13px; color:#1e3a5f; line-height:1.5; }
.aciklama code { background:#dbeafe; padding:1px 5px; border-radius:4px; font-family:monospace; }
.rozet { padding:2px 8px; border-radius:10px; font-size:11px; font-weight:700; color:#fff; }
.rozet.yuksek { background:#16a34a; } .rozet.orta { background:#f59e0b; } .rozet.incele { background:#9ca3af; }

/* Eşleştir - ürün seçilebilir kart */
.product.selectable { cursor:pointer; transition:.1s; }
.product.selectable:hover { border-color:#1f4e78; }
.product.insepet { border-color:#16a34a; background:#f0fdf4; box-shadow:0 0 0 2px #16a34a inset; }
.onek-rozet { font-size:11px; font-weight:700; padding:1px 6px; border-radius:4px; background:#e5e7eb; }
.onek-rozet.erkek { background:#dbeafe; color:#1e40af; } .onek-rozet.kadin { background:#fce7f3; color:#9d174d; }
.urun-adi { font-size:12px; color:#374151; margin:3px 0; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.taraf-ad { font-size:10px; color:#6b7280; max-width:80px; text-align:center; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.grup-ad { font-weight:400; color:#6b7280; font-size:13px; }
.omember .meta.ad { color:#9ca3af; max-width:140px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bedenler-str { color:#6b7280; font-size:12px; margin:4px 0; }
.sec-btn { display:inline-block; font-size:12px; font-weight:600; color:#1f4e78; margin-top:4px; }
.product.insepet .sec-btn { color:#16a34a; }

/* Seçim sepeti (sticky) */
.sepet { position:sticky; bottom:0; background:#fff; border:2px solid #16a34a; border-radius:10px 10px 0 0; padding:12px 16px; margin-top:16px; box-shadow:0 -4px 16px rgba(0,0,0,.08); }
.sepet.gizli { display:none; }
.sepet-bilgi { font-size:13px; margin-bottom:8px; }
.sepet-urunler { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.sepet-urun { display:flex; align-items:center; gap:6px; background:#f8fafc; border:1px solid #e5e7eb; border-radius:8px; padding:5px 8px; font-size:12px; }
.sepet-urun .thumb-xs { width:32px; height:42px; object-fit:cover; border-radius:4px; }
.sepet-urun .kaldir { cursor:pointer; color:#dc2626; font-weight:700; font-size:16px; margin-left:4px; }
.mini-onek { font-size:10px; background:#e5e7eb; padding:0 4px; border-radius:3px; }
.sepet-aksiyon { display:flex; gap:8px; justify-content:flex-end; }

/* Öneri kartı */
.oneri-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.oneri-head b { font-size:15px; }
.oneri-taraflar { display:flex; align-items:center; gap:14px; margin-bottom:10px; flex-wrap:wrap; }
.taraf { display:flex; flex-direction:column; align-items:center; gap:4px; }
.taraf .thumb { width:70px; height:92px; object-fit:cover; border-radius:6px; background:#f1f5f9; }
.taraf .sk { font-family:monospace; font-weight:700; font-size:13px; }
.vs-buyuk { font-size:22px; color:#16a34a; font-weight:700; }
.beden-tablo { width:100%; border-collapse:collapse; font-size:13px; }
.beden-tablo th { background:#f1f5f9; padding:6px 10px; text-align:left; font-size:12px; }
.beden-tablo td { padding:5px 10px; border-top:1px solid #f1f5f9; }
.beden-tablo td.bd { font-weight:700; }
.beden-tablo td .bc { font-family:monospace; color:#6b7280; font-size:11px; display:block; }
.beden-tablo td b { font-size:14px; }
.beden-tablo td.pos b { color:#16a34a; } .beden-tablo td.zero b { color:#9ca3af; }
.beden-tablo td.bos { color:#d1d5db; }
.beden-tablo tr.fark { background:#fffbeb; }

.login-body { display: flex; align-items: center; justify-content: center; height: 100vh; }
.login-box { background: #fff; padding: 30px; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,.1); display: flex; flex-direction: column; gap: 12px; width: 300px; }
.login-box h1 { margin: 0 0 10px; text-align: center; color: #1f4e78; }
.login-box input { padding: 10px; border: 1px solid #cbd5e1; border-radius: 6px; }
.login-box button { background: #1f4e78; color: #fff; border: none; padding: 10px; border-radius: 6px; }
.login-box .hata { color: #dc2626; font-size: 13px; text-align: center; margin: 0; }