/* ERLIK - envanter bileseni: oyunda ve ana sayfa demosunda ortak */
/* ---------- Esya hucreleri ---------- */
.eslot,.bslot,.sslot{
  position:relative;border-radius:4px;
  background:
    radial-gradient(70% 70% at 50% 40%,rgba(80,60,45,.25),transparent 70%),
    linear-gradient(180deg,#0e0907,#1b130f);
  box-shadow:inset 0 0 0 1px rgba(236,201,130,.2),inset 0 6px 16px rgba(0,0,0,.85),0 1px 0 rgba(255,230,180,.06);
  transition:box-shadow .15s, transform .15s, background .15s;
}
.eslot .ghost{position:absolute;inset:16%;width:68%;height:68%;object-fit:contain;opacity:.12;filter:grayscale(1) brightness(1.4)}
.it{
  position:absolute;inset:3px;border-radius:3px;cursor:grab;touch-action:none;
  background:radial-gradient(80% 80% at 50% 45%,var(--rg,rgba(201,192,174,.14)),transparent 72%);
  box-shadow:inset 0 0 0 1px var(--rb,rgba(201,192,174,.35));
  transition:transform .12s, filter .12s;
}
.it img{position:absolute;inset:7%;width:86%;height:86%;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.8));pointer-events:none}
.it:hover{transform:scale(1.04);filter:brightness(1.15)}
.it-lv{position:absolute;right:3px;bottom:2px;font:800 11px/1 var(--f-display);color:#f5e7c5;text-shadow:0 0 3px #000,0 1px 1px #000;pointer-events:none}
.it.r1{--rg:rgba(124,197,97,.22);--rb:rgba(124,197,97,.65)}
.it.r2{--rg:rgba(83,169,228,.26);--rb:rgba(83,169,228,.8)}
.it.r3{--rg:rgba(187,114,242,.3);--rb:rgba(187,114,242,.85)}
.it.r4{--rg:rgba(242,164,60,.34);--rb:rgba(242,164,60,.95)}
.it.r2::after,.it.r3::after,.it.r4::after{
  content:"";position:absolute;inset:-1px;border-radius:4px;pointer-events:none;padding:1px;
  background:conic-gradient(from var(--a,0deg),transparent 0 70%,var(--rb) 82%,#fff 86%,var(--rb) 90%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:spinA 3.2s linear infinite;
}
.it.r4{animation:legend 2.4s ease-in-out infinite}
@keyframes legend{0%,100%{box-shadow:inset 0 0 0 1px var(--rb),0 0 6px rgba(242,164,60,.3)}50%{box-shadow:inset 0 0 0 1px var(--rb),0 0 16px rgba(242,164,60,.75)}}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spinA{to{--a:360deg}}
.it.k-potion img{inset:10%;width:80%;height:80%}
.it.flash{animation:equipFlash .7s}
@keyframes equipFlash{0%{filter:brightness(2.4) drop-shadow(0 0 14px #ffd27a)}100%{filter:none}}

/* surukleme */
.it.dragging{opacity:.25}
.drag-ghost{position:fixed;z-index:9800;pointer-events:none;border-radius:4px;transform:translate(-50%,-50%) rotate(-4deg) scale(1.12);filter:drop-shadow(0 18px 18px rgba(0,0,0,.7)) drop-shadow(0 0 10px rgba(255,190,90,.4));transition:transform .08s}
.drag-ghost img{width:100%;height:100%;object-fit:contain}
.drop-ok{box-shadow:inset 0 0 0 1px rgba(142,230,218,.7),inset 0 0 18px rgba(63,166,157,.35),0 0 10px rgba(63,166,157,.35)!important}
.drop-hover{box-shadow:inset 0 0 0 2px var(--firuze-hi),inset 0 0 26px rgba(142,230,218,.5),0 0 18px rgba(142,230,218,.6)!important;transform:scale(1.04)}
.drop-bad{opacity:.45}

/* ---------- Techizat ---------- */
.equip{position:relative;height:318px}
.s-helmet{position:absolute;left:106px;top:0;width:96px;height:86px}
.s-amulet{position:absolute;left:222px;top:10px;width:66px;height:66px;border-radius:50%}
.s-weapon{position:absolute;left:0;top:96px;width:96px;height:132px}
.s-armor{position:absolute;left:106px;top:96px;width:96px;height:132px}
.s-shield{position:absolute;left:212px;top:96px;width:96px;height:132px}
.s-gloves{position:absolute;left:0;top:238px;width:96px;height:80px}
.s-boots{position:absolute;left:106px;top:238px;width:96px;height:80px}
.s-ring{position:absolute;left:222px;top:246px;width:66px;height:66px;border-radius:50%}
.s-amulet .it,.s-ring .it{border-radius:50%}
.esum{position:absolute;left:330px;top:96px;width:140px;display:flex;flex-direction:column;gap:10px}
.esum-row{display:flex;align-items:center;gap:10px;height:38px;padding:0 12px;border-radius:3px;background:rgba(0,0,0,.55);box-shadow:inset 0 0 0 1px rgba(236,201,130,.2)}
.esum-row b{font:800 20px/1 var(--f-display);color:#fff1d4;font-variant-numeric:tabular-nums}

/* ---------- Heybe ---------- */
.bag{position:absolute;left:0;right:0;top:330px}
.bag-head{display:flex;align-items:center;gap:10px;height:34px;margin-bottom:6px}
.bag-title{font:800 19px/1 var(--f-display);color:#f1d9a4;text-shadow:0 1px 0 #000}
.bag-cnt{font:700 15px/1 var(--f-display);color:var(--ash)}
.bag-filters{margin-left:auto;display:flex;gap:4px}
.bf{width:32px;height:30px;border:0;border-radius:3px;cursor:pointer;background:linear-gradient(180deg,#2b1c14,#140c09);box-shadow:inset 0 0 0 1px rgba(236,201,130,.22);opacity:.75;transition:opacity .15s, box-shadow .15s}
.bf .ic{width:18px;height:18px}
.bf:hover{opacity:1}
.bf.on{opacity:1;box-shadow:inset 0 0 0 1px var(--bronze-hi),0 0 10px rgba(236,201,130,.35)}
.bag-grid{display:grid;grid-template-columns:repeat(8,54px);grid-auto-rows:54px;gap:4px}
.bag-grid .bslot.filtered .it{opacity:.18;filter:grayscale(1)}


.esum-row.bump{animation:bump .5s}
@keyframes bump{0%{box-shadow:inset 0 0 0 1px var(--bronze-hi),0 0 16px rgba(255,190,90,.6)}100%{}}