/* Nova2 web sitesi - ana sayfa ve kayit ortak stili.
   Renkler oyunun yukleme ekraniyla ayni aileden (index.html #yukleme):
   altin #e9c77b / #f0d28a -> #b8893c, koyu kahve-siyah zemin. */

:root {
  --zemin: #0b0907;
  --zemin-2: #14100c;
  --panel: rgba(16, 12, 9, 0.84);
  --cizgi: rgba(233, 199, 123, 0.20);
  --cizgi-guclu: rgba(233, 199, 123, 0.45);
  --altin: #e9c77b;
  --altin-acik: #f0d28a;
  --altin-koyu: #b8893c;
  --metin: #ece5d8;
  --soluk: #a99f8d;
  --hata: #f19483;
  --basari: #9fd19a;
  --baslik: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif;
  --govde: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --golge: 0 18px 50px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }

html, body { margin: 0; }
body {
  background: var(--zemin);
  color: var(--metin);
  font: 16px/1.6 var(--govde);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--altin); text-decoration: none; }
a:hover { color: var(--altin-acik); }
:focus-visible { outline: 2px solid var(--altin); outline-offset: 3px; border-radius: 4px; }

/* --- Ust cubuk --------------------------------------------------------- */
.ust {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(16px, 4vw, 48px);
  background: linear-gradient(rgba(8, 6, 4, 0.88), rgba(8, 6, 4, 0));
  transition: background .25s;
}
.ust.dolu { background: rgba(8, 6, 4, 0.94); box-shadow: 0 1px 0 var(--cizgi); }
.marka {
  font: 600 22px/1 var(--baslik); letter-spacing: .12em; color: var(--altin);
  background: linear-gradient(var(--altin-acik), var(--altin-koyu));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.menu { display: flex; align-items: center; gap: clamp(10px, 2.4vw, 28px); }
.menu a:not(.dugme) { color: var(--metin); font-size: 15px; opacity: .85; }
.menu a:not(.dugme):hover, .menu a[aria-current="page"] { color: var(--altin); opacity: 1; }

/* --- Dugmeler ---------------------------------------------------------- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 26px; border-radius: 4px; border: 1px solid transparent;
  font: 600 15px/1 var(--govde); letter-spacing: .04em; cursor: pointer;
  transition: transform .12s, filter .15s, background .15s, color .15s;
}
.dugme:active { transform: translateY(1px); }
.dugme.altin {
  color: #1d1408;
  background: linear-gradient(var(--altin-acik), var(--altin-koyu));
  box-shadow: 0 6px 22px rgba(184, 137, 60, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.dugme.altin:hover { filter: brightness(1.08); color: #1d1408; }
.dugme.cerceve { color: var(--altin); border-color: var(--cizgi-guclu); background: rgba(10, 8, 6, 0.45); }
.dugme.cerceve:hover { background: rgba(233, 199, 123, 0.10); color: var(--altin-acik); }
.dugme.buyuk { padding: 16px 34px; font-size: 16px; }
.dugme.kucuk { padding: 9px 18px; font-size: 14px; }
.dugme[disabled] { opacity: .55; cursor: progress; }

/* --- Kapak (ana sayfa) ------------------------------------------------- */
.kapak {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 120px 20px clamp(56px, 11vh, 110px);
  background: #0b0907 url("/gorsel/kapak.webp") center 30% / cover no-repeat;
  text-align: center; isolation: isolate;
}
@media (max-width: 960px) { .kapak { background-image: url("/gorsel/kapak-960.webp"); } }
.kapak::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgba(11, 9, 7, 0) 38%, rgba(11, 9, 7, 0.72) 70%, var(--zemin) 100%),
    radial-gradient(ellipse at 50% 85%, rgba(11, 9, 7, 0.55), transparent 60%);
}
.kapak-icerik { max-width: 760px; }
.kapak h1 {
  margin: 0 0 14px; font: 600 clamp(28px, 4.4vw, 46px)/1.15 var(--baslik);
  letter-spacing: .03em; color: #fbf3e2; text-shadow: 0 3px 18px rgba(0, 0, 0, 0.8);
}
.kapak p {
  margin: 0 auto 30px; max-width: 580px; font-size: clamp(16px, 1.6vw, 18px);
  color: #ddd3c1; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}
.kapak-dugmeler { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.masaustu-notu { margin-top: 18px; font-size: 13px; color: var(--soluk); }

/* --- Bolumler ---------------------------------------------------------- */
.bolum { padding: clamp(56px, 9vw, 96px) clamp(16px, 4vw, 48px); }
.bolum.koyu { background: var(--zemin-2); border-block: 1px solid var(--cizgi); }
.kap { max-width: 1120px; margin: 0 auto; }
.bolum-baslik { text-align: center; margin-bottom: clamp(32px, 5vw, 52px); }
.bolum-baslik h2 {
  margin: 0 0 10px; font: 600 clamp(24px, 3vw, 32px)/1.2 var(--baslik); color: var(--altin);
  letter-spacing: .04em;
}
.bolum-baslik p { margin: 0 auto; max-width: 600px; color: var(--soluk); }
.susleme {
  display: block; width: 120px; height: 1px; margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, var(--altin-koyu), transparent);
}

.izgara { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.kart {
  padding: 28px 26px; border: 1px solid var(--cizgi); border-radius: 6px;
  background: linear-gradient(180deg, rgba(233, 199, 123, 0.05), rgba(233, 199, 123, 0) 60%), var(--zemin);
}
.kart h3 { margin: 14px 0 8px; font: 600 19px/1.3 var(--baslik); color: var(--metin); letter-spacing: .02em; }
.kart p { margin: 0; color: var(--soluk); font-size: 15px; }
.simge {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--cizgi-guclu); color: var(--altin);
}
.simge svg { width: 22px; height: 22px; }

.adimlar { counter-reset: adim; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.adim { position: relative; padding: 26px 24px 24px 76px; border-left: 1px solid var(--cizgi); }
.adim::before {
  counter-increment: adim; content: counter(adim);
  position: absolute; left: 20px; top: 22px; width: 40px; height: 40px;
  display: grid; place-items: center; border-radius: 50%;
  font: 600 18px/1 var(--baslik); color: #1d1408;
  background: linear-gradient(var(--altin-acik), var(--altin-koyu));
}
.adim h3 { margin: 0 0 6px; font: 600 18px/1.3 var(--baslik); }
.adim p { margin: 0; color: var(--soluk); font-size: 15px; }

.gereksinim { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center; margin-top: 36px; color: var(--soluk); font-size: 14px; }
.gereksinim span::before { content: "\25C6"; color: var(--altin-koyu); margin-right: 8px; font-size: 10px; vertical-align: 2px; }

.cagri { text-align: center; }
.cagri h2 { margin: 0 0 12px; font: 600 clamp(24px, 3vw, 32px)/1.2 var(--baslik); color: var(--metin); }
.cagri p { margin: 0 0 26px; color: var(--soluk); }

/* --- Alt bilgi --------------------------------------------------------- */
.alt {
  padding: 30px clamp(16px, 4vw, 48px); border-top: 1px solid var(--cizgi);
  color: #7d7466; font-size: 13px; text-align: center;
}
.alt p { margin: 4px 0; }

/* --- Kayit sayfasi ----------------------------------------------------- */
.kayit-sahne {
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding: 96px clamp(16px, 6vw, 96px) 48px;
  background: #0b0907 url("/gorsel/kayit.webp") 70% center / cover no-repeat;
  position: relative; isolation: isolate;
}
@media (max-width: 960px) { .kayit-sahne { background-image: url("/gorsel/kayit-960.webp"); } }
.kayit-sahne::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(8, 6, 4, 0.92) 0%, rgba(8, 6, 4, 0.78) 38%, rgba(8, 6, 4, 0.15) 72%, rgba(8, 6, 4, 0.35) 100%);
}
@media (max-width: 820px) {
  .kayit-sahne { justify-content: center; }
  .kayit-sahne::before { background: rgba(8, 6, 4, 0.78); }
}

.form-panel {
  width: 100%; max-width: 440px; padding: clamp(24px, 4vw, 38px);
  background: var(--panel); border: 1px solid var(--cizgi); border-radius: 8px;
  box-shadow: var(--golge); backdrop-filter: blur(6px);
}
.form-panel h1 { margin: 0 0 6px; font: 600 28px/1.2 var(--baslik); color: var(--altin); letter-spacing: .03em; }
.form-panel .alt-baslik { margin: 0 0 24px; color: var(--soluk); font-size: 15px; }

.alan { margin-bottom: 16px; }
.alan label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: #d9d0bf; }
.alan input[type="text"], .alan input[type="email"], .alan input[type="password"] {
  width: 100%; padding: 12px 14px; border-radius: 4px;
  border: 1px solid rgba(233, 199, 123, 0.34); background: rgba(5, 4, 3, 0.65);
  color: var(--metin); font: 15px/1.2 var(--govde);
  transition: border-color .15s, box-shadow .15s;
}
.alan input::placeholder { color: #6f675a; }
.alan input:focus { outline: none; border-color: var(--altin); box-shadow: 0 0 0 3px rgba(233, 199, 123, 0.15); }
.alan.hatali input { border-color: var(--hata); }
.alan .ipucu { margin: 5px 0 0; font-size: 12.5px; color: #8a8171; }
.alan .alan-hata { margin: 5px 0 0; font-size: 13px; color: var(--hata); }
.alan .alan-hata:empty { display: none; }

.sifre-kutu { position: relative; }
.sifre-kutu input { padding-right: 70px !important; }
.goster {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  padding: 6px 10px; border: 0; background: none; color: var(--soluk);
  font: 600 12px/1 var(--govde); cursor: pointer; border-radius: 3px;
}
.goster:hover { color: var(--altin); }

.onay { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 20px; font-size: 14px; color: #cfc6b5; }
.onay input { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--altin-koyu); flex: none; }

/* Botlar icin tuzak alan: insanlar gormez, ekran okuyucular atlar */
.tuzak { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

.form-panel .dugme { width: 100%; }
.form-mesaj { margin: 0 0 16px; padding: 11px 14px; border-radius: 4px; font-size: 14px; }
.form-mesaj:empty { display: none; }
.form-mesaj.hata { background: rgba(138, 43, 34, 0.35); border: 1px solid rgba(241, 148, 131, 0.45); color: #f8cfc6; }
.form-alti { margin: 18px 0 0; text-align: center; font-size: 14px; color: var(--soluk); }

.basarili { text-align: center; }
.basarili .simge { width: 64px; height: 64px; margin: 4px auto 16px; color: var(--basari); border-color: rgba(159, 209, 154, 0.5); }
.basarili .simge svg { width: 30px; height: 30px; }
.basarili p { color: #d3cabb; margin: 0 0 22px; }
.basarili strong { color: var(--altin); }

/* `hidden` ozniteligi, display veren siniflara (.kayit-sahne flex) yenilmesin:
   yoksa gizli bolumler de gorunur (Hesabim: giris formu girişten sonra kaliyordu). */
[hidden] { display: none !important; }

/* --- Ic sayfalar: siralama ve hesap ------------------------------------- */
.sayfa {
  min-height: 100vh; min-height: 100svh;
  padding: 110px clamp(16px, 4vw, 48px) 64px;
  background: radial-gradient(ellipse at 50% -10%, rgba(233, 199, 123, 0.10), transparent 55%), var(--zemin);
}
.sayfa-baslik { text-align: center; margin-bottom: 28px; }
.sayfa-baslik.sola { text-align: left; margin-bottom: 0; }
.sayfa-baslik h1 {
  margin: 0 0 8px; font: 600 clamp(26px, 3.4vw, 36px)/1.2 var(--baslik);
  color: var(--altin); letter-spacing: .04em;
}
.sayfa-baslik p { margin: 0; color: var(--soluk); }
.ust-satir { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }

.sekmeler { display: flex; justify-content: center; gap: 8px; margin: 0 0 20px; }
.sekme {
  padding: 10px 24px; border: 1px solid var(--cizgi-guclu); border-radius: 4px;
  background: rgba(10, 8, 6, 0.45); color: var(--metin); font: 600 15px/1 var(--govde); cursor: pointer;
}
.sekme:hover { color: var(--altin); }
.sekme[aria-selected="true"] {
  color: #1d1408; border-color: transparent;
  background: linear-gradient(var(--altin-acik), var(--altin-koyu));
}

.tablo-kap { overflow-x: auto; border: 1px solid var(--cizgi); border-radius: 6px; background: var(--panel); }
.tablo-kap.ic { background: transparent; }
.tablo { width: 100%; border-collapse: collapse; font-size: 15px; }
.tablo th {
  padding: 12px 14px; text-align: left; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--soluk); border-bottom: 1px solid var(--cizgi);
}
.tablo td { padding: 11px 14px; white-space: nowrap; border-bottom: 1px solid rgba(233, 199, 123, 0.08); }
.tablo tbody tr:last-child td { border-bottom: 0; }
.tablo tbody tr:hover td { background: rgba(233, 199, 123, 0.04); }
.tablo .sayi { text-align: right; font-variant-numeric: tabular-nums; }
.tablo td.sira { width: 52px; font: 600 16px/1 var(--baslik); color: var(--soluk); }
.tablo tr.ilk1 td.sira { color: #f0d28a; }
.tablo tr.ilk2 td.sira { color: #d3d9e0; }
.tablo tr.ilk3 td.sira { color: #d49a6a; }
.soluk { color: var(--soluk); }
.durum { margin: 0; padding: 40px 16px; text-align: center; color: var(--soluk); }
.tablo-not { margin: 12px 2px 0; font-size: 13px; color: #8a8171; }

.krallik { display: inline-block; width: 10px; height: 10px; margin-right: 9px; border-radius: 50%; vertical-align: 1px; background: #5b544a; }
.krallik.k1 { background: #d9534f; }
.krallik.k2 { background: #e2c044; }
.krallik.k3 { background: #4a90d9; }

.hesap-izgara { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); margin-bottom: 20px; }
@media (max-width: 860px) { .hesap-izgara { grid-template-columns: 1fr; } }
.panel-kart { padding: clamp(20px, 3vw, 28px); border: 1px solid var(--cizgi); border-radius: 8px; background: var(--panel); }
.panel-kart.dar { max-width: 460px; }
.panel-kart h2 { margin: 0 0 16px; font: 600 20px/1.2 var(--baslik); color: var(--altin); letter-spacing: .03em; }
.panel-kart .dugme { min-width: 200px; }
.bilgi { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; margin: 0; font-size: 15px; }
.bilgi dt { color: var(--soluk); }
.bilgi dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.bakiye { display: flex; gap: 12px; margin-top: 20px; }
.bakiye div { flex: 1; padding: 14px 10px; border: 1px solid var(--cizgi); border-radius: 6px; text-align: center; }
.bakiye strong { display: block; font: 600 24px/1.15 var(--baslik); color: var(--altin); }
.bakiye span { font-size: 13px; color: var(--soluk); }
.form-mesaj.basari { background: rgba(62, 110, 58, 0.30); border: 1px solid rgba(159, 209, 154, 0.45); color: #d6efd2; }

/* --- Portre, bayrak, EXP (oyunun kendi gorselleri: /gorsel/yuz, /gorsel/krallik) --- */
.portre {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 46px; height: 46px; padding: 2px; border-radius: 50%;
  background: linear-gradient(150deg, var(--altin-acik), var(--altin-koyu) 60%, #5a3d14);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.65), 0 4px 12px rgba(0, 0, 0, 0.45);
}
.portre img, .portre .yuz-bos { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #120d08; }
.portre.mini { width: 26px; height: 26px; padding: 1px; }
.portre.orta-boy { width: 66px; height: 66px; padding: 3px; }
.portre.buyuk { width: 86px; height: 86px; padding: 3px; }

.bayrak {
  display: inline-block; width: 30px; height: 18.5px; object-fit: cover; border-radius: 2px; vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(233, 199, 123, 0.35), 0 2px 6px rgba(0, 0, 0, 0.4);
}
.bayrak.mini { width: 22px; height: 13.5px; margin-right: 7px; vertical-align: -2px; }
.bayrak.orta { width: 40px; height: 25px; flex: none; }
.bayrak.bos { background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--cizgi); }
.bayrak.amblem { width: 104px; height: 64px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(233, 199, 123, 0.45), 0 8px 20px rgba(0, 0, 0, 0.5); }

.kisi { display: flex; align-items: center; gap: 12px; min-width: 0; }
.kisi-metin { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kisi-metin strong { font-weight: 600; color: var(--metin); }
.kisi-metin small { font-size: 13px; color: var(--soluk); }
.tablo .sv {
  display: inline-block; min-width: 40px; padding: 5px 9px; border: 1px solid var(--cizgi-guclu); border-radius: 999px;
  text-align: center; font: 600 14px/1 var(--baslik); color: var(--altin); background: rgba(233, 199, 123, 0.06);
}
.tablo td { vertical-align: middle; }

.exp { display: flex; flex-direction: column; gap: 6px; min-width: 160px; }
.exp-cubuk {
  position: relative; height: 7px; overflow: hidden; border-radius: 999px;
  background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}
.exp-cubuk span {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, #7c4f1a, var(--altin) 70%, #fff1c7);
  box-shadow: 0 0 10px rgba(233, 199, 123, 0.45);
  transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.exp small { font-size: 12.5px; color: var(--soluk); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tablo td.exp-hucre { width: 230px; }
@media (prefers-reduced-motion: reduce) { .exp-cubuk span, .karakter-kart { transition: none; } }

/* --- Siralama: suzgec ve podyum ------------------------------------------ */
.suzgec { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 34px; }
.krallik-secim { display: flex; flex-wrap: wrap; gap: 8px; }
.cip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px;
  border: 1px solid var(--cizgi); border-radius: 999px; background: rgba(10, 8, 6, 0.5);
  color: var(--metin); font: 500 14px/1 var(--govde); cursor: pointer;
}
.cip img { width: 24px; height: 15px; object-fit: cover; border-radius: 2px; }
.cip:hover { border-color: var(--cizgi-guclu); }
.cip[aria-pressed="true"] { border-color: var(--altin); color: var(--altin); background: rgba(233, 199, 123, 0.10); }
.arama {
  flex: 1 1 220px; max-width: 280px; padding: 10px 16px;
  border: 1px solid var(--cizgi); border-radius: 999px; background: rgba(10, 8, 6, 0.55);
  color: var(--metin); font: 14px/1.2 var(--govde);
}
.arama:focus { outline: none; border-color: var(--altin); box-shadow: 0 0 0 3px rgba(233, 199, 123, 0.15); }

.podyum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 18px; margin: 0 0 26px; }
.podyum-kart {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 34px 18px 20px; text-align: center; border: 1px solid var(--cizgi); border-radius: 12px;
  background: linear-gradient(180deg, rgba(233, 199, 123, 0.07), rgba(16, 12, 9, 0.92) 45%);
  box-shadow: var(--golge);
}
.podyum-kart.yer1 {
  order: 2; padding-top: 46px; border-color: rgba(240, 210, 138, 0.6);
  background: linear-gradient(180deg, rgba(240, 210, 138, 0.18), rgba(16, 12, 9, 0.94) 50%);
}
.podyum-kart.yer2 { order: 1; }
.podyum-kart.yer3 { order: 3; }
.podyum-kart h3 { margin: 4px 0 0; font: 600 19px/1.2 var(--baslik); color: var(--metin); overflow-wrap: anywhere; }
.madalya {
  position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  font: 700 16px/1 var(--baslik); color: #1d1408;
  background: linear-gradient(145deg, #fff0c2, #c9953f);
  box-shadow: 0 0 0 3px var(--zemin), 0 4px 14px rgba(0, 0, 0, 0.5);
}
.yer1 .madalya { top: -20px; width: 40px; height: 40px; font-size: 18px; }
.yer2 .madalya { background: linear-gradient(145deg, #f4f6f8, #9aa3ad); }
.yer3 .madalya { background: linear-gradient(145deg, #f2c29b, #9c5f32); }
.yer1 .portre.buyuk { width: 104px; height: 104px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.65), 0 0 30px rgba(240, 210, 138, 0.35); }
.yer2 .portre { background: linear-gradient(150deg, #f4f6f8, #8c949c 60%, #454b52); }
.yer3 .portre { background: linear-gradient(150deg, #f2c29b, #9c5f32 60%, #4e2c14); }
.podyum-alt { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font-size: 14px; color: var(--soluk); }
.podyum-alt .bayrak.mini { margin-right: 0; }
.podyum-seviye { display: flex; align-items: baseline; gap: 7px; margin: 4px 0 2px; }
.podyum-seviye span { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soluk); }
.podyum-seviye strong { font: 700 30px/1 var(--baslik); color: var(--altin); }
.podyum-kart .exp { width: 100%; min-width: 0; align-items: center; }
.podyum-kart .exp-cubuk { width: 100%; }
.podyum-lonca { margin: 0; font-size: 13px; color: #cfc6b5; }
.podyum-istatistik { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 0; font-size: 13.5px; color: var(--soluk); }
.podyum-istatistik b { font-weight: 600; color: var(--metin); }
.lonca-amblem { display: grid; place-items: center; min-height: 68px; }
.amblem-bos { width: 104px; height: 64px; border: 1px dashed var(--cizgi-guclu); border-radius: 4px; }
.goster-dar { display: none; }

@media (max-width: 720px) {
  .podyum { grid-template-columns: 1fr; gap: 30px; }
  .podyum-kart.yer1, .podyum-kart.yer2, .podyum-kart.yer3 { order: 0; }
  .suzgec { flex-direction: column; align-items: stretch; }
  .arama { max-width: none; }
}
@media (max-width: 560px) {
  .tablo td.exp-hucre { width: auto; }
  .exp { min-width: 116px; }
  .tablo .goster-dar { display: inline; }
  .tablo td, .tablo th { padding-left: 10px; padding-right: 10px; }
  .kisi { gap: 9px; }
}

/* --- Hesabim ------------------------------------------------------------- */
.hesap-afis {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 24px;
  margin-bottom: 18px; padding: clamp(20px, 3vw, 30px); overflow: hidden;
  border: 1px solid var(--cizgi); border-radius: 14px; box-shadow: var(--golge);
  background: radial-gradient(120% 150% at 0% 0%, var(--afis-renk, rgba(233, 199, 123, 0.14)), transparent 60%), var(--panel);
}
.hesap-afis.k1 { --afis-renk: rgba(200, 50, 40, 0.32); }
.hesap-afis.k2 { --afis-renk: rgba(220, 175, 30, 0.26); }
.hesap-afis.k3 { --afis-renk: rgba(40, 100, 210, 0.32); }
.afis-bayrak { flex: none; width: 128px; height: 79px; border-radius: 5px; box-shadow: 0 0 0 1px rgba(233, 199, 123, 0.45), 0 10px 24px rgba(0, 0, 0, 0.55); }
.afis-metin { flex: 1 1 260px; min-width: 0; }
.afis-metin .ust-yazi { margin: 0 0 4px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--altin); }
.afis-metin h1 { margin: 0 0 6px; font: 600 clamp(24px, 3.2vw, 34px)/1.2 var(--baslik); color: var(--metin); overflow-wrap: anywhere; }
.afis-metin p { margin: 0; color: var(--soluk); }
.afis-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.hesap-ozet { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.5fr); margin-bottom: 34px; }
@media (max-width: 860px) {
  .hesap-ozet { grid-template-columns: 1fr 1fr; }
  .hesap-ozet .istatistik-kart { grid-column: 1 / -1; }
}
.bakiye-kart { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border: 1px solid var(--cizgi); border-radius: 12px; background: var(--panel); }
/* Market ikonlari oyunda 16x16: tam 2 kat, piksel piksel buyutulur (bulaniklasmasin). */
.bakiye-kart img {
  flex: none; width: 32px; height: 32px; padding: 8px; box-sizing: content-box; image-rendering: pixelated;
  border: 1px solid var(--cizgi); border-radius: 50%; background: rgba(233, 199, 123, 0.06);
}
.bakiye-kart strong { display: block; font: 600 26px/1.1 var(--baslik); color: var(--altin); }
.bakiye-kart span { font-size: 13px; color: var(--soluk); }
.bilgi-kart { display: block; }

.bolum-alt-baslik { margin: 0 0 14px; font: 600 22px/1.2 var(--baslik); color: var(--altin); letter-spacing: 0.03em; }
.karakter-izgara { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-bottom: 34px; }
.karakter-kart {
  display: flex; flex-direction: column; gap: 14px; padding: 18px;
  border: 1px solid var(--cizgi); border-radius: 14px;
  background: linear-gradient(180deg, rgba(233, 199, 123, 0.07), var(--panel) 42%);
  transition: border-color 0.2s, transform 0.2s;
}
.karakter-kart:hover { border-color: var(--cizgi-guclu); transform: translateY(-2px); }
.kart-ust { display: flex; align-items: center; gap: 14px; }
.kart-ad { flex: 1; min-width: 0; }
.kart-ad h3 { margin: 0 0 3px; font: 600 18px/1.2 var(--baslik); color: var(--metin); overflow-wrap: anywhere; }
.kart-ad p { margin: 0; font-size: 13.5px; color: var(--soluk); }
.seviye-rozet {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 52px; height: 52px; padding: 0 6px; border: 1px solid var(--cizgi-guclu); border-radius: 12px;
  background: rgba(233, 199, 123, 0.08); font: 700 20px/1 var(--baslik); color: var(--altin);
}
.seviye-rozet small { font: 500 10px/1 var(--govde); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soluk); }
.karakter-kart .exp { min-width: 0; }
.mini-bilgi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding-top: 12px; border-top: 1px solid rgba(233, 199, 123, 0.1); }
.mini-bilgi dt { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #8a8171; }
.mini-bilgi dd { margin: 3px 0 0; overflow: hidden; font-size: 14px; color: var(--metin); text-overflow: ellipsis; white-space: nowrap; }
.karakter-kart.bos {
  align-items: center; justify-content: center; gap: 8px; min-height: 196px; text-align: center;
  border-style: dashed; background: transparent; color: var(--soluk); text-decoration: none;
}
.karakter-kart.bos .arti { display: grid; place-items: center; width: 48px; height: 48px; border: 1px dashed var(--cizgi-guclu); border-radius: 50%; font-size: 26px; color: var(--altin); }
.karakter-kart.bos strong { font-weight: 600; color: var(--metin); }
.karakter-kart.bos small { font-size: 13px; }

/* --- Hesabim: yan menu + bolumler (#genel, #karakterler, #guvenlik) ------- */
.hesap-duzen { display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: start; gap: 28px; }
.hesap-yan {
  position: sticky; top: 92px; display: flex; flex-direction: column; gap: 14px; padding: 16px;
  border: 1px solid var(--cizgi); border-radius: 14px; background: var(--panel); box-shadow: var(--golge);
}
.yan-kimlik { display: flex; align-items: center; gap: 12px; padding: 4px 6px 14px; border-bottom: 1px solid rgba(233, 199, 123, 0.12); }
.yan-kimlik strong { font: 600 16px/1.2 var(--baslik); overflow-wrap: anywhere; }
.hesap-menu { display: flex; flex-direction: column; gap: 4px; }
.menu-oge {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px;
  border: 1px solid transparent; border-radius: 9px; background: none;
  color: #cfc6b5; font: 500 15px/1.2 var(--govde); text-align: left; text-decoration: none; cursor: pointer;
}
.menu-oge svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.menu-oge:hover { color: var(--metin); background: rgba(233, 199, 123, 0.06); }
.menu-oge:focus-visible { outline: 2px solid var(--altin); outline-offset: 1px; }
.menu-oge[aria-current="page"] {
  color: var(--altin); border-color: rgba(233, 199, 123, 0.35);
  background: linear-gradient(90deg, rgba(233, 199, 123, 0.16), rgba(233, 199, 123, 0.03));
  box-shadow: inset 3px 0 0 var(--altin);
}
.menu-sayac {
  margin-left: auto; min-width: 22px; padding: 3px 7px; border-radius: 999px; text-align: center;
  font-size: 12px; font-weight: 600; color: #1d1408; background: var(--altin-koyu);
}
.menu-sayac:empty { display: none; }
.menu-ayrac { height: 1px; margin: 8px 6px; background: rgba(233, 199, 123, 0.12); }
#cikisDugme:hover { color: var(--hata); }

.hesap-icerik { min-width: 0; }
.hesap-panel [tabindex="-1"]:focus { outline: none; }
.panel-baslik { margin-bottom: 22px; }
.panel-baslik h1 { margin: 0 0 6px; font: 600 clamp(26px, 3vw, 32px)/1.2 var(--baslik); color: var(--altin); letter-spacing: 0.03em; }
.panel-baslik p { margin: 0; color: var(--soluk); }

.istatistik-kart { justify-content: space-around; gap: 18px; }
.istatistik-kart > div { text-align: center; }
.baslik-satir { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.metin-bag { font-size: 14px; color: var(--altin); text-decoration: none; }
.metin-bag:hover { text-decoration: underline; }

.vitrin-kart {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px;
  padding: clamp(18px, 3vw, 26px); border: 1px solid var(--cizgi-guclu); border-radius: 14px;
  background: radial-gradient(90% 140% at 0% 50%, rgba(233, 199, 123, 0.12), transparent 60%), var(--panel);
}
.vitrin-metin { min-width: 0; }
.vitrin-metin .ust-yazi { margin: 0 0 4px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soluk); }
.vitrin-metin h3 { margin: 0 0 12px; font: 700 clamp(22px, 3vw, 28px)/1.15 var(--baslik); color: var(--metin); overflow-wrap: anywhere; }
.vitrin-metin .exp { min-width: 0; max-width: 420px; }
.vitrin-sayilar { display: flex; gap: 12px; }
.vitrin-sayilar div {
  min-width: 86px; padding: 12px 10px; text-align: center;
  border: 1px solid var(--cizgi); border-radius: 12px; background: rgba(10, 8, 6, 0.4);
}
.vitrin-sayilar strong { display: block; font: 700 26px/1.1 var(--baslik); color: var(--altin); }
.vitrin-sayilar span { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--soluk); }
.vitrin-bos { min-height: 150px; }

.guvenlik-izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 18px; }
.guvenlik-yan { display: flex; flex-direction: column; gap: 18px; }
.kart-metin { margin: 0 0 16px; color: #cfc6b5; line-height: 1.55; }
.ipucu-liste { margin: 0; padding-left: 20px; color: #cfc6b5; line-height: 1.55; }
.ipucu-liste li + li { margin-top: 8px; }
.ipucu-liste li::marker { color: var(--altin); }

@media (max-width: 1080px) {
  .guvenlik-izgara { grid-template-columns: 1fr; }
  .vitrin-kart { grid-template-columns: auto minmax(0, 1fr); }
  .vitrin-sayilar { grid-column: 1 / -1; }
  .vitrin-sayilar div { flex: 1; }
}
@media (max-width: 860px) {
  .hesap-duzen { grid-template-columns: 1fr; gap: 18px; }
  .hesap-yan { position: static; padding: 10px; gap: 0; box-shadow: none; }
  .yan-kimlik { display: none; }
  .hesap-menu { flex-direction: row; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .hesap-menu::-webkit-scrollbar { display: none; }
  .menu-oge { flex: none; width: auto; padding: 9px 12px; white-space: nowrap; }
  .menu-oge[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--altin); }
  .menu-ayrac { width: 1px; height: auto; margin: 6px 2px; }
}
@media (max-width: 560px) {
  .vitrin-kart { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .vitrin-metin .exp { align-items: center; margin: 0 auto; }
  .istatistik-kart { grid-column: 1 / -1; }
}

/* --- Hesabim: yang, depo, girisler, ekipman penceresi ---------------------- */
.hesap-ozet { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr); }
.bakiye-kart > div { min-width: 0; }
.bakiye-kart span { overflow-wrap: anywhere; }
@media (max-width: 1180px) {
  .hesap-ozet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hesap-ozet .istatistik-kart { grid-column: auto; }
}
.menu-sayac.vurgu { color: #1d1408; background: var(--altin); box-shadow: 0 0 12px rgba(233, 199, 123, 0.5); }

.duyuru {
  display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 14px 18px;
  border: 1px solid rgba(233, 199, 123, 0.5); border-radius: 12px; text-decoration: none; color: var(--metin);
  background: linear-gradient(90deg, rgba(233, 199, 123, 0.16), rgba(233, 199, 123, 0.04));
}
.duyuru svg { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--altin); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.duyuru span { flex: 1; }
.duyuru b { font-weight: 600; color: var(--altin); white-space: nowrap; }
.duyuru:hover { border-color: var(--altin); }

.karakter-kart .mini-bilgi { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; }
/* Kartta seviye rozeti portrenin kosesinde: isim 16 karaktere kadar kelime ortasindan bolunmesin
   (olculdu: yan yana rozetle ~100 px kaliyordu, "OrnekSavasci" ikiye bolundu). */
.karakter-kart .kart-ust { position: relative; }
/* Rozet portrenin alt ortasinda (66 px portre genisligi icinde): sinif yazisinin ustune binmesin. */
.karakter-kart .seviye-rozet {
  position: absolute; left: 33px; top: 52px; transform: translateX(-50%); flex-direction: row; gap: 3px;
  min-width: 0; height: 26px; padding: 0 8px; border-radius: 999px;
  border-color: var(--altin); background: #1d1408; font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.karakter-kart .seviye-rozet small { font-size: 9px; }
.karakter-kart .kart-ad { padding-left: 4px; }
.karakter-kart .kart-ad h3 { font-size: 17px; overflow-wrap: break-word; word-break: normal; }
.kart-alt { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.kart-alt .dugme { min-width: 0; }
.kart-alt .dugme[disabled] { opacity: 0.45; cursor: default; }

.ara-bosluk { margin-top: 30px; }
.esya-izgara { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.esya-kart {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  border: 1px solid var(--cizgi); border-radius: 12px; background: var(--panel);
}
.esya-kart.alindi { opacity: 0.7; }
.esya-kart .kisi-metin strong { overflow-wrap: anywhere; }
.esya-yuva {
  position: relative; display: grid; place-items: center; flex: none; width: 46px; height: 46px;
  border: 1px solid rgba(233, 199, 123, 0.3); border-radius: 8px;
  background: radial-gradient(circle, rgba(233, 199, 123, 0.1), rgba(0, 0, 0, 0.45) 70%);
}
.esya-yuva img { max-width: 32px; max-height: 42px; image-rendering: auto; }
.esya-yuva .soru { color: var(--soluk); font-weight: 600; }
.esya-yuva .adet {
  position: absolute; right: -6px; bottom: -6px; min-width: 20px; padding: 2px 5px; border-radius: 999px;
  font-size: 11px; line-height: 1.2; text-align: center; color: #1d1408; background: var(--altin);
}
.bos-kutu { grid-column: 1 / -1; padding: 26px 16px; border: 1px dashed var(--cizgi); border-radius: 12px; }

.panel-kart.genis { grid-column: 1 / -1; }
.panel-kart .tablo-kap.ic { border: 0; }
.panel-kart .tablo td .kisi-metin small { font-size: 12px; }

.ekipman-pencere {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; overflow: auto;
  border: 1px solid var(--cizgi-guclu); border-radius: 14px; color: var(--metin);
  background: #120d09; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}
.ekipman-pencere::backdrop { background: rgba(5, 4, 3, 0.72); backdrop-filter: blur(2px); }
.pencere-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--cizgi); }
.pencere-ust h2 { margin: 0; font: 600 20px/1.2 var(--baslik); color: var(--altin); overflow-wrap: anywhere; }
.pencere-kapat { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--cizgi); border-radius: 8px; background: none; color: var(--metin); cursor: pointer; }
.pencere-kapat svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pencere-kapat:hover { border-color: var(--altin); color: var(--altin); }
.ekipman-govde { display: flex; flex-wrap: wrap; gap: 20px; padding: 18px; }
/* Oyundaki ekipman penceresi 155x187; 1.5 kat, piksel piksel. */
.m2-ekipman-kap { flex: none; width: 233px; height: 281px; }
.m2-ekipman {
  position: relative; width: 155px; height: 187px; transform: scale(1.5); transform-origin: 0 0;
  background: url("/gorsel/ui/ekipman_zemin.png") no-repeat; image-rendering: pixelated;
}
.m2-yuva { position: absolute; display: block; width: 32px; }
.m2-yuva img { display: block; width: 32px; height: 100%; object-fit: contain; object-position: top; }
.ekipman-liste { flex: 1 1 220px; display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ekipman-liste li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); }
.liste-ikon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; }
.liste-ikon img { max-width: 32px; max-height: 34px; }
.ekipman-liste:empty::before { content: "Bu karakterin üzerinde eşya yok."; color: var(--soluk); }

@media (max-width: 560px) {
  .menu a.gizle-dar { display: none; }
  .dugme.buyuk { padding: 14px 26px; }
  .tablo .gizle-dar-hucre { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}