/* Mahalle Esnafı - sıcak İstanbul mahallesi teması */
body.oyunSayfa{background:#2a1a10}
.oAlan{overflow:hidden}
.esKap{position:absolute;inset:0;overflow:hidden;font-family:Nunito,system-ui,sans-serif;color:#3a2210;background:#c9d6c3;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.esKap button{font-family:inherit;-webkit-tap-highlight-color:transparent;cursor:pointer}
#esCv{position:absolute;left:0;top:0;display:block;pointer-events:none}
.esKaydir{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:none;z-index:1}
.esKaydir::-webkit-scrollbar{display:none}
#esBoy{width:1px}
.gizli{display:none!important}

/* üst bilgi */
.esHud{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:4px 8px;padding:8px 10px 0;pointer-events:none}
.esHud button{pointer-events:auto}
.esHudSol{display:flex;flex-direction:column;gap:3px;min-width:0}
.esPara{display:inline-flex;align-items:center;gap:7px;border:0;background:linear-gradient(180deg,#4a2b17ee,#2c180cee);border:2px solid #ffffff38;border-radius:18px;padding:4px 14px 4px 6px;box-shadow:0 4px 0 #0005,0 6px 14px #0004;max-width:100%}
.esPara b{font:800 23px/1.1 'Baloo 2',Nunito,sans-serif;color:#ffe27a;white-space:nowrap;text-shadow:0 2px 0 #8a4a0a}
.esPara.vur{animation:esVur .18s}
@keyframes esVur{50%{transform:scale(1.07)}}
.esCoin{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7c0,#ffc83a 55%,#c8861a);box-shadow:inset 0 0 0 2px #a86a10,0 2px 0 #0004;position:relative}
.esCoin::after{content:'₺';position:absolute;inset:0;display:grid;place-items:center;font:800 15px Nunito;color:#8a5208}
.esGelir{align-self:flex-start;font:800 13px Nunito;color:#3a1f0a;background:#fff3dce6;border-radius:12px;padding:2px 9px;white-space:nowrap;box-shadow:0 2px 6px #0003}
.esGelir em{font-style:normal;color:#c07a00;margin-left:4px}
.esHudSag{display:flex;gap:6px;align-items:center}
.esTakvim{display:flex;align-items:center;gap:5px;height:40px;border:0;border-radius:14px;padding:0 10px;background:linear-gradient(180deg,#fffaf0f2,#ffe8c2f2);box-shadow:0 3px 0 #b07a44,0 5px 12px #0004;color:#5a2e0a}
.esTakvim span{font-size:18px}
.esTakvim b{font:800 17px 'Baloo 2',Nunito}
.esTakvim small{font:800 12px Nunito;color:#9a5a20}
.esElmas{height:40px;border:0;border-radius:14px;padding:0 10px;background:linear-gradient(180deg,#7fd6ff,#3a8fe0);color:#fff;font:800 15px Nunito;box-shadow:0 3px 0 #1f5aa0,0 5px 12px #0004;white-space:nowrap}
.esRozetler{flex-basis:100%;display:flex;gap:6px;align-items:center;justify-content:flex-end;margin-top:-2px}
.esRek{height:32px;border:0;border-radius:16px;padding:0 10px;background:linear-gradient(180deg,#b9a2ff,#6a46e0);color:#fff;font:800 13px Nunito;box-shadow:0 3px 0 #3d2590,0 4px 10px #0004;white-space:nowrap}
.esRek.aktif{background:linear-gradient(180deg,#7ee08a,#2f9e4a);box-shadow:0 3px 0 #1d6a30}
.esGunluk{position:relative;width:36px;height:32px;border:0;border-radius:16px;background:linear-gradient(180deg,#fff,#ffe3b8);font-size:18px;box-shadow:0 3px 0 #b07a44,0 4px 10px #0004}
.esEtiket{height:28px;display:inline-flex;align-items:center;gap:4px;border-radius:14px;padding:0 9px;background:#2f9e4a;color:#fff;font:800 12px Nunito;box-shadow:0 2px 6px #0004}
.esNokta{position:absolute;top:-3px;right:-3px;width:13px;height:13px;border-radius:50%;background:#ff3d5a;border:2px solid #fff;animation:esZipla 1s infinite}
@keyframes esZipla{50%{transform:translateY(-3px)}}

/* kombo ve afiş */
.esKombo{position:absolute;left:50%;bottom:calc(86px + env(safe-area-inset-bottom));transform:translateX(-50%) scale(.6);z-index:4;font:800 17px 'Baloo 2',Nunito;color:#fff;text-shadow:0 2px 0 #8a3a00;background:linear-gradient(180deg,#ff9f1cee,#e2560aee);border:2px solid #ffffff80;border-radius:16px;padding:2px 14px;box-shadow:0 4px 12px #0004;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;white-space:nowrap}
.esKombo.goster{opacity:1;transform:translateX(-50%) scale(1)}
.esAfis{position:absolute;left:50%;top:118px;transform:translate(-50%,-30px);z-index:6;max-width:min(94%,440px);background:linear-gradient(180deg,#fffaf0,#ffe9c8);border:2px solid #e2a35a;border-radius:16px;padding:9px 14px;font:800 14px Nunito;color:#5a2e0a;box-shadow:0 8px 24px #0005;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;text-align:center}
.esAfis.goster{opacity:1;transform:translate(-50%,0)}
.esAfis small{display:block;font-weight:700;color:#8a5a30;margin-top:2px}

/* ziyaret bandı */
.esZiyaret{position:absolute;left:8px;right:8px;top:8px;z-index:6;display:flex;gap:6px;align-items:center;background:linear-gradient(180deg,#2f6b4af2,#1f4a33f2);border:2px solid #ffffff40;border-radius:16px;padding:6px 8px;color:#fff;box-shadow:0 6px 18px #0005}
.esZBilgi{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15}
.esZBilgi b{font:800 16px 'Baloo 2',Nunito;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.esZBilgi small{font:700 12px Nunito;color:#c8f0d8}
.esZBtn{height:38px;border:0;border-radius:12px;padding:0 10px;background:#fff;color:#2f4a1f;font:800 13px Nunito;box-shadow:0 3px 0 #0004;white-space:nowrap}
.esZBtn:disabled{opacity:.5}
.esZDon{background:#ffcf6a;color:#5a2e0a}

/* alt menü */
.esAlt{position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:5;width:100%;max-width:560px;display:flex;gap:4px;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:linear-gradient(180deg,#4a2b17f0,#2c180cf5);border-radius:18px 18px 0 0;box-shadow:0 -6px 18px #0005}
.esAlt button{position:relative;flex:1;min-width:0;height:56px;border:0;border-radius:14px;background:linear-gradient(180deg,#fffaf0,#ffe2b8);color:#5a2e0a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;box-shadow:0 3px 0 #a8683a}
.esAlt button i{font-style:normal;font-size:22px;line-height:1}
.esAlt button span{font:800 11px Nunito;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.esAlt button:active{transform:translateY(2px);box-shadow:0 1px 0 #a8683a}
.esAlt .esNokta{top:2px;right:6px}

.esYukle{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;background:radial-gradient(circle,#5a3420,#2a1a10);color:#ffe2b8;font:800 18px 'Baloo 2',Nunito}
.esYukleSimit{width:64px;height:64px;border-radius:50%;border:14px solid #c8742a;box-shadow:inset 0 0 0 3px #8a4a12,0 0 0 3px #8a4a12;animation:esDon 1.2s linear infinite;background:transparent}
@keyframes esDon{to{transform:rotate(360deg)}}

/* pencereler */
.oModal{background:linear-gradient(180deg,#fffaf0,#ffefd6);border-color:#e2a35a;color:#3a2210}
.oModal h2{color:#b8560a}
.oModal h3{margin:12px 0 6px;font:800 16px 'Baloo 2',Nunito;color:#8a3e0a;text-align:left}
.oModal p{color:#5a3a20}
.oModal .kapat{color:#a07040}
.oModal .butonlar:last-child{background:linear-gradient(to bottom,transparent,#ffefd6 35%)}
.oModal .secim button{background:#f3dcbc;border-color:#e2a35a;color:#5a2e0a}
.oModal .secim button.aktif{background:#ff9f1c;border-color:#b8560a;color:#fff}
.oModal table.lider td,.oModal table.lider th{color:#3a2210;border-color:#0001}
.oModal table.lider tr.ben td{background:#ffe08a80}
.btn{background:linear-gradient(180deg,#ffd27a,#f08a2a);color:#3a1606}
.btnIkincil{background:#f0dcc0;color:#5a2e0a}
.btnReklam{background:linear-gradient(180deg,#a890ff,#6a46e0);color:#fff}
.esSatir{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:14px;background:#fff;box-shadow:0 2px 0 #e9cfa8;margin:7px 0;text-align:left}
.esSatir .ik{flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:22px;background:#fff3dc}
.esSatir .ort{flex:1;min-width:0}
.esSatir .ort b{display:block;font:800 15px 'Baloo 2',Nunito;color:#3a2210;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.esSatir .ort small{display:block;font:700 12px Nunito;color:#8a5a30;line-height:1.25}
.esSatir .ort small b{display:inline;font:800 13px Nunito;color:#3a2210}
.esSatir.kilit{opacity:.6}
.esBtn{flex:0 0 auto;min-width:74px;height:40px;border:0;border-radius:12px;padding:0 10px;background:linear-gradient(180deg,#ffd27a,#f08a2a);color:#3a1606;font:800 13px Nunito;box-shadow:0 3px 0 #a8561a;white-space:nowrap;cursor:pointer}
.esBtn:disabled{background:#d8cbb8;color:#8a7a68;box-shadow:0 3px 0 #b0a08a;cursor:default}
.esBtn.yesil{background:linear-gradient(180deg,#8ee59a,#2f9e4a);color:#fff;box-shadow:0 3px 0 #1d6a30}
.esBtn.mavi{background:linear-gradient(180deg,#8fd0ff,#3a8fe0);color:#fff;box-shadow:0 3px 0 #1f5aa0}
.esBtn.mor{background:linear-gradient(180deg,#b9a2ff,#6a46e0);color:#fff;box-shadow:0 3px 0 #3d2590}
.esBtn.kucuk{min-width:0;height:34px;font-size:12px;padding:0 8px}
.esBar{height:9px;border-radius:5px;background:#f0dcc0;overflow:hidden;margin-top:4px}
.esBar i{display:block;height:100%;background:linear-gradient(90deg,#ffb347,#ff7a1a);border-radius:5px}
.esIstat{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0}
.esIstat div{background:#fff;border-radius:12px;padding:6px 8px;text-align:left;box-shadow:0 2px 0 #e9cfa8}
.esIstat small{display:block;font:700 11px Nunito;color:#8a5a30}
.esIstat b{font:800 15px 'Baloo 2',Nunito;color:#3a2210}
.esRenkler{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:6px 0}
.esRenk{width:38px;height:30px;border-radius:9px;border:3px solid #fff;box-shadow:0 2px 0 #0003;cursor:pointer;background-size:12px 100%}
.esRenk.secili{border-color:#ff7a1a;transform:scale(1.08)}
.esKod{display:flex;gap:8px;align-items:center;justify-content:center;margin:6px 0 10px}
.esKod b{font:800 26px 'Baloo 2',monospace;letter-spacing:2px;color:#b8560a;background:#fff;border-radius:12px;padding:2px 14px;box-shadow:0 2px 0 #e9cfa8}
.esGir{display:flex;gap:6px;margin:6px 0}
.esGir input{flex:1;min-width:0;height:42px;border-radius:12px;border:2px solid #e2a35a;padding:0 12px;font:800 16px Nunito;text-transform:uppercase;background:#fff;color:#3a2210}
.esLig{display:flex;align-items:center;gap:10px;justify-content:center;background:#fff;border-radius:14px;padding:8px;margin:6px 0;box-shadow:0 2px 0 #e9cfa8}
.esLig .rz{font-size:34px}
.esLig b{font:800 18px 'Baloo 2',Nunito}
.esNot{font:700 12px Nunito;color:#8a5a30;margin:4px 0}
.esBuyuk{font:800 30px 'Baloo 2',Nunito;color:#2f9e4a;margin:4px 0}
.esSekmeler{display:flex;gap:6px;justify-content:center;margin:4px 0 8px;flex-wrap:wrap}
.esSekmeler button{border:2px solid #e2a35a;background:#f3dcbc;color:#5a2e0a;border-radius:12px;padding:6px 12px;font:800 13px Nunito;cursor:pointer}
.esSekmeler button.aktif{background:#ff9f1c;color:#fff;border-color:#b8560a}

@media (min-width:720px){
  .esHud{padding:10px 16px 0}
  .esRozetler{flex-basis:auto;margin-top:0;order:2}
  .esHudSag{order:3}
  .esAfis{top:84px}
}