/* ============================================================
   Ulu Sipariş — Hızlı Kasa (perakende tarzı POS)
   Market ekranı görünümü, ulu-siparis menüsü + siparişiyle çalışır.
   ============================================================ */
body.uluhk-takeover { overflow: hidden; }
body.uluhk-takeover #wpadminbar { display: none !important; }

.uluhk {
	position: fixed;
	inset: 0;
	z-index: 99990;
	display: flex;
	flex-direction: column;
	background: #0f172a;
	font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	color: #0f172a;
}
.uluhk * { box-sizing: border-box; }

/* ----- Header ----- */
.uluhk-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #1e293b; color: #fff; flex: 0 0 auto; }
.uluhk-user { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.uluhk-avatar { width: 40px; height: 40px; border-radius: 50%; background: #334155; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.uluhk-user-meta { line-height: 1.15; }
.uluhk-user-meta b { display: block; font-size: 13px; }
.uluhk-user-meta span { font-size: 11px; color: #94a3b8; }
.uluhk-hbtns { display: flex; gap: 8px; }
.uluhk-hbtn { border: 0; border-radius: 8px; padding: 9px 14px; font-weight: 700; font-size: 12px; cursor: pointer; color: #fff; display: flex; align-items: center; gap: 6px; text-decoration: none; }
.uluhk-hbtn.dark { background: #0f172a; }
.uluhk-hbtn.blue { background: #2563eb; }
.uluhk-hbtn.red  { background: #dc2626; }
.uluhk-search-wrap { flex: 1; }
.uluhk-search { width: 100%; padding: 11px 14px; border-radius: 8px; border: 2px solid #475569; background: #fff; font-size: 16px; font-weight: 600; }

/* ----- Main ----- */
.uluhk-main { flex: 1; display: flex; min-height: 0; }

/* Left: keypad + cart */
.uluhk-left { width: 430px; flex: 0 0 430px; display: flex; flex-direction: column; background: #fff; border-right: 2px solid #e2e8f0; }
.uluhk-pad { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 8px; background: #f1f5f9; }
.uluhk-key { border: 0; background: #e2e8f0; border-radius: 6px; padding: 12px 0; font-size: 16px; font-weight: 700; cursor: pointer; color: #0f172a; }
.uluhk-key:hover { background: #cbd5e1; }
.uluhk-key.enter { background: #16a34a; color: #fff; }
.uluhk-key.del { background: #f59e0b; color: #fff; }

.uluhk-cart { flex: 1; overflow-y: auto; }
.uluhk-line { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid #eef2f6; }
.uluhk-l-name { font-weight: 700; font-size: 14px; }
.uluhk-l-calc { font-size: 13px; color: #475569; }
.uluhk-l-total { font-weight: 800; font-size: 15px; color: #16a34a; text-align: right; white-space: nowrap; }
.uluhk-line.active { background: #fef9c3; }
.uluhk-l-del { grid-row: 1; grid-column: 2; margin-left: 8px; border: 0; background: transparent; color: #ef4444; cursor: pointer; font-size: 14px; }
.uluhk-cart-empty { padding: 40px 16px; text-align: center; color: #94a3b8; font-weight: 600; }
.uluhk-l-qtybox { grid-row: 3; grid-column: 1; display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; }
.uluhk-qbtn { width: 28px; height: 28px; border: 1px solid #cbd5e1; background: #f1f5f9; border-radius: 6px; font-size: 18px; font-weight: 800; line-height: 1; cursor: pointer; color: #0f172a; }
.uluhk-qbtn:hover { background: #e2e8f0; }
.uluhk-qval { min-width: 34px; text-align: center; font-weight: 700; }

.uluhk-line-paid { background: #f0fdf4; opacity: .85; }
.uluhk-line-paid .uluhk-l-total { color: #16a34a; }
.uluhk-paid-tag { display: inline-block; font-size: 10px; font-weight: 800; color: #fff; background: #16a34a; border-radius: 8px; padding: 1px 7px; vertical-align: middle; }
.uluhk-paid-tag.partial { background: #f59e0b; }
.uluhk-totals { flex: 0 0 auto; border-top: 2px solid #e2e8f0; padding: 8px 12px; font-size: 12px; color: #64748b; display: flex; justify-content: space-between; }

/* Center: categories + product grid */
.uluhk-center { flex: 1; display: flex; min-height: 0; }
.uluhk-cats { width: 200px; flex: 0 0 200px; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: min-content; gap: 4px; padding: 6px; background: #0f172a; overflow-y: auto; align-content: start; }
.uluhk-cat { border: 0; background: #f59e0b; color: #fff; font-weight: 800; font-size: 11px; padding: 14px 4px; border-radius: 4px; cursor: pointer; text-align: center; line-height: 1.1; min-height: 54px; }
.uluhk-cat:hover { filter: brightness(1.07); }
.uluhk-cat.active { outline: 3px solid #ef4444; outline-offset: -3px; }

.uluhk-grid-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #f8fafc; }
.uluhk-grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: 130px; gap: 6px; padding: 8px; overflow-y: auto; align-content: start; }
.uluhk-tile { border: 0; border-radius: 6px; overflow: hidden; cursor: pointer; position: relative; background: #16a34a; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; background-size: cover; background-position: center; min-height: 0; }
.uluhk-tile-name { background: rgba(15,23,42,.78); padding: 6px; font-weight: 800; font-size: 12px; text-transform: uppercase; line-height: 1.05; }
.uluhk-tile-price { font-size: 11px; color: #fde68a; }
.uluhk-grid-empty { padding: 40px; text-align: center; color: #94a3b8; font-weight: 600; }
.uluhk-tile-passive-on { opacity: .62; }
.uluhk-tile-passive { position: absolute; top: 4px; left: 4px; background: #64748b; color: #fff; font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 10px; text-transform: uppercase; letter-spacing: .04em; }

/* ----- Sağ bildirim paneli ----- */
.uluhk-notify { width: 300px; flex: 0 0 300px; display: flex; flex-direction: column; min-height: 0; background: #0b1220; border-left: 2px solid #1e293b; }
.uluhk-notify-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; background: #1e293b; color: #fff; font-weight: 800; font-size: 14px; }
.uluhk-notify-hist { border: 0; background: #2563eb; color: #fff; font-weight: 700; font-size: 11px; padding: 7px 10px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 5px; }
.uluhk-notify-hist:hover { filter: brightness(1.1); }
.uluhk-notify-live { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.uluhk-notify-empty { color: #64748b; text-align: center; font-size: 13px; font-weight: 600; margin: 20px 0; }

.uluhk-ntf { border-radius: 10px; padding: 10px 12px; color: #fff; border-left: 5px solid rgba(255,255,255,.35); animation: uluhkNtfIn .18s ease; }
@keyframes uluhkNtfIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.uluhk-ntf-title { font-weight: 800; font-size: 13px; line-height: 1.2; }
.uluhk-ntf-sub { font-size: 12px; opacity: .92; margin-top: 3px; }
.uluhk-ntf-waiter { font-size: 12px; font-weight: 700; margin-top: 4px; opacity: .95; }
.uluhk-ntf-time { font-size: 10px; opacity: .7; margin-top: 4px; }
.uluhk-ntf-alert  { background: #dc2626; }   /* bekleyen / yeni → kırmızı */
.uluhk-ntf-ok     { background: #16a34a; }   /* tamamlandı / teslim / ödendi → yeşil */
.uluhk-ntf-warn   { background: #f59e0b; color: #0f172a; }
.uluhk-ntf-cancel { background: #475569; }   /* iptal → gri */
.uluhk-ntf-resolved { animation: uluhkResolved 1.2s ease; box-shadow: 0 0 0 2px rgba(34,197,94,.5) inset; }
@keyframes uluhkResolved { 0% { transform: scale(1.03); } 100% { transform: scale(1); } }

/* ----- Bottom bar ----- */
.uluhk-bottom { flex: 0 0 auto; display: flex; align-items: stretch; background: #1e293b; }
.uluhk-total-box { flex: 0 0 auto; min-width: 230px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 22px; color: #fff; }
.uluhk-total-amt { font-size: 32px; font-weight: 800; }
.uluhk-actions { flex: 1; display: flex; }
.uluhk-act { flex: 1; border: 0; color: #fff; font-weight: 800; font-size: 13px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 6px; border-left: 1px solid rgba(255,255,255,.08); }
.uluhk-act i { font-size: 18px; }
.uluhk-act.collect { background: #16a34a; }
.uluhk-act.clear { background: #dc2626; }
.uluhk-act.neutral { background: #334155; }
.uluhk-act.ops { background: #2563eb; }
.uluhk-act:hover { filter: brightness(1.08); }

/* ----- Modal ----- */
.uluhk-modal { position: fixed; inset: 0; z-index: 99995; background: rgba(15,23,42,.6); display: none; align-items: center; justify-content: center; }
.uluhk-modal.open { display: flex; }
.uluhk-modal-card { background: #fff; border-radius: 14px; width: min(440px, 94vw); padding: 22px; }
.uluhk-modal-card h2 { margin: 0 0 14px; font-size: 20px; }
.uluhk-pay-grand { font-size: 30px; font-weight: 800; text-align: center; margin: 4px 0 14px; color: #16a34a; }
.uluhk-pay-methods { display: flex; gap: 8px; margin-bottom: 14px; }
.uluhk-pm { flex: 1; border: 2px solid #e2e8f0; background: #fff; border-radius: 10px; padding: 12px; font-weight: 700; cursor: pointer; }
.uluhk-pm.active { border-color: #16a34a; background: #f0fdf4; color: #16a34a; }
.uluhk-pay-row { display: flex; align-items: center; justify-content: space-between; margin: 8px 0; }
.uluhk-pay-row input { width: 160px; padding: 10px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 16px; text-align: right; }
.uluhk-pay-change { font-size: 20px; font-weight: 800; }
.uluhk-pay-remain { color: #dc2626; }   /* Kalan tutar — dikkat çeksin (kırmızı) */
.uluhk-pay-sel { color: #16a34a; font-size: 40px; font-weight: 800; line-height: 1.1; }   /* Seçili (ödenecek) tutar — yeşil ve büyük */
.uluhk-pay-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; max-height: 30vh; overflow: auto; }
.uluhk-pay-item { display: flex; align-items: center; gap: 10px; background: #f1f5f9; border-radius: 8px; padding: 8px 12px; }
.uluhk-pay-item span { font-weight: 700; color: #475569; }
.uluhk-pay-item b { margin-left: auto; font-size: 15px; }
.uluhk-pay-rm { border: 0; background: #fee2e2; color: #dc2626; width: 26px; height: 26px; border-radius: 6px; font-size: 16px; font-weight: 800; cursor: pointer; line-height: 1; }
.uluhk-pay-rm:hover { background: #fecaca; }
.uluhk-pick-hint { font-size: 12px; color: #64748b; margin: 2px 0 8px; }
.uluhk-pay-picks { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; max-height: 34vh; overflow: auto; }
.uluhk-pp { display: flex; align-items: center; gap: 10px; background: #f1f5f9; border: 2px solid #e2e8f0; border-radius: 8px; padding: 9px 12px; cursor: pointer; }
.uluhk-pp.on { border-color: #16a34a; background: #f0fdf4; }
.uluhk-pp input { width: 18px; height: 18px; }
.uluhk-pp-n { font-weight: 700; }
.uluhk-pp-a { margin-left: auto; font-weight: 800; }
.uluhk-pp.paid { opacity: .7; cursor: default; border-style: dashed; }
.uluhk-pp-ok { color: #16a34a; font-weight: 800; }
.uluhk-pp-n small { color: #94a3b8; font-weight: 600; }
.uluhk-pp-step { display: inline-flex; align-items: center; gap: 6px; }
.uluhk-pp-step button { width: 26px; height: 26px; border: 1px solid #cbd5e1; background: #fff; border-radius: 6px; font-size: 17px; font-weight: 800; line-height: 1; cursor: pointer; color: #0f172a; }
.uluhk-pp-step button:hover { background: #e2e8f0; }
.uluhk-pp-step span { min-width: 38px; text-align: center; font-weight: 800; }
.uluhk-modal-btns { display: flex; gap: 10px; margin-top: 16px; }
.uluhk-mbtn { flex: 1; border: 0; border-radius: 10px; padding: 14px; font-weight: 800; font-size: 15px; cursor: pointer; }
.uluhk-mbtn.ok { background: #16a34a; color: #fff; }
.uluhk-mbtn.cancel { background: #e2e8f0; color: #0f172a; }
.uluhk-receipt { font-family: monospace; font-size: 13px; white-space: pre-wrap; background: #f8fafc; border-radius: 8px; padding: 14px; max-height: 50vh; overflow: auto; }

/* ----- Toast ----- */
.uluhk-toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); background: #0f172a; color: #fff; padding: 12px 20px; border-radius: 10px; font-weight: 700; z-index: 99996; opacity: 0; transition: opacity .2s; pointer-events: none; }
.uluhk-toast.show { opacity: 1; }
.uluhk-toast.err { background: #dc2626; }

/* ----- Responsive ----- */
@media (max-width: 980px) {
	.uluhk-main { flex-direction: column; }
	.uluhk-left { width: 100%; flex: 0 0 auto; max-height: 42vh; border-right: 0; border-bottom: 2px solid #e2e8f0; }
	.uluhk-cats { width: 120px; flex: 0 0 120px; grid-template-columns: 1fr; }
	.uluhk-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); grid-auto-rows: 100px; }
	.uluhk-total-box { min-width: 140px; padding: 0 10px; }
	.uluhk-total-amt { font-size: 22px; }
	.uluhk-act { font-size: 11px; }
	.uluhk-act span { display: none; }
	.uluhk-notify { width: 100%; flex: 0 0 auto; max-height: 26vh; border-left: 0; border-top: 2px solid #1e293b; }
	.uluhk-notify-live { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; }
	.uluhk-ntf { min-width: 220px; }
}