* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: #2f6b3a; color: #f2f4f7;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 15px; user-select: none; -webkit-user-select: none; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; border: 0; border-radius: 10px; background: #33475c; padding: 8px 12px; cursor: pointer; touch-action: manipulation; }
button:active { transform: scale(.96); }
button:disabled { opacity: .45; cursor: default; }
button.primary, button.ok { background: #2e9e5b; }
button.warn { background: #b5483f; }
input { font: inherit; border: 2px solid #3b5068; border-radius: 10px; background: #14202c; color: #fff; padding: 10px 12px; width: 100%; user-select: text; -webkit-user-select: text; }
input:focus { outline: none; border-color: #4fc3f7; }

#cv { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; }

/* Giriş */
#lobby { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(circle at 50% 20%, #2c5d7c, #14202c); z-index: 50; overflow: auto; }
.card { width: 100%; max-width: 380px; background: #1b2a3a; border-radius: 18px; padding: 22px; box-shadow: 0 12px 40px rgba(0,0,0,.45); }
.logo { font-size: 54px; text-align: center; line-height: 1; }
h1 { margin: 6px 0 2px; font-size: 24px; text-align: center; }
.sub { margin: 0 0 16px; text-align: center; color: #9db2c7; font-size: 14px; }
.card label { display: block; font-size: 13px; color: #9db2c7; margin-bottom: 4px; }
.big { width: 100%; padding: 13px; font-size: 16px; font-weight: 600; margin-top: 12px; }
.ghost { background: transparent; border: 2px dashed #3b5068; }
.or { text-align: center; color: #7f95ab; font-size: 13px; margin: 16px 0 0; }
.joinrow { display: flex; gap: 8px; align-items: stretch; }
.joinrow input { margin-top: 12px; text-transform: uppercase; letter-spacing: 4px; font-weight: 700; text-align: center; }
.joinrow button { width: auto; flex: 0 0 96px; }
#lobbyMsg { min-height: 20px; margin-top: 12px; text-align: center; color: #ffb4a8; font-size: 14px; }

/* Üst bilgi */
#hud { position: fixed; top: calc(6px + env(safe-area-inset-top)); left: calc(6px + env(safe-area-inset-left)); right: calc(6px + env(safe-area-inset-right));
  display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; z-index: 10; }
.pill { background: rgba(20,32,44,.88); border-radius: 999px; padding: 6px 12px; font-weight: 600; font-size: 14px; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
#hMoney { color: #8ef0a8; }
#hLevel i { display: block; width: 54px; height: 7px; border-radius: 4px; background: #33475c; overflow: hidden; }
#hLevel b { display: block; height: 100%; width: 0; background: #ffd54f; }
.pill.code { margin-left: auto; letter-spacing: 2px; color: #ffe082; pointer-events: auto; cursor: pointer; }

#toasts { position: fixed; top: calc(52px + env(safe-area-inset-top)); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; z-index: 40; padding: 0 10px; }
.toast { background: rgba(20,32,44,.94); padding: 8px 14px; border-radius: 12px; font-size: 14px; max-width: 520px; text-align: center; animation: pop .2s; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
@keyframes pop { from { transform: translateY(-8px); opacity: 0; } }

#modeBar, #carryBar { position: fixed; left: 50%; transform: translateX(-50%); top: calc(92px + env(safe-area-inset-top)); z-index: 12;
  background: rgba(20,32,44,.94); border-radius: 14px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; font-size: 14px; max-width: calc(100vw - 16px); box-shadow: 0 4px 14px rgba(0,0,0,.35); }
#modeBar { background: rgba(125,82,10,.96); }
#modeBar span, #carryBar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#modeBar button, #carryBar button { white-space: nowrap; padding: 7px 10px; }

#side { position: fixed; right: calc(8px + env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 9; }
#side button { width: 42px; height: 42px; padding: 0; font-size: 18px; background: rgba(20,32,44,.88); }

/* Alt menü */
#nav { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: #14202c; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); gap: 4px; z-index: 20; }
#nav button { flex: 1; background: transparent; padding: 5px 2px; font-size: 12px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
#nav button span { font-size: 22px; line-height: 1.1; }
#nav button.on { background: #2a3d52; }

/* Panel */
#panel { position: fixed; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom)); max-height: 62vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #1b2a3a; border-radius: 16px 16px 0 0; padding: 12px; z-index: 19; box-shadow: 0 -6px 24px rgba(0,0,0,.4); }
#panel h2 { margin: 0 0 10px; font-size: 17px; display: flex; align-items: center; gap: 8px; }
#panel h2 .pt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#panel h2 .pm { margin-left: auto; color: #8ef0a8; font-size: 14px; white-space: nowrap; }
#panel h2 button { margin-left: 4px; padding: 7px 12px; font-size: 14px; white-space: nowrap; flex: 0 0 auto; }
#panel h3 { margin: 14px 0 6px; font-size: 13px; color: #9db2c7; text-transform: uppercase; letter-spacing: .5px; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 4px; }
.chips button { white-space: nowrap; padding: 6px 10px; font-size: 13px; flex: 0 0 auto; }
.chips button.on { background: #2e7fb8; }
.row { display: flex; align-items: center; gap: 8px; background: #233548; border-radius: 12px; padding: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.row .em { font-size: 26px; width: 34px; text-align: center; flex: 0 0 auto; }
.row .inf { flex: 1 1 120px; min-width: 0; }
.row .inf b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .inf small { color: #9db2c7; font-size: 12px; display: block; }
.row .act { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.row .act button { font-size: 13px; line-height: 1.2; }
.price { display: flex; align-items: center; gap: 4px; }
.price button { width: 32px; height: 32px; padding: 0; font-size: 17px; font-weight: 700; }
.price span { min-width: 64px; text-align: center; font-weight: 600; font-size: 13px; line-height: 1.15; }
.price small { display: block; font-size: 11px; color: #9db2c7; font-weight: 400; }
.price .pin { width: 78px; padding: 5px 4px; text-align: center; font-weight: 700; font-size: 14px; border-width: 1px; -moz-appearance: textfield; }
.price .pin::-webkit-outer-spin-button, .price .pin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.price small.hi { color: #ffb74d; } .price small.lo { color: #81c784; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; background: #233548; border-radius: 12px; padding: 10px; }
.kv b { text-align: right; }
.kv .tot { border-top: 1px solid #3b5068; padding-top: 6px; margin-top: 2px; font-size: 16px; }
.pos { color: #8ef0a8; } .neg { color: #ff8a80; }
.note { color: #9db2c7; font-size: 13px; margin: 6px 0; line-height: 1.4; }
.url { background: #14202c; border-radius: 8px; padding: 6px 10px; margin-top: 4px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; user-select: text; -webkit-user-select: text; word-break: break-all; }
.bigcode { font-size: 30px; letter-spacing: 6px; font-weight: 800; color: #ffe082; text-align: center; user-select: text; -webkit-user-select: text; }
.chat { display: flex; gap: 6px; }
.chat button { flex: 0 0 auto; }
.btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.btns button { flex: 1 1 auto; }

@media (min-width: 900px) {
  #panel { left: auto; right: 62px; top: 56px; bottom: 76px; width: 440px; max-height: none; border-radius: 16px; }
  #nav { left: 50%; right: auto; transform: translateX(-50%); bottom: 8px; border-radius: 16px; width: 520px; }
  body { font-size: 15px; }
}
@media (max-height: 480px) {
  #panel { max-height: 70vh; bottom: calc(50px + env(safe-area-inset-bottom)); }
  #nav button span { font-size: 17px; }
  #nav button { flex-direction: row; justify-content: center; gap: 5px; }
}

/* Birinci şahıs arayüzü */
#cross { position: fixed; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.55); pointer-events: none; z-index: 8; }
#hint { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(26px + env(safe-area-inset-bottom)); background: rgba(20,32,44,.85); padding: 7px 14px; border-radius: 12px; font-size: 14px; pointer-events: none; z-index: 8; max-width: calc(100vw - 20px); text-align: center; }
#lockMsg { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(20,32,44,.9); padding: 16px 22px; border-radius: 16px; font-size: 18px; font-weight: 600; text-align: center; pointer-events: none; z-index: 9; max-width: 92vw; }
#lockMsg small { display: block; margin-top: 8px; font-size: 13px; font-weight: 400; color: #b9c8d8; }
#menuBtn { pointer-events: auto; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 700; background: rgba(20,32,44,.92); white-space: nowrap; }
#joy { position: fixed; left: calc(26px + env(safe-area-inset-left)); bottom: calc(30px + env(safe-area-inset-bottom)); width: 124px; height: 124px; border-radius: 50%; background: rgba(20,32,44,.3); border: 2px solid rgba(255,255,255,.3); z-index: 12; pointer-events: none; opacity: .55; }
#joy.on { opacity: 1; background: rgba(20,32,44,.5); }
#joyKnob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(255,255,255,.8); }
#btnA { position: fixed; right: calc(22px + env(safe-area-inset-right)); bottom: calc(34px + env(safe-area-inset-bottom)); width: 96px; height: 96px; border-radius: 50%; font-size: 17px; font-weight: 800; background: rgba(46,158,91,.9); border: 3px solid rgba(255,255,255,.55); z-index: 12; touch-action: none; }
#btnA.off { background: rgba(20,32,44,.45); border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.5); }
#btnE, #btnDrop { position: fixed; right: calc(128px + env(safe-area-inset-right)); bottom: calc(40px + env(safe-area-inset-bottom)); height: 54px; padding: 0 16px; border-radius: 27px; font-size: 15px; font-weight: 700; background: rgba(20,32,44,.8); border: 2px solid rgba(255,255,255,.35); z-index: 12; }
#btnE { bottom: calc(102px + env(safe-area-inset-bottom)); }
#btnK { position: fixed; right: calc(14px + env(safe-area-inset-right)); top: calc(96px + env(safe-area-inset-top)); height: 44px; padding: 0 14px; border-radius: 22px; font-size: 14px; font-weight: 700; background: rgba(46,158,91,.88); border: 2px solid rgba(255,255,255,.45); color: #fff; z-index: 12; }
#touchTip { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(8px + env(safe-area-inset-bottom)); font-size: 11px; color: rgba(255,255,255,.75); text-shadow: 0 1px 3px #000; pointer-events: none; z-index: 8; white-space: nowrap; }
body:not(.touch) #btnK, body:not(.touch) #joy, body:not(.touch) #btnA, body:not(.touch) #btnE, body:not(.touch) #btnDrop, body:not(.touch) #touchTip { display: none; }
.touch #hint { bottom: auto; top: calc(140px + env(safe-area-inset-top)); } .touch #menuBtn { height: 40px; padding: 0 16px; font-size: 15px; background: #2e7fb8; } .touch .row .act button, .touch .chips button, .touch #nav button { min-height: 44px; } .touch .price button { width: 42px; height: 42px; } .touch .price .pin { width: 86px; padding: 9px 4px; font-size: 16px; }
#pay { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(360px, 94vw); max-height: 92vh; overflow: auto; background: #1b2a3a; border-radius: 18px; padding: 16px; z-index: 30; box-shadow: 0 12px 40px rgba(0,0,0,.55); }
#pay h2 { margin: 0 0 10px; font-size: 18px; }
#pay .disp { background: #0d1620; border-radius: 10px; padding: 10px 12px; margin: 10px 0; font-size: 24px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; border: 2px solid transparent; }
#pay .disp.okc { border-color: #2e9e5b; color: #8ef0a8; }
#pay .pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#pay .pad button { padding: 13px 0; font-size: 18px; font-weight: 700; }
#pay .pad.cash { grid-template-columns: repeat(4, 1fr); }
#pay .pad.cash button { font-size: 15px; background: #2c5a41; }
#pay .pad.cash button[data-n] { background: #5a3a2c; }

/* Nakit ödeme: kasa çekmecesi, banknot ve madeni paralar */
#pay.cash { width: min(560px, 97vw); }
#pay .cust, #pay .tray { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 44px; padding: 8px; border-radius: 10px; background: #0d1620; margin: 8px 0; }
#pay .tray { border: 2px dashed #3b5068; min-height: 62px; }
#pay .tray.okc { border-color: #2e9e5b; border-style: solid; }
#pay .tray span { color: #7f95ab; font-size: 13px; }
#pay .mlbl { font-size: 14px; margin-top: 10px; } #pay .mlbl small { color: #7f95ab; }
#pay .drawer { background: linear-gradient(#2b2f36, #1c1f24); border: 3px solid #4a515c; border-radius: 12px; padding: 10px; box-shadow: inset 0 4px 14px rgba(0,0,0,.6); }
#pay .drawer > div { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
#pay .drawer > div + div { margin-top: 10px; padding-top: 10px; border-top: 2px solid #3a4049; }
.bn { width: 104px; height: 50px; padding: 0 8px; border-radius: 5px; border: 2px solid rgba(255,255,255,.6); color: #fff; font-weight: 900; display: inline-flex; align-items: center; justify-content: space-between;
  box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 0 0 2px rgba(0,0,0,.12); text-shadow: 0 1px 2px rgba(0,0,0,.55);
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.09) 0 3px, transparent 3px 7px), repeating-linear-gradient(-45deg, rgba(0,0,0,.06) 0 2px, transparent 2px 6px), linear-gradient(120deg, var(--a), var(--b)); }
.bn b { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255,255,255,.75); display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.2); font-size: 15px; }
.bn i { font-style: normal; font-size: 16px; }
.n200 { --a: #c065a8; --b: #7b2f6b; } .n100 { --a: #4a8fd6; --b: #234e86; } .n50 { --a: #e8954a; --b: #a8571a; } .n20 { --a: #58b866; --b: #2a6e35; } .n10 { --a: #db5555; --b: #8f2525; } .n5 { --a: #c09a62; --b: #75572c; }
.coin { width: 48px; height: 48px; padding: 0; border-radius: 50%; font-weight: 900; font-size: 15px; line-height: 1; color: #3a2c00; border: 3px solid #b8901f;
  background: radial-gradient(circle at 35% 30%, #fff3b0, #e0b63a 60%, #b8901f); box-shadow: 0 2px 4px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.25); }
.coin small { display: block; font-size: 9px; font-weight: 700; }
.c100 { width: 56px; height: 56px; color: #2b2b2b; border-color: #a8841c; background: radial-gradient(circle, #f1f1f1 0 50%, #e2ba3f 53% 100%); }
.c50 { width: 52px; height: 52px; border-color: #9a9a9a; background: radial-gradient(circle, #e7bd43 0 50%, #e4e4e4 53% 100%); }
.c25 { width: 46px; height: 46px; } .c10 { width: 42px; height: 42px; font-size: 13px; } .c5 { width: 38px; height: 38px; font-size: 12px; }
.bn.sm, .coin.sm { zoom: .72; }
.bn:disabled, .coin:disabled { opacity: 1; cursor: default; }
#pay.cash { max-height: 97vh; padding: 12px; }
#pay.cash h2 { margin-bottom: 6px; font-size: 16px; }
#pay.cash .kv { padding: 6px 10px; font-size: 14px; gap: 2px 12px; }
#pay.cash .cust, #pay.cash .tray { margin: 6px 0; padding: 6px; }
#pay.cash .mlbl { margin-top: 6px; }

/* Bir panel veya ödeme ekranı açıkken oyun içi kontrolleri gizle: üst üste binmesin */
body.ui-open #btnK, body.pay-open #btnK, body.ui-open #joy, body.ui-open #btnA, body.ui-open #btnE, body.ui-open #btnDrop, body.ui-open #touchTip, body.ui-open #hint, body.ui-open #cross, body.ui-open #carryBar, body.ui-open #modeBar, body.ui-open #lockMsg,
body.pay-open #joy, body.pay-open #btnA, body.pay-open #btnE, body.pay-open #btnDrop, body.pay-open #touchTip, body.pay-open #hint, body.pay-open #cross, body.pay-open #carryBar, body.pay-open #lockMsg { display: none !important; }
.touch #toasts { top: calc(146px + env(safe-area-inset-top)); }
.touch #hint { top: calc(200px + env(safe-area-inset-top)); }
/* Telefon ve küçük ekranlar: panel tam ekran açılır, sekmeler altta sabit kalır */
@media (max-width: 899px), (max-height: 520px) {
  #panel { left: 0; right: 0; top: 0; bottom: 0; width: auto; max-height: none; border-radius: 0; z-index: 25; box-shadow: none;
    padding: 0 calc(12px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left)); }
  body.pc-open #panel { bottom: calc(58px + env(safe-area-inset-bottom)); padding-bottom: 12px; }
  #panel h2 { position: sticky; top: 0; z-index: 3; background: #1b2a3a; margin: 0 0 8px; padding: calc(10px + env(safe-area-inset-top)) 0 10px; border-bottom: 1px solid #2c4159; }
  #nav { left: 0; right: 0; transform: none; width: auto; bottom: 0; border-radius: 0; z-index: 26; }
  body.ui-open #hud { display: none; }
  body.ui-open #toasts { top: calc(58px + env(safe-area-inset-top)); z-index: 45; }
  .row .act { width: 100%; justify-content: flex-end; }
}
@media (max-height: 520px) { body.pc-open #panel { bottom: calc(48px + env(safe-area-inset-bottom)); } }

/* Rol seçimi, özel gün rozeti, pazarlama */
select { font: inherit; width: 100%; border: 2px solid #3b5068; border-radius: 10px; background: #14202c; color: #fff; padding: 10px 12px; }
.row select { margin-top: 6px; padding: 8px 10px; }
.pill.ev { background: rgba(125,82,10,.92); color: #ffe9a8; }
.inf small.pos { color: #8ef0a8; } .inf small.neg { color: #ff8a80; }
/* El terminali: canlı kamera haritası */
body.term #cv { display: none; }
body.term { background: #101a24; }
#term { position: fixed; left: 0; right: 0; top: calc(88px + env(safe-area-inset-top)); bottom: calc(60px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; z-index: 5; }
#alerts { display: flex; gap: 6px; overflow-x: auto; padding: 4px 8px 8px; flex: 0 0 auto; }
#alerts button { flex: 0 0 auto; font-size: 13px; padding: 8px 10px; background: #2a3d52; white-space: nowrap; }
#alerts span { color: #9db2c7; font-size: 13px; padding: 8px 4px; }
#map { flex: 1 1 auto; width: 100%; min-height: 0; touch-action: none; }
@media (min-width: 900px) { body.term #nav { left: 50%; right: auto; } #term { top: 56px; bottom: 76px; } #nav { width: 620px; } }

/* Önemli bildirim afişi */
#banner { position: fixed; left: 50%; top: 22%; transform: translate(-50%, -50%); width: min(620px, 92vw); padding: 18px 22px; border-radius: 18px; z-index: 60; pointer-events: none;
  background: linear-gradient(135deg, #f39c12, #d35400); color: #fff; font-size: 20px; font-weight: 800; line-height: 1.35; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.45);
  border: 3px solid rgba(255,255,255,.85); box-shadow: 0 10px 40px rgba(0,0,0,.6), 0 0 0 6px rgba(243,156,18,.3); animation: bannerIn 6.2s both; }
#banner.warn { background: linear-gradient(135deg, #e53935, #8e1b1b); box-shadow: 0 10px 40px rgba(0,0,0,.6), 0 0 0 6px rgba(229,57,53,.3); animation-duration: 3.2s; }
@keyframes bannerIn { 0% { opacity: 0; transform: translate(-50%, -80%) scale(.8); } 5% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } 9%, 15% { transform: translate(-50%, -50%) scale(1); } 12% { transform: translate(-50%, -50%) scale(1.04); } 92% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) scale(.96); } }
@media (max-width: 600px) { #banner { font-size: 16px; padding: 14px 16px; top: 26%; } }
.pill.ev.hot { background: #c62828; color: #fff; animation: hot 1s infinite alternate; }
@keyframes hot { to { background: #ff7043; box-shadow: 0 0 12px rgba(255,112,67,.8); } }
/* Eldeki koli kartı */
#carryBar { align-items: center; gap: 12px; padding: 10px 14px; border: 2px solid #4fc3f7; border-radius: 16px; background: rgba(15,26,38,.95); top: auto; bottom: calc(22px + env(safe-area-inset-bottom)); left: calc(18px + env(safe-area-inset-left)); transform: none; max-width: min(430px, calc(100vw - 36px)); }
.touch #carryBar { bottom: auto; top: calc(96px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); }
#carryIco { font-size: 44px; line-height: 1; flex: 0 0 auto; }
#carryInf { min-width: 0; flex: 1 1 auto; }
#carryName { display: block; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#carryBar .cq { display: flex; align-items: center; gap: 8px; margin: 4px 0 2px; font-size: 14px; font-weight: 700; white-space: nowrap; }
#carryBar .cq i { display: block; width: 90px; height: 9px; border-radius: 5px; background: #33475c; overflow: hidden; flex: 0 0 auto; }
#carryBar .cq i b { display: block; height: 100%; background: #4fc3f7; transition: width .15s; }
#carryTo { color: #9db2c7; font-size: 12px; white-space: normal; }
#carryBar .cbtn { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
#carryBar .cbtn button { padding: 7px 10px; font-size: 13px; }
#carryBar.empty { border-color: #e53935; background: rgba(70,14,14,.96); animation: emptyBlink .7s infinite alternate; }
#carryBar.empty #carryName { color: #ff8a80; }
@keyframes emptyBlink { to { box-shadow: 0 0 0 5px rgba(229,57,53,.45); } }
#carryBar.pulse #carryIco { animation: cpulse .25s; }
@keyframes cpulse { 50% { transform: scale(1.3); } }
body:not(.touch) #hint { bottom: calc(26px + env(safe-area-inset-bottom)); }
#carryBar.empty .cq i { display: none; }
#carryBar.empty .cq { white-space: normal; }

/* Giriş: kayıtlı market listesi */
#markets .mk { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; margin-top: 8px; padding: 10px 12px; text-align: left; background: #233548; border: 1px solid #3b5068; }
#markets .mk b { font-size: 17px; letter-spacing: 3px; color: #ffe082; }
#markets .mk span { font-size: 12px; color: #9db2c7; }

/* Görünüm seçenekleri */
.sws { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }
.sw { width: 38px; height: 38px; padding: 0; border-radius: 10px; border: 3px solid rgba(255,255,255,.25); }
.sw.on { border-color: #fff; box-shadow: 0 0 0 3px #4fc3f7; }
.row input.nm { margin-top: 6px; padding: 8px 10px; }
#markets .mk b i { font-style: normal; letter-spacing: 0; font-size: 14px; color: #fff; margin-left: 6px; }

/* Ürünler ve Sipariş: kaydırmasız düzen */
#panel { scrollbar-width: thin; scrollbar-color: #3b5068 transparent; }
.cats { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.cats button { position: relative; width: 44px; height: 40px; padding: 0; font-size: 20px; }
.cats button.on { background: #2e7fb8; box-shadow: inset 0 0 0 2px #fff; }
.cats button.out::after { content: ''; position: absolute; right: 4px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: #ff5252; box-shadow: 0 0 0 2px #1b2a3a; }
.catinfo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 8px; font-size: 13px; color: #9db2c7; }
.catinfo b { color: #fff; font-size: 16px; }
.catinfo .bulk { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.catinfo .bulk button { padding: 5px 9px; font-size: 12px; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 6px; }
.pc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; background: #233548; border-radius: 12px; padding: 6px 8px; }
.pc .pe { font-size: 24px; width: 30px; text-align: center; flex: 0 0 auto; }
.pc .pb { flex: 1 1 92px; min-width: 0; }
.pc .pb b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc .pb small { display: block; color: #9db2c7; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc .pb .neg { color: #ff8a80; font-weight: 700; }
.pc .price { margin-left: auto; }
.pc .buy { font-size: 12px; line-height: 1.15; padding: 6px 8px; min-width: 64px; flex: 0 0 auto; }
@media (min-width: 900px) { #panel[data-k=products] { width: min(1080px, calc(100vw - 150px)); } }
@media (max-width: 420px) { .pgrid { grid-template-columns: 1fr; } .cats button { width: 40px; height: 38px; } }
/* ürün kartı: masaüstünde tek satır, telefonda fiyat alt satırda */
.pgrid { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
.pc { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: center; gap: 4px 8px; }
.pc .price { margin-left: 0; }
@media (max-width: 899px) {
  .pgrid { grid-template-columns: 1fr; }
  .pc { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .pc .buy { grid-column: 3; grid-row: 1; }
  .pc .price { grid-column: 1 / -1; grid-row: 2; justify-self: end; }
}

/* ilk giriş yükleme ekranı */
#loading { position: fixed; inset: 0; z-index: 9999; background: #14202c; display: flex; align-items: center; justify-content: center; color: #fff; }
#loading[hidden] { display: none; }
#loading .lbox { width: min(340px, 80vw); text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }
#loading .logo { font-size: 56px; animation: lbob 1.2s ease-in-out infinite; }
#loading b { font-size: 20px; }
#loading small { opacity: .75; font-size: 13px; min-height: 18px; }
#loading .lbar { width: 100%; height: 10px; border-radius: 6px; background: rgba(255,255,255,.14); overflow: hidden; }
#loading .lbar i { display: block; height: 100%; width: 4%; background: #2e9e5b; border-radius: 6px; transition: width .25s; }
@keyframes lbob { 50% { transform: translateY(-8px); } }

/* üyelik: giriş ekranındaki hesap satırı ve misafir uyarısı */
#acct { margin-top: 12px; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.4; background: rgba(255,255,255,.06); text-align: left; }
#acct.guest { background: rgba(255,193,7,.12); border: 1px solid rgba(255,193,7,.35); }
#acct a { color: #ffd54f; font-weight: 700; }
.pill.guest { background: #b26a00; color: #fff; text-decoration: none; pointer-events: auto; cursor: pointer; font-size: 12.5px; }

/* ---------- kasa ödeme ekranı: telefon ve tablette kaydırmasız ----------
   Ekranı doldurur; tutar hep üstte, Onayla hep altta, tuşlar aradaki boşluğa sığacak şekilde esner.
   Yatay telefonda iki sütun: solda tutar + verilen para + Onayla, sağda tuş takımı / çekmece. */
@media (max-width: 720px), (max-height: 560px) {
  #pay, #pay.cash { left: 6px; right: 6px; top: auto; bottom: calc(6px + env(safe-area-inset-bottom)); width: auto; max-height: calc(100dvh - 12px - env(safe-area-inset-top)); transform: none; padding: 10px; border-radius: 14px;
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; grid-template-areas: 'head' 'mid' 'keys' 'btns'; gap: 8px; overflow: auto; }
  #pay[hidden] { display: none; }
  #pay .p-head { grid-area: head; } #pay .p-mid { grid-area: mid; min-width: 0; } #pay .p-keys { grid-area: keys; min-height: 0; display: flex; flex-direction: column; justify-content: center; } #pay .btns { grid-area: btns; margin: 0; }
  #pay h2, #pay.cash h2 { margin: 0 0 6px; font-size: 15px; }
  #pay .kv, #pay.cash .kv { display: grid; grid-auto-flow: column; grid-template-rows: auto auto; grid-auto-columns: 1fr; gap: 0 10px; padding: 6px 10px; margin: 0; font-size: 12px; }
  #pay .kv b { font-size: 17px; text-align: left; } #pay .kv b.tot { font-size: 21px; } #pay .kv .tot { border: 0; padding: 0; margin: 0; }
  #pay .note, #pay .cust, #pay .mlbl small { display: none; }
  #pay .disp { margin: 0; padding: 8px 12px; font-size: 26px; }
  #pay .pad { grid-auto-rows: 54px; gap: 6px; }
  #pay .pad button { padding: 0; font-size: 22px; }
  #pay .mlbl, #pay.cash .mlbl { margin: 0 0 4px; font-size: 13px; }
  #pay .tray, #pay.cash .tray { margin: 0; padding: 5px; min-height: 46px; flex-wrap: nowrap; overflow-x: auto; }
  #pay .tray { scrollbar-width: none; } #pay .tray::-webkit-scrollbar { display: none; } #pay .tray > * { flex: none; }
  #pay .drawer { padding: 8px 6px; } #pay .drawer > div { gap: 6px; } #pay .drawer > div + div { margin-top: 8px; padding-top: 8px; }
  #pay .drawer .bn { zoom: .86; }
  #pay .btns button { min-height: 50px; font-size: 17px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  #pay, #pay.cash { top: calc(6px + env(safe-area-inset-top)); max-height: none; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: 'head keys' 'mid keys' 'btns keys'; gap: 6px 10px; }
  #pay .kv, #pay.cash .kv { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: 1fr auto; gap: 1px 10px; }
  #pay .kv b { font-size: 15px; text-align: right; } #pay .kv b.tot { font-size: 19px; } #pay .kv .tot { border-top: 1px solid #3b5068; padding-top: 4px; margin-top: 2px; }
  #pay .p-mid { align-self: center; }
  #pay .pad { flex: 1; min-height: 0; grid-auto-rows: minmax(36px, 1fr); } #pay .pad button { font-size: 20px; }
  #pay .drawer .bn { zoom: .78; } #pay .drawer .coin { zoom: .88; }
  #pay .btns button { min-height: 44px; }
}

/* ---------- kartla ödeme: POS cihazı ---------- */
#pay.card { width: min(330px, 94vw); padding: 0; background: transparent; box-shadow: none; overflow: visible; }
.pos { position: relative; padding: 16px 14px 16px; border-radius: 30px 30px 26px 26px; background: linear-gradient(160deg, #3a3f47, #1f2328 60%, #17191d); border: 1px solid #4a505a;
  box-shadow: 0 24px 50px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.12), inset 0 -6px 14px rgba(0,0,0,.45); color: #e8edf2; }
.pos-top { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 10px; }
.pos-brand { font: 600 14px/1 system-ui, sans-serif; letter-spacing: .04em; color: #aeb7c2; } .pos-brand b { color: #ffc93c; }
.pos-nfc { display: inline-flex; gap: 2px; align-items: center; } .pos-nfc i { width: 7px; height: 14px; border: 2px solid #7fd0ff; border-left: 0; border-radius: 0 14px 14px 0; opacity: .5; animation: nfc 1.6s ease-in-out infinite; }
.pos-nfc i:nth-child(2) { height: 18px; animation-delay: .2s; } .pos-nfc i:nth-child(3) { height: 22px; animation-delay: .4s; }
@keyframes nfc { 50% { opacity: 1; } }
.pos-lcd { border-radius: 10px; padding: 10px 12px; background: linear-gradient(180deg, #b9d3a8, #9fbd8c); color: #1d2a17; border: 3px solid #0e1114; box-shadow: inset 0 2px 8px rgba(0,0,0,.35);
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; }
.pos-lcd .r { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pos-lcd .r + .r { margin-top: 4px; padding-top: 4px; border-top: 1px dashed rgba(29,42,23,.35); }
.pos-lcd small { font-size: 11px; font-weight: 700; letter-spacing: .04em; opacity: .75; }
.pos-lcd b { font-size: 20px; font-variant-numeric: tabular-nums; } .pos-lcd .in b { font-size: 26px; } .pos-lcd .in.empty b { opacity: .45; }
.pos-lcd .blink { margin-top: 4px; font-size: 11px; opacity: .7; animation: nfc 1.4s steps(2) infinite; }
.pos-slot { height: 6px; margin: 10px 30px 4px; border-radius: 4px; background: #0b0d10; box-shadow: inset 0 2px 3px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.08); }
.pos-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.pos-keys button { min-height: 50px; border: 0; border-radius: 12px; background: linear-gradient(#f4f5f7, #d6d9de); color: #1f2328; font: 800 21px/1 system-ui, sans-serif;
  box-shadow: 0 4px 0 #9aa0a8, 0 6px 10px rgba(0,0,0,.35); cursor: pointer; transition: transform .05s, box-shadow .05s; padding: 0; }
.pos-keys button:active { transform: translateY(3px); box-shadow: 0 1px 0 #9aa0a8, 0 2px 4px rgba(0,0,0,.35); }
.pos-keys .k-y { background: linear-gradient(#ffe27a, #f2c230); box-shadow: 0 4px 0 #b88d14, 0 6px 10px rgba(0,0,0,.35); font-size: 13px; }
.pos-keys .k-r { background: linear-gradient(#ff7d7d, #e04646); color: #fff; box-shadow: 0 4px 0 #a32626, 0 6px 10px rgba(0,0,0,.35); font-size: 14px; }
.pos-keys .k-g { grid-column: span 2; background: linear-gradient(#5fd38b, #2e9e5b); color: #fff; box-shadow: 0 4px 0 #1d6b3c, 0 6px 10px rgba(0,0,0,.35); font-size: 17px; }
@media (max-width: 720px), (max-height: 560px) {
  #pay.card { display: block; left: 50%; right: auto; width: min(340px, calc(100vw - 12px)); transform: translateX(-50%); padding: 0; background: transparent; box-shadow: none; overflow: visible; }
  .pos { padding: 12px 12px 14px; } .pos-keys { gap: 7px; } .pos-keys button { min-height: 48px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  #pay.card { top: calc(6px + env(safe-area-inset-top)); bottom: calc(6px + env(safe-area-inset-bottom)); width: min(620px, calc(100vw - 12px)); }
  .pos { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 12px; padding: 12px; border-radius: 24px; }
  .pos-face { display: flex; flex-direction: column; justify-content: center; } .pos-keys { margin: 0; grid-auto-rows: 1fr; } .pos-keys button { min-height: 0; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .pos-lcd .r { flex-direction: column; align-items: flex-start; gap: 0; } .pos-lcd b { font-size: 18px; } .pos-lcd .in b { font-size: 24px; }
}

/* ---------- rekabet (PvP) modu ---------- */
#lobby button.pvp { background: linear-gradient(135deg, #7b1fa2, #c2185b); color: #fff; margin-top: 8px; }
.pvpnote { margin: 6px 0 0; font-size: 12.5px; color: #9fb3c8; }
#pvpBar { position: fixed; left: 50%; top: calc(50px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 11; display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 14px; background: rgba(20,32,44,.88); border: 1px solid rgba(255,255,255,.14); font-size: 13.5px; font-weight: 700; white-space: nowrap; pointer-events: none; max-width: calc(100vw - 12px); }
#pvpBar .me { color: #8ef0a8; } #pvpBar .op { color: #ff9e8a; } #pvpBar i { font-style: normal; opacity: .65; font-weight: 600; }
#pvpBar.night { background: rgba(26,35,78,.92); border-color: rgba(159,180,255,.45); }
#visitBar { position: fixed; left: 50%; top: calc(92px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 12; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 14px; background: rgba(123,31,162,.92); border: 1px solid rgba(255,255,255,.3); font-size: 14px; font-weight: 700; max-width: calc(100vw - 12px); }
#visitBar button { min-height: 36px; padding: 0 12px; border-radius: 10px; background: #fff; color: #4a148c; font-weight: 800; }
#pvpCard { position: fixed; inset: 0; z-index: 35; display: grid; place-items: center; padding: 12px; background: rgba(8,14,22,.72); backdrop-filter: blur(3px); overflow: auto; }
#pvpCard[hidden], #pvpBar[hidden], #visitBar[hidden] { display: none; }
#pvpCard .pvc { width: min(480px, 100%); padding: 20px 18px 16px; border-radius: 20px; background: #1b2a3a; box-shadow: 0 24px 60px rgba(0,0,0,.6); text-align: center; }
#pvpCard h2 { margin: 0 0 4px; font-size: 22px; } #pvpCard p { margin: 0 0 10px; color: #9fb3c8; font-size: 14px; }
#pvpCard .pvcode { font: 800 34px/1 ui-monospace, Consolas, monospace; letter-spacing: .2em; color: #ffe082; margin: 8px 0 10px; }
#pvpCard .pvvs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin: 10px 0; }
#pvpCard .pvslot { padding: 10px 8px; border-radius: 14px; background: #233548; border: 2px solid transparent; min-width: 0; }
#pvpCard .pvslot.win { border-color: #ffd54f; background: #33401f; } #pvpCard .pvslot.off { opacity: .55; }
#pvpCard .pvslot b { display: block; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #pvpCard .pvslot small { color: #9fb3c8; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pvpCard .pvslot .pvsc { font-size: 26px; font-weight: 900; color: #fff; margin-top: 4px; }
#pvpCard .pvx { font-weight: 900; font-size: 18px; color: #ff80ab; }
#pvpCard .pvopt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 12px; background: #233548; margin-bottom: 6px; text-align: left; font-weight: 600; }
#pvpCard select { min-height: 36px; padding: 0 8px; border-radius: 10px; background: #14202c; color: #fff; border: 1px solid #3b5068; font-weight: 700; }
#pvpCard table { width: 100%; border-collapse: collapse; margin: 6px 0 12px; font-size: 14px; }
#pvpCard td { padding: 5px 6px; border-bottom: 1px solid #2c4055; } #pvpCard td:first-child { text-align: left; color: #9fb3c8; } #pvpCard td:nth-child(n+2) { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
#pvpCard .pvrow { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } #pvpCard .pvrow button { min-height: 46px; padding: 0 18px; flex: 1 1 140px; }
#pvpCard ul { text-align: left; margin: 4px 0 12px; padding-left: 20px; color: #c3cddb; font-size: 13.5px; } #pvpCard li { margin: 2px 0; }
body.visit #btnK, body.visit #btnE, body.visit #btnDrop, body.visit #carryBar { display: none !important; }
@media (max-width: 620px) { #pvpBar { font-size: 12px; gap: 7px; padding: 5px 9px; top: calc(86px + env(safe-area-inset-top)); } #visitBar { top: calc(124px + env(safe-area-inset-top)); font-size: 13px; } #pvpCard .pvslot .pvsc { font-size: 22px; } }

/* PvP: müşteri tercihleri */
.inf .chips { flex-wrap: wrap; overflow: visible; margin: 6px 0 2px; padding: 0; }
.chips span.chip { white-space: nowrap; padding: 5px 10px; font-size: 13px; font-weight: 600; border-radius: 999px; background: #2c4055; flex: 0 0 auto; }

.pvg { color: #8ef0a8; } .pvr { color: #ff8a80; }

/* Telefonda eldeki koli kartı (ürün bilgisi / "boş kutu" uyarısı) küçük tutulur ki ekranı kapatmasın: tek sıra, küçük yazı, yan yana düğmeler */
@media (max-width: 760px), (max-height: 540px) {
  .touch #carryBar { gap: 7px; padding: 4px 8px; border-width: 1.5px; border-radius: 11px; max-width: min(340px, calc(100vw - 16px)); top: calc(96px + env(safe-area-inset-top)); }
  .touch #carryIco { font-size: 22px; }
  .touch #carryName { font-size: 13px; line-height: 1.15; }
  .touch #carryBar .cq { margin: 1px 0 0; gap: 5px; font-size: 11px; }
  .touch #carryBar .cq i { width: 46px; height: 5px; }
  .touch #carryTo { font-size: 10px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .touch #carryBar .cbtn { flex-direction: row; gap: 4px; }
  .touch #carryBar .cbtn button { padding: 5px 7px; font-size: 11px; min-height: 0; }
  .touch #carryBar.empty { animation: none; box-shadow: 0 0 0 2px rgba(229,57,53,.4); }
  .touch #carryBar.empty .cq { display: none; }
  .touch #carryBar.empty #carryTo { display: none; }   /* düğmeler zaten ne yapılacağını söylüyor */
  .touch #hint { padding: 4px 10px; font-size: 12px; border-radius: 10px; }
}
/* dik tutulan telefonda üst çubuk üç sıraya, "Kasaya geç" düğmesi de onun altına iner; kart onların altında durur */
@media (max-width: 760px) and (orientation: portrait) { .touch #carryBar { top: calc(150px + env(safe-area-inset-top)); } }