/* ERLIK - ortak tasarim belirtecleri ve bilesenler */
:root{
  --soot:#16100d; --soot-2:#201712; --soot-3:#2b1f18;
  --felt:#3a1f17; --felt-2:#4f2b1e; --felt-3:#63371f;
  --bronze:#b0843f; --bronze-hi:#ecc982; --bronze-lo:#5a3b17; --bronze-dk:#33210f;
  --firuze:#3fa69d; --firuze-hi:#8ee6da; --firuze-dk:#1d4f4a;
  --ember:#ff6a2b; --ember-2:#ffb347; --blood:#a3201b; --blood-hi:#e2463a;
  --bone:#ecdfc4; --ash:#a69885; --dim:#75685a;
  --r0:#c9c0ae; --r1:#7cc561; --r2:#53a9e4; --r3:#bb72f2; --r4:#f2a43c;
  --f-display:"Alegreya SC", "Palatino Linotype", Georgia, serif;
  --f-body:"Alegreya", "Palatino Linotype", Georgia, serif;
  --f-rune:"Noto Sans Old Turkic", serif;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .4 0 0 0 0 .3 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --felt-tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035 .09' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .15 0 0 0 0 .09 0 0 0 .42 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23f)'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--soot);color:var(--bone);font:400 17px/1.55 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--bronze-hi);text-decoration:none}
a:hover{color:#fff1cf}
img{max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--firuze-hi);outline-offset:2px}
.muted{color:var(--ash)}
.rune,.runes{font-family:var(--f-rune);font-weight:400}

/* ---------- Dugmeler ---------- */
.btn{
  --c1:#4a2c1d; --c2:#25150e;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:42px;padding:0 22px;border:0;cursor:pointer;
  font:700 17px/1 var(--f-display);letter-spacing:.02em;color:var(--bone);
  background:
    linear-gradient(180deg,rgba(255,220,160,.16),rgba(255,220,160,0) 45%),
    linear-gradient(180deg,var(--c1),var(--c2));
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%);
  text-shadow:0 1px 0 #000,0 0 12px rgba(0,0,0,.6);
  transition:filter .15s, transform .08s;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--bronze-hi),var(--bronze) 40%,var(--bronze-lo));
  clip-path:inherit;
}
.btn{isolation:isolate}
.btn::after{
  content:"";position:absolute;inset:2px;z-index:-1;
  background:inherit;clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,9px 100%,0 50%);
}
.btn:hover{filter:brightness(1.18) saturate(1.1)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn[disabled]{filter:grayscale(.8) brightness(.7);cursor:not-allowed}
.btn-main{--c1:#8c2a17;--c2:#3e0f08}
.btn-main:hover{filter:brightness(1.15) drop-shadow(0 0 10px rgba(255,106,43,.55))}
.btn-ghost{--c1:#2e2019;--c2:#160f0b}
.btn-firuze{--c1:#24675f;--c2:#0f2f2b}

/* ---------- Formlar ---------- */
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],select,textarea{
  width:100%;padding:10px 12px;border:1px solid rgba(236,201,130,.28);border-radius:3px;
  background:rgba(10,7,5,.72);color:var(--bone);font:16px/1.3 var(--f-body);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.6);transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--firuze);box-shadow:inset 0 2px 8px rgba(0,0,0,.6),0 0 0 3px rgba(63,166,157,.22)}
label>span{display:block;font:600 14px/1.2 var(--f-display);color:var(--ash);margin:0 0 6px;letter-spacing:.02em}

/* ---------- Simgeler ---------- */
.coin,.gem{display:inline-block;width:18px;height:18px;vertical-align:-3px;background:center/contain no-repeat}
.coin{background-image:url("../ph/ic/coin.svg")}
.gem{background-image:url("../ph/ic/gem.svg")}
.ic{display:inline-block;width:22px;height:22px;background:center/contain no-repeat;vertical-align:middle}
.ic-armor{background-image:url("../ph/ic/armor.svg")}
.ic-coin{background-image:url("../ph/ic/coin.svg")}
.ic-dmg{background-image:url("../ph/ic/dmg.svg")}
.ic-combat{background-image:url("../ph/ic/combat.svg")}
.ic-st-str{background-image:url("../ph/ic/str.svg")}
.ic-st-dex{background-image:url("../ph/ic/dex.svg")}
.ic-st-con{background-image:url("../ph/ic/con.svg")}
.ic-st-kut{background-image:url("../ph/ic/kut.svg")}
.ic-f-all{background-image:url("../ph/ic/f_all.svg")}
.ic-f-weapon,.ic-tab-w{background-image:url("../ph/ic/f_weapon.svg")}
.ic-f-armor,.ic-tab-a{background-image:url("../ph/ic/f_armor.svg")}
.ic-f-jewel,.ic-tab-j{background-image:url("../ph/ic/f_jewel.svg")}
.ic-f-potion,.ic-tab-p{background-image:url("../ph/ic/f_potion.svg")}

/* ---------- Ipucu (tooltip) ---------- */
.tooltip{
  position:fixed;z-index:9000;left:0;top:0;width:280px;pointer-events:none;
  padding:14px 16px 12px;color:var(--bone);font:15px/1.45 var(--f-body);
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(255,170,90,.08),transparent 60%),
    linear-gradient(180deg,rgba(32,22,17,.97),rgba(14,10,8,.97));
  border:1px solid rgba(236,201,130,.45);border-radius:4px;
  box-shadow:0 0 0 1px #000,0 18px 40px rgba(0,0,0,.75),inset 0 0 22px rgba(0,0,0,.6);
  opacity:0;transform:translateY(4px) scale(.98);transition:opacity .12s, transform .12s;
}
.tooltip.on{opacity:1;transform:none}
.tooltip.wide{width:520px}
.tooltip .tt-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tooltip .tt-col+.tt-col{border-left:1px solid rgba(236,201,130,.18);padding-left:14px}
.tooltip h4{margin:0 0 2px;font:800 19px/1.15 var(--f-display);letter-spacing:.01em}
.tooltip .tt-rar{font:italic 14px/1.2 var(--f-body);margin-bottom:8px}
.tooltip .tt-tag{display:inline-block;font:700 11px/1 var(--f-display);color:#1a110c;background:var(--bronze);padding:3px 6px 2px;border-radius:2px;margin-bottom:6px}
.tooltip dl{display:grid;grid-template-columns:1fr auto;gap:2px 10px;margin:6px 0 0}
.tooltip dt{color:var(--ash)}
.tooltip dd{margin:0;text-align:right;font-weight:700}
.tooltip .up{color:var(--r1)} .tooltip .down{color:var(--blood-hi)}
.tooltip .tt-lore{margin:10px 0 0;color:#cdbb98;font-style:italic;font-size:14px;border-top:1px solid rgba(236,201,130,.15);padding-top:8px}
.tooltip .tt-price{display:flex;justify-content:space-between;margin-top:10px;font-weight:700}
.tooltip .tt-hint{margin-top:8px;font-size:13px;color:var(--firuze-hi)}
.tooltip .tt-bad{color:var(--blood-hi);font-weight:700}
.tooltip .r0{color:var(--r0)} .tooltip .r1{color:var(--r1)} .tooltip .r2{color:var(--r2)} .tooltip .r3{color:var(--r3)} .tooltip .r4{color:var(--r4)}

/* ---------- Bildirimler ---------- */
.toasts{position:fixed;z-index:9500;left:50%;top:14px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;width:min(560px,92vw)}
.toast{
  pointer-events:auto;position:relative;padding:11px 22px 11px 46px;min-width:260px;max-width:100%;
  font:500 16px/1.35 var(--f-body);color:var(--bone);
  background:linear-gradient(180deg,rgba(43,30,22,.97),rgba(20,14,10,.97));
  border:1px solid rgba(236,201,130,.4);border-radius:3px;
  box-shadow:0 10px 30px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,230,180,.08);
  animation:toastIn .38s cubic-bezier(.2,1.3,.4,1) both;
}
.toast::before{content:"";position:absolute;left:14px;top:50%;width:20px;height:20px;margin-top:-10px;background:url("../ph/ic/kut.svg") center/contain no-repeat}
.toast.ok{border-color:rgba(124,197,97,.55)}
.toast.err{border-color:rgba(226,70,58,.7)}
.toast.err::before{background-image:url("../ph/ic/seal.svg")}
.toast.ev{border-color:rgba(242,164,60,.7);background:linear-gradient(180deg,rgba(66,40,18,.97),rgba(24,14,8,.97))}
.toast.out{animation:toastOut .3s ease-in both}
.toast.click{cursor:pointer}
.toast.click:hover{filter:brightness(1.15)}
@keyframes toastIn{from{opacity:0;transform:translateY(-18px) scale(.94)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px) scale(.97)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}