/* EasyBot panel teması — botun koyu renkleriyle uyumlu (arka #0f131b, kutu #151a23, çizgi #20345a, soluk #98a6c4) */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: #0f131b; color: #dfe6f3;
  font: 14px/1.5 "Segoe UI", system-ui, sans-serif;
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
}
.kutu {
  width: min(420px, 92vw); background: #151a23; border: 1px solid #20345a; border-radius: 10px;
  padding: 26px 28px 22px; box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
.genis { width: min(560px, 94vw); }
h1 { margin: 0 0 2px; font-size: 20px; }
h1 .e { color: #78e9ff; }
.alt { color: #98a6c4; margin: 0 0 18px; font-size: 13px; }
label { display: block; margin: 12px 0 5px; color: #98a6c4; font-size: 13px; }
input {
  width: 100%; padding: 9px 11px; border-radius: 6px; border: 1px solid #20345a;
  background: #0f131b; color: #dfe6f3; font-size: 14px;
}
input:focus { outline: none; border-color: #3d6bb3; }
button {
  width: 100%; margin-top: 18px; padding: 10px; border: 0; border-radius: 6px; cursor: pointer;
  background: #2456a6; color: #fff; font-size: 15px; font-weight: 600;
}
button:hover { background: #2d66c2; }
button:disabled { background: #273246; color: #7d8aa5; cursor: wait; }
.hata { margin-top: 12px; color: #ff8f70; font-size: 13px; min-height: 18px; white-space: pre-wrap; }
.satir { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #1b2232; }
.satir:last-of-type { border-bottom: 0; }
.satir .ad { color: #98a6c4; }
.rozet { padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.rozet.iyi { background: #123524; color: #5fe3a1; }
.rozet.kotu { background: #3a1820; color: #ff8f70; }
.cikis { margin-top: 20px; background: #273246; }
.cikis:hover { background: #31405c; }
.not { margin-top: 14px; color: #6f7c96; font-size: 12px; }

/* ── Yönetici / bot sayfaları (body.sayfa: ortalanmış kutu yerine tam sayfa düzen) ── */
body.sayfa { display: block; }
.tepe {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 22px; background: #151a23; border-bottom: 1px solid #20345a;
}
.tepe h1 { font-size: 18px; display: flex; align-items: center; gap: 10px; }
.tepe-sag { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.geri { color: #78e9ff; text-decoration: none; font-size: 20px; }
.soluk { color: #98a6c4; }
.icerik { max-width: 1060px; margin: 0 auto; padding: 20px 22px 40px; }
.govde { display: flex; align-items: flex-start; }
.arac { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.arac h2 { margin: 0; font-size: 17px; }
.kucukdugme {
  width: auto; margin: 0; padding: 7px 14px; font-size: 13px; font-weight: 600;
  background: #273246; color: #dfe6f3; border: 0; border-radius: 6px; cursor: pointer;
}
.kucukdugme:hover { background: #31405c; }
.kucukdugme.ana { background: #2456a6; color: #fff; }
.kucukdugme.ana:hover { background: #2d66c2; }
.kucukdugme:disabled { background: #1b2232; color: #5a6680; cursor: default; }
.baglanti { display: inline-block; text-decoration: none; text-align: center; }

/* Bot kartları */
.kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 12px; }
.kart { background: #151a23; border: 1px solid #20345a; border-radius: 10px; padding: 14px 16px; }
.kart-bas { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.kart-ad { color: #dfe6f3; font-weight: 700; font-size: 15px; text-decoration: none; }
.kart-ad:hover { color: #78e9ff; }
.kart .yanyana { margin-top: 12px; }
.mini { font-size: 12px; margin: 4px 0; }
.kotuYazi { color: #ff8f70; }
.yanyana { display: flex; gap: 8px; }
.yanyana button, .yanyana .baglanti { flex: 1; }

/* Durum rozetleri */
.rozet.bekle { background: #2d2a16; color: #ffd479; }
.rozet.orta { background: #16263c; color: #79b8ff; }

/* HP/MP ve benzeri çubuklar */
.bar { height: 7px; border-radius: 4px; background: #0f131b; border: 1px solid #1b2232; overflow: hidden; margin: 3px 0 8px; }
.bar span { display: block; height: 100%; background: #2d66c2; transition: width .4s; }
.bar.hp span { background: #c74b4b; }
.bar.mp span { background: #3d6bb3; }

/* Bot detayı: sol menü */
.yan {
  width: 180px; flex: none; padding: 16px 0; margin: 20px 0 0 22px;
  background: #151a23; border: 1px solid #20345a; border-radius: 10px;
  position: sticky; top: 16px;
}
.yan a { display: block; padding: 9px 18px; color: #98a6c4; cursor: pointer; font-size: 14px; }
.yan a:hover { color: #dfe6f3; background: #1b2232; }
.yan a.secili { color: #78e9ff; background: #10223c; border-right: 2px solid #78e9ff; }
.yan a small { color: #5a6680; font-size: 10px; margin-left: 4px; }
.govde .icerik { flex: 1; min-width: 0; }

/* Bot ekle/düzenle penceresi */
dialog { border: 0; background: transparent; padding: 0; }
dialog::backdrop { background: rgba(5, 8, 14, .7); }
dialog .kutu { max-height: 90vh; overflow: auto; }
select {
  width: 100%; padding: 9px 11px; border-radius: 6px; border: 1px solid #20345a;
  background: #0f131b; color: #dfe6f3; font-size: 14px;
}
@media (max-width: 720px) {
  .govde { flex-direction: column; }
  .yan { width: auto; margin: 16px 22px 0; position: static; display: flex; flex-wrap: wrap; padding: 6px; }
  .yan a { padding: 7px 12px; }
}

/* ── Masaüstü Manager satır kartı (KarakterSatiri'nin web karşılığı) ──
   Bölümler esnek: satır ekrana SOLDAN SAĞA TAM sığar, yatay kaydırma yok
   (kullanıcı: "tam ekrana sığdır, altta kaydırma olmasın"); taşan yazı ... ile kesilir. */
.icerik.tam { max-width: none; }
.kucukdugme.altin { background: #b98a2e; color: #fff; }
.kucukdugme.altin:hover { background: #d19f39; }
.ksat {
  display: flex; align-items: flex-start; gap: 12px; min-height: 100px;
  background: #151a23; border: 1px solid #20345a; border-radius: 10px;
  padding: 10px 14px; margin-bottom: 10px; overflow: hidden;
}
.avatar {
  flex: none; width: 48px; height: 48px; border-radius: 50%; margin-top: 10px;
  background: #24303f; color: #78e9ff; font-size: 20px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.avatar:hover { background: #2d66c2; color: #fff; }
.bolum { flex: 1 1 0; padding-top: 4px; min-width: 0; }
.bolum.kimlik { flex: 2.2 1 0; }
.bolum.dar { flex: 0 0 44px; }
.bolum.exp { flex: 1.6 1 0; }
.bolum.hpmp { flex: 1.2 1 0; }
.bolum.konum { flex: 1.2 1 0; }
.bolum.cuzdan { flex: 1.1 1 0; }
.bolum.oturum { flex: 1.4 1 0; }
.bolum > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esnek { display: none; }
.ksBaslik { font-size: 10px; letter-spacing: .08em; color: #5a6680; margin-bottom: 4px; }
.ksAd { font-size: 15px; font-weight: 700; }
.ksAd a { color: #dfe6f3; text-decoration: none; }
.ksAd a:hover { color: #78e9ff; }
.ksParti { font-size: 12px; color: #79b8ff; font-weight: 400; }
.ksSv { font-size: 20px; font-weight: 700; color: #e8d9a8; }
.ksDeger { font-size: 13px; }
.ksSoluk { font-size: 12px; color: #98a6c4; }
.kes { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ksat .bar { margin: 2px 0 4px; }
.farm {
  flex: none; width: 128px; margin-top: 26px; padding: 9px 10px;
  border: 0; border-radius: 8px; font-weight: 700; font-size: 13px; cursor: pointer; color: #fff;
}
.farm.bas { background: linear-gradient(#2fb35a, #1f8a43); }
.farm.bas:hover { background: linear-gradient(#36c765, #23984b); }
.farm.dur { background: linear-gradient(#e0584a, #b83a30); }
.farm.dur:hover { background: linear-gradient(#ef6657, #c74439); }
.farm:disabled { background: #2a2f3a; color: #7a808c; cursor: default; }
.menu { flex: none; margin-top: 26px; }
.acikmenu {
  position: absolute; z-index: 50; width: 180px; background: #1b2232; border: 1px solid #2d66c2;
  border-radius: 8px; padding: 6px 0; box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.acikmenu a { display: block; padding: 8px 14px; color: #dfe6f3; font-size: 13px; cursor: pointer; text-decoration: none; }
.acikmenu a:hover { background: #24436f; }
@media (max-width: 1100px) {   /* dar ekranda satır alt alta sarar, yine kaydırma yok */
  .ksat { flex-wrap: wrap; }
  .bolum.kimlik { flex: 1 1 100%; }
  .farm, .menu { margin-top: 8px; }
}

/* ── Bot sayfası: harita ── */
.haritaKap {
  position: relative; height: calc(100vh - 200px); min-height: 380px;
  border: 1px solid #20345a; border-radius: 10px; overflow: hidden; background: #0a0e14;
}
.haritaKap canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.haritaKap canvas:active { cursor: grabbing; }
.haritaArac { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; }
.haritaArac button {
  width: 34px; height: 34px; margin: 0; padding: 0; border: 1px solid #2d66c2; border-radius: 8px;
  background: rgba(21,26,35,.9); color: #dfe6f3; font-size: 16px; cursor: pointer;
}
.haritaArac button:hover { background: #24436f; }
.haritaBilgi {
  position: absolute; right: 10px; bottom: 10px; padding: 5px 10px; border-radius: 6px;
  background: rgba(10,14,20,.8); color: #98a6c4; font-size: 12px;
}