:root{
  --bg1:#0f172a; --bg2:#111827;
  --card:#0b1220; --card2:#0f1a30;
  --text:#e5e7eb; --muted:#9ca3af;
  --line:rgba(255,255,255,.10);
  --shadow: 0 18px 60px rgba(0,0,0,.40);
  --radius:20px;
  --primary:#22c55e; --primary2:#16a34a;
  --accent:#38bdf8;
}
*{box-sizing:border-box}




/* Motion disabled: remove all smooth transitions/animations */
*{transition:none !important;animation:none !important;scroll-behavior:auto !important;}

/* BEYAZ EKRAN HATASI ÇÖZÜMÜ: html,body{height:100%} SİLİNDİ */

body{
  margin:0;
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  /* Eski sabit arkaplan kodları temizlendi, işi alttaki sanal katmana bırakıyoruz */
  background: transparent !important;
}



a{color:inherit;text-decoration:none}
.container{max-width:1080px;margin:0 auto;padding:18px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.muted{color:var(--muted)}
hr{border:0;border-top:1px solid var(--line);margin:14px 0}

/* Top Links */
.toplinks{position:sticky;top:0;z-index:20;background:rgba(15,23,42,.70);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.toplinks .inner{max-width:1080px;margin:0 auto;padding:10px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.2px}
.brand .dot{width:10px;height:10px;border-radius:999px;background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:0 0 0 5px rgba(34,197,94,.10)}
.navlinks{display:flex;flex-wrap:wrap;gap:10px}
.navlinks a{font-size:13px;color:var(--muted);padding:7px 10px;border-radius:999px;border:1px solid transparent}
.navlinks a:active{color:var(--text);border-color:var(--line);background:rgba(255,255,255,.04)}

/* Basics */
.card{width:min(760px, 100%);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.heroWrap{min-height: calc(100vh - 62px);display:grid;place-items:center;padding:28px 0}
.heroTitle{font-size:34px;margin:0 0 10px 0}
.heroSub{margin:0;color:var(--muted);line-height:1.6;font-size:15px}
.heroActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:none;cursor:pointer;padding:10px 14px;border-radius:999px;font-weight:800}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#06210f;box-shadow:0 12px 34px rgba(34,197,94,.22)}
.btn-primary:active{filter:brightness(1.05)}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn-ghost:active{background:rgba(255,255,255,.04)}
.pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.pill{font-size:12px;color:var(--muted);padding:7px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(0,0,0,.18)}
.form{display:grid;gap:10px;margin-top:14px}
label{font-size:13px;color:var(--muted)}
input,select,textarea{width:100%;padding:11px 12px;border-radius:14px;border:1px solid var(--line);background:rgba(0,0,0,.20);color:var(--text)}
textarea{min-height:100px;resize:vertical}
.flash{margin:12px 0;padding:10px 12px;border-radius:14px;border:1px solid var(--line)}
.flash.ok{background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.35)}
.flash.err{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.35)}
.flash.warn{background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.35)}
.kpi{display:flex;gap:10px;flex-wrap:wrap}
.badge{display:inline-flex;gap:8px;align-items:center;font-size:12px;padding:7px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(0,0,0,.18);color:var(--muted)}
.badge strong{color:var(--text)}
.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table th{font-size:12px;color:var(--muted);text-align:left;padding:6px 10px}
.table td{background:rgba(0,0,0,.18);border:1px solid var(--line);padding:10px}
.table tr td:first-child{border-top-left-radius:14px;border-bottom-left-radius:14px}
.table tr td:last-child{border-top-right-radius:14px;border-bottom-right-radius:14px}
.footer{padding:16px 0;color:var(--muted);border-top:1px solid var(--line);background:rgba(0,0,0,.10)}

/* Shell + SideDock (for MMO pages) */
.appShell{display:flex;gap:18px;align-items:flex-start}
.sideDock{width:64px;position:sticky;top:80px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:10px 8px;display:flex;flex-direction:column;gap:10px}
.dockBtn{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:var(--text);font-weight:900}
.dockBtn.active{outline:2px solid rgba(34,197,94,.30);background:rgba(34,197,94,.10)}
.dockBtn:active{filter:brightness(1.08)}
.pagePanel{flex:1;background:rgba(0,0,0,.12);border:1px solid rgba(255,255,255,.10);border-radius:20px;padding:16px}

/* Facility template */
.facHeader{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.14)}
.facCover{width:74px;height:74px;border-radius:18px;border:1px solid rgba(255,255,255,.12);overflow:hidden;background:linear-gradient(135deg, rgba(34,197,94,.20), rgba(56,189,248,.18));display:grid;place-items:center;font-size:34px;font-weight:900}
.facTitle{margin:0;font-size:26px;font-weight:900}
.facTopRow{display:flex;flex-direction:column;gap:10px;flex:1}
.statRow{display:flex;gap:10px;flex-wrap:wrap}
.statPill{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.16);font-size:13px;color:var(--muted)}
.statPill strong{color:var(--text)}
.statPill .mini{font-size:12px;color:var(--muted);opacity:.9}
.prodBox{margin-top:14px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.14);padding:14px}
.prodBoxHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.prodBoxHead h2{margin:0;font-size:16px}
.hdrIcon{width:42px;height:42px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);display:grid;place-items:center}
.lineRow{display:grid;grid-template-columns:56px 1fr 260px;gap:12px;padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.16);margin-top:10px}
.lineImg{width:56px;height:56px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);display:grid;place-items:center;font-size:22px}
.lineMid{display:flex;flex-direction:column;gap:6px}
.lineName{font-weight:900}
.lineTopMeta{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:13px}
.goldLine{height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(255,255,255,.10)}
.goldLine > span{display:block;height:100%;background:linear-gradient(90deg,#f59e0b,#fbbf24);width:0%}
.lineBottomMeta{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px}
.lineRight{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.priceTag{padding:8px 10px;border-radius:12px;border:1px solid rgba(34,197,94,.25);background:rgba(34,197,94,.10);font-weight:900;color:#34d399;min-width:84px;text-align:center}
.ctrlBtn{width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);color:var(--text);cursor:pointer;display:grid;place-items:center}
.ctrlBtn:active{filter:brightness(1.1)}

/* Mini progress (facility lines) */
.miniProgress{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 8px;
  border:1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
}
.miniProgressBar{
  width: 140px;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.10);
}
.miniProgressBar > span{
  display:block;
  height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}
.miniProgressText{
  font-size: 12px;
  color: var(--muted);
  min-width: 34px;
  text-align:right;
}

/* Button-like progress bar */
.btn-progress{position:relative;overflow:hidden;min-width:140px;justify-content:center;cursor:default}
.btn-progress:active{filter:none}
.btn-progress-fill{position:absolute;left:0;top:0;bottom:0;width:0%;background:linear-gradient(135deg,var(--primary),var(--primary2));opacity:.35}
.btn-progress-text{position:relative;z-index:1;font-size:12px;font-weight:900;letter-spacing:.2px}

/* Shops */
.grid2{display:grid;grid-template-columns:2fr 1fr;gap:16px}
@media (max-width: 900px){.grid2{grid-template-columns:1fr}}
.row{display:flex;align-items:center}
.row.between{justify-content:space-between}
.row.gap{gap:10px;flex-wrap:wrap}
.inline{display:inline-block;margin:0}
hr.sep{border:0;border-top:1px solid rgba(255,255,255,.08);margin:12px 0}
.lineCard{padding:14px;margin-top:14px}
.muted{opacity:.85}

/* ==============================
   HOME MENU GRID (AUTO-ADDED)
   ============================== */

.homeMenu { padding: 10px 6px; }
.homeMenuHeader{display:flex;align-items:flex-end;justify-content:space-between;margin:6px 4px 14px}
.homeMenuTitle{margin:0;font-size:22px;letter-spacing:.2px}
.homeMenuSub{opacity:.75;margin-top:4px;font-size:13px}

.menuGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width: 540px) and (max-width: 859px){ .menuGrid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (min-width: 860px){ .menuGrid{grid-template-columns:repeat(4,minmax(0,1fr));} }

.menuCard{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 14px;
  border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  text-decoration:none;
  color: inherit;
  min-height: 64px;
  overflow:hidden;
  }
.menuCard:active{
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,0,0,.28);
  border-color: rgba(99, 102, 241, .35);
  background: linear-gradient(180deg, rgba(99,102,241,.14), rgba(255,255,255,.03));
}
.menuCard:active{transform: translateY(0px);}

.menuEmoji{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  background: rgba(99,102,241,.14);
  border: 1px solid rgba(255,255,255,.08);
  font-size:20px;
  flex: 0 0 44px;
}
.menuText{min-width:0;flex:1}
.menuTitle{font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menuArrow{opacity:.6;font-size:18px;margin-left:auto}

/* Light theme compatibility if body gets a light class elsewhere */
body.bg-light-custom .menuCard{
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(10,20,40,.12);
  box-shadow: 0 10px 26px rgba(10,20,40,.10);
}
body.bg-light-custom .menuCard:active{
  border-color: rgba(37,99,235,.25);
  background: linear-gradient(180deg, rgba(37,99,235,.10), rgba(255,255,255,.82));
}
body.bg-light-custom .menuEmoji{
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(10,20,40,.10);
}

/* ==============================
   HOME MENU PRO (AUTO-ADDED)
   ============================== */

/* Layout */
.homeMenuPro { padding: 10px 6px 22px; }
.homeHero{
  display:flex;align-items:center;justify-content:space-between;
  padding: 14px 14px 12px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(0,0,0,0));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 42px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  margin: 6px 2px 14px;
}
.homeHeroTitle{ margin:0; font-size: 24px; letter-spacing:.2px; }
.homeHeroSub{ margin-top:4px; font-size: 13px; opacity:.78; }
.homeHeroHint{
  width: 44px; height: 44px;
  display:grid; place-items:center;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  opacity:.9;
}

/* Sections */
.homeSection{ margin: 14px 2px; }
.homeSectionHeader{ display:flex; align-items:center; gap: 10px; margin: 0 2px 10px; }
.homeSectionTitle{ font-weight: 800; font-size: 13px; letter-spacing: .8px; text-transform: uppercase; opacity: .85; }
.homeSectionLine{ height: 1px; flex: 1; background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,0)); }

/* Grid */
.menuGridPro{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 560px) and (max-width: 919px){ .menuGridPro{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 920px){ .menuGridPro{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Card */
.menuCardPro{
  position: relative;
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 16px 14px;
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 34px rgba(0,0,0,.22);
  overflow: hidden;
  min-height: 78px;
  }
.menuCardPro::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(420px 140px at 20% 0%, rgba(99,102,241,.22), transparent 60%);
  opacity: .9;
  pointer-events:none;
}
.menuCardPro::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(280px 120px at 85% 30%, rgba(56,189,248,.16), transparent 55%);
  opacity:.9;
  pointer-events:none;
}
.menuCardPro:active{
  transform: translateY(-2px);
  box-shadow: 0 18px 48px rgba(0,0,0,.32);
  border-color: rgba(99,102,241,.38);
  background: linear-gradient(180deg, rgba(99,102,241,.14), rgba(255,255,255,.03));
}
.menuCardPro:active{ transform: translateY(0px); }

/* Icon */
.menuIconPro{
  position:relative;
  width: 52px; height: 52px;
  border-radius: 18px;
  display:grid; place-items:center;
  flex: 0 0 52px;
  font-size: 22px;
  background: rgba(99,102,241,.14);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

/* Text */
.menuBodyPro{ position:relative; min-width:0; flex:1; }
.menuTitlePro{ position:relative; font-weight: 850; font-size: 14px; letter-spacing:.2px; }
.menuSubPro{ position:relative; margin-top: 4px; font-size: 12px; opacity:.76; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.menuChevronPro{ position:relative; opacity:.65; font-size: 20px; margin-left: auto; }

/* Light theme support */
body.bg-light-custom .homeHero{
  background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(255,255,255,.72));
  border: 1px solid rgba(10,20,40,.12);
  box-shadow: 0 16px 42px rgba(10,20,40,.10);
}
body.bg-light-custom .homeSectionLine{ background: linear-gradient(90deg, rgba(10,20,40,.18), rgba(10,20,40,0)); }
body.bg-light-custom .menuCardPro{
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(10,20,40,.12);
  box-shadow: 0 12px 30px rgba(10,20,40,.10);
}
body.bg-light-custom .menuCardPro:active{
  border-color: rgba(37,99,235,.25);
  box-shadow: 0 18px 44px rgba(10,20,40,.14);
}
body.bg-light-custom .menuIconPro{
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(10,20,40,.10);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .menuCardPro, .menuCardPro:active { transform: none; }
}

/* ==============================
   HOME MENU PRO LAYOUT FIX (AUTO-ADDED)
   ============================== */

/* Make the home panel use the available width (your current layout leaves huge empty area) */
.pagePanel.homeMenuPro {
  width: min(1180px, calc(100% - 12px));
  margin: 0 auto;
}

/* Force grid behavior even if other global CSS overrides it */
.homeMenuPro .menuGridPro {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 14px !important;
}
@media (max-width: 520px){
  .homeMenuPro .menuGridPro {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

/* Card sizing: look like tiles, not list items */
.homeMenuPro .menuCardPro {
  min-height: 102px;
  padding: 18px 16px;
}
.homeMenuPro .menuTitlePro {
  font-size: 15px;
}
.homeMenuPro .menuSubPro {
  font-size: 12px;
  opacity: .78;
}

/* Subtle divider under hero for "professional" feel */
.homeMenuPro .homeHero {
  margin-bottom: 16px;
}

/* If any global rules force anchors to be full-width blocks with margins, neutralize */
.homeMenuPro a.menuCardPro {
  margin: 0 !important;
}

/* ==============================
   HOME MENU PRO GLOW (AUTO-ADDED)
   ============================== */

/* Hero profile chip */
.homeProfileChip{
  display:flex; align-items:center; gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  text-decoration:none;
  color: inherit;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  }
.homeProfileChip:active{
  transform: translateY(-1px);
  border-color: rgba(99,102,241,.38);
  box-shadow: 0 16px 44px rgba(0,0,0,.28);
  background: linear-gradient(180deg, rgba(99,102,241,.12), rgba(255,255,255,.04));
}
.homeAvatar{
  width: 46px; height: 46px;
  border-radius: 16px;
  display:grid; place-items:center;
  font-weight: 900;
  letter-spacing:.6px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.homeProfileMeta{ min-width: 0; }
.homeProfileName{ font-weight: 850; font-size: 13px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; max-width: 180px; }
.homeProfileSub{ font-size: 12px; opacity:.72; margin-top: 2px; }
.homeProfileChevron{ opacity:.6; font-size: 20px; margin-left: 2px; }

/* More "can alıcı" lighting: subtle animated glow behind hero + cards */
.homeHero--glow{
  position: relative;
  overflow: hidden;
}
.homeHero--glow::before{
  content:"";
  position:absolute; inset:-40px;
  background:
    radial-gradient(520px 180px at 18% 0%, rgba(99,102,241,.35), transparent 62%),
    radial-gradient(420px 160px at 90% 30%, rgba(56,189,248,.22), transparent 58%);
  filter: blur(6px);
  opacity: .85;
  pointer-events:none;
}
.homeHero--glow::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(280px 120px at 55% 60%, rgba(34,197,94,.10), transparent 60%);
  opacity:.7;
  pointer-events:none;
}
/* Card "shine" sweep on hover */
.menuCardPro--shine{
  position: relative;
}
.menuCardPro--shine .menuBodyPro,
.menuCardPro--shine .menuIconPro,
.menuCardPro--shine .menuChevronPro{
  position: relative;
  z-index: 2;
}
.menuCardPro--shine::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(420px 140px at 20% 0%, rgba(99,102,241,.22), transparent 60%);
  opacity: .85;
  pointer-events:none;
}
.menuCardPro--shine::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width: 60%;
  height: 200%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  opacity: 0;
  pointer-events:none;
}
.menuCardPro--shine:active::after{
  opacity: 1;
  left: 120%;
}

/* Light theme adjustments */
body.bg-light-custom .homeProfileChip{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(10,20,40,.12);
}
body.bg-light-custom .homeProfileChip:active{
  box-shadow: 0 16px 44px rgba(10,20,40,.14);
}
body.bg-light-custom .homeAvatar{
  border: 1px solid rgba(10,20,40,.12);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .homeHero--glow::before{ }
  .menuCardPro--shine::after{ }
}

/* ==============================
   HOME HERO SPLIT PROFILE (AUTO-ADDED)
   ============================== */

/* Split hero layout */
.homeHero--split {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}
.homeHeroLeft {
  min-width: 0;
}
.homeHeroRight {
  display: grid;
  gap: 10px;
  justify-items: end;
}
@media (max-width: 820px) {
  .homeHero--split {
    grid-template-columns: 1fr;
  }
  .homeHeroRight {
    justify-items: start;
  }
}

/* Stats row inside hero */
.homeStatRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
@media (max-width: 820px) {
  .homeStatRow { justify-content: flex-start; }
}
.homeStatPill {
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  font-size: 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}
.homeStatPill strong { font-weight: 850; }

/* Compact profile card inside hero (right side) */
.homeProfileCard {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 44px rgba(0,0,0,.26);
  min-width: 280px;
  max-width: 360px;
  overflow: hidden;
  position: relative;
}
.homeProfileCard::before {
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(420px 140px at 20% 0%, rgba(99,102,241,.22), transparent 60%);
  opacity: .85;
  pointer-events:none;
}
.homeProfileCard:active {
  border-color: rgba(99,102,241,.38);
  box-shadow: 0 20px 56px rgba(0,0,0,.34);
}

.homeProfileBadges {
  margin-top: 6px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.homeBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

/* Keep the existing avatar styles but size-match */
.homeProfileCard .homeAvatar {
  width: 54px;
  height: 54px;
  border-radius: 18px;
}

/* Light theme */
body.bg-light-custom .homeStatPill {
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(10,20,40,.12);
  box-shadow: 0 12px 30px rgba(10,20,40,.10);
}
body.bg-light-custom .homeProfileCard {
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(10,20,40,.12);
  box-shadow: 0 16px 44px rgba(10,20,40,.12);
}
body.bg-light-custom .homeBadge {
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(10,20,40,.10);
}

/* ==============================
   BACKGROUND SCROLL BEHAVIOR (FIX)
   ============================== */

/* Keep the theme background gradients/patterns.
   IMPORTANT: Do NOT use fixed attachment here, so the background follows the page. */
/* ==============================
   PAGE LOADER OVERLAY (AUTO-ADDED)
   ============================== */

/* Full-page loader shown during navigation */
.pageLoader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  background: rgba(6,10,20,.55);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  }
.pageLoader.active {
  opacity: 1;
  pointer-events: all;
}

.loaderRing {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.25);
  border-top-color: rgba(99,102,241,.9);
  }

.loaderText {
  margin-top: 14px;
  font-size: 13px;
  opacity: .85;
  letter-spacing: .2px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .loaderRing { }
}

/* ==============================
   LEVEL PROGRESS BARS (AUTO-ADDED)
   ============================== */

/* Full bar (profile) */
.levelBarWrap {
  margin-top: 12px;
  padding: 12px 12px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}
.levelBarTop {
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

/* Header status (last seen) next to title */
.profileX .careerHeadStatus{ display:flex; align-items:center; }

/* Energy placed under the top row on the right (red area in design) */
.profileX .careerEnergyWrap{
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  justify-self: end;
  display:flex;
  flex-direction: column;
  align-items: flex-end;
}
.levelBarLabel { font-weight: 900; font-size: 13px; letter-spacing: .2px; }
.levelBarMeta  { font-size: 12px; opacity: .78; white-space: nowrap; }
.levelBarTrack {
  margin-top: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
  position: relative;
}
.levelBarFill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(99,102,241,.95), rgba(56,189,248,.85));
  box-shadow: 0 10px 26px rgba(99,102,241,.25);
  }
.levelBarHint { margin-top: 8px; font-size: 12px; opacity: .75; }

/* Mini bar (home header profile card) */
.homeMiniBar {
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap: 10px;
}
.homeMiniBarTrack {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
}
.homeMiniBarFill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(34,197,94,.88), rgba(56,189,248,.80));
  }
.homeMiniBarMeta {
  font-size: 12px;
  opacity: .75;
  min-width: 34px;
  text-align: right;
}

/* Light theme */
body.bg-light-custom .levelBarWrap {
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(10,20,40,.12);
}
body.bg-light-custom .levelBarTrack,
body.bg-light-custom .homeMiniBarTrack {
  background: rgba(10,20,40,.06);
  border: 1px solid rgba(10,20,40,.10);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .levelBarFill, .homeMiniBarFill { }
}

/* ==============================
   HOME BIG CARDS DASHBOARD (AUTO-ADDED)
   ============================== */

.homeDash { padding: 10px 6px 22px; }

/* Hero 2 */
.homeHero2 {
  display:flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 16px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(0,0,0,0));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 52px rgba(0,0,0,.26);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  margin: 6px 2px 16px;
}
.homeHero2--glow::before {
  content:"";
  position:absolute; inset:-40px;
  background:
    radial-gradient(560px 200px at 12% 0%, rgba(99,102,241,.36), transparent 62%),
    radial-gradient(460px 180px at 92% 40%, rgba(56,189,248,.22), transparent 58%);
  filter: blur(6px);
  opacity: .85;
  pointer-events:none;
}
.homeHero2Left { min-width: 0; z-index: 2; }
.homeHero2Title { margin: 0; font-size: 28px; letter-spacing:.2px; }
.homeHero2Sub { margin-top: 6px; font-size: 13px; opacity: .78; }

.homeHero2Pills { margin-top: 12px; display:flex; flex-wrap:wrap; gap: 8px; }
.pill {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
}
.pill strong { font-weight: 850; }

/* Hero profile card */
.heroProfile {
  z-index: 2;
  display:grid;
  grid-template-columns: 56px 1fr auto;
  align-items:center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 18px;
  text-decoration:none;
  color: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 16px 44px rgba(0,0,0,.24);
  min-width: 320px;
  max-width: 420px;
  overflow: hidden;
}
.heroProfile:active {
  border-color: rgba(99,102,241,.38);
  box-shadow: 0 22px 60px rgba(0,0,0,.34);
}
.heroAvatar {
  width: 56px; height: 56px;
  border-radius: 18px;
  display:grid; place-items:center;
  font-weight: 900;
  letter-spacing:.6px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
.heroName { font-weight: 900; font-size: 14px; }
.heroSmall { margin-top: 4px; font-size: 12px; opacity:.78; }
.heroChevron { opacity:.6; font-size: 22px; }

.heroMiniBar { margin-top: 10px; display:flex; gap: 10px; align-items:center; }
.heroMiniTrack {
  flex:1;
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
}
.heroMiniFill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(34,197,94,.88), rgba(56,189,248,.80));
  }
.heroMiniPct { font-size: 12px; opacity:.78; min-width: 38px; text-align:right; }

/* Featured big cards */
.homeRow {
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0 2px 16px;
}
@media (max-width: 860px){
  .homeHero2 { flex-direction: column; }
  .heroProfile { min-width: 0; width: 100%; }
}
@media (max-width: 620px){
  .homeRow { grid-template-columns: 1fr; }
}

.bigCard {
  position: relative;
  padding: 18px 18px 16px;
  border-radius: 22px;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 18px 54px rgba(0,0,0,.24);
  overflow: hidden;
  min-height: 150px;
  }
.bigCard::before {
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(520px 200px at 20% 0%, rgba(99,102,241,.22), transparent 60%);
  opacity: .9;
  pointer-events:none;
}
.bigCard:active {
  transform: translateY(-2px);
  box-shadow: 0 26px 70px rgba(0,0,0,.34);
  border-color: rgba(99,102,241,.38);
}
.bigCardTop { display:flex; align-items:center; gap: 12px; position:relative; z-index:2; }
.bigIcon {
  width: 52px; height: 52px;
  border-radius: 18px;
  display:grid; place-items:center;
  background: rgba(99,102,241,.14);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 22px;
}
.bigTitle { font-weight: 950; font-size: 18px; letter-spacing:.2px; }
.bigDesc { margin-top: 10px; font-size: 13px; opacity:.82; max-width: 52ch; position:relative; z-index:2; }
.bigHint { margin-top: 12px; font-size: 13px; font-weight: 800; opacity:.85; position:relative; z-index:2; }

.bigCard--primary::after {
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(420px 200px at 90% 30%, rgba(56,189,248,.18), transparent 60%);
  opacity: .9;
  pointer-events:none;
}
.bigCard--secondary::after {
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(420px 200px at 90% 30%, rgba(34,197,94,.14), transparent 62%);
  opacity: .9;
  pointer-events:none;
}

/* Section head */
.sectionHead { margin: 10px 2px 10px; }
.sectionTitle { font-weight: 950; font-size: 14px; letter-spacing:.6px; text-transform: uppercase; opacity:.9; }
.sectionSub { margin-top: 6px; font-size: 13px; opacity:.75; }

/* Grid of tiles (bigger + descriptive) */
.cardGrid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin: 0 2px 6px;
}
@media (max-width: 520px){
  .cardGrid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}
.tileCard {
  position: relative;
  padding: 18px 18px 16px;
  border-radius: 22px;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 16px 46px rgba(0,0,0,.22);
  overflow: hidden;
  min-height: 140px;
}
.tileCard::before {
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(460px 160px at 18% 0%, rgba(99,102,241,.18), transparent 60%);
  opacity: .85;
  pointer-events:none;
}
.tileCard:active {
  transform: translateY(-2px);
  box-shadow: 0 24px 66px rgba(0,0,0,.32);
  border-color: rgba(99,102,241,.38);
  background: linear-gradient(180deg, rgba(99,102,241,.12), rgba(255,255,255,.03));
}
.tileTop { display:flex; gap: 14px; align-items:flex-start; position:relative; z-index:2; }
.tileIcon {
  width: 56px; height: 56px;
  border-radius: 20px;
  display:grid; place-items:center;
  background: rgba(99,102,241,.14);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 24px;
  flex: 0 0 56px;
}
.tileTitle { font-weight: 950; font-size: 16px; letter-spacing:.2px; }
.tileDesc { margin-top: 6px; font-size: 13px; opacity:.80; line-height: 1.35; }
.tileGo { margin-top: 12px; font-size: 13px; font-weight: 900; opacity:.85; position:relative; z-index:2; }

/* Light theme */
body.bg-light-custom .homeHero2 {
  background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(255,255,255,.76));
  border: 1px solid rgba(10,20,40,.12);
  box-shadow: 0 18px 52px rgba(10,20,40,.12);
}
body.bg-light-custom .pill {
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(10,20,40,.12);
  box-shadow: 0 10px 26px rgba(10,20,40,.08);
}
body.bg-light-custom .heroProfile,
body.bg-light-custom .bigCard,
body.bg-light-custom .tileCard {
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(10,20,40,.12);
  box-shadow: 0 16px 46px rgba(10,20,40,.10);
}
body.bg-light-custom .heroMiniTrack {
  background: rgba(10,20,40,.06);
  border: 1px solid rgba(10,20,40,.10);
}
body.bg-light-custom .bigIcon,
body.bg-light-custom .tileIcon {
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(10,20,40,.10);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .bigCard, .tileCard, .heroProfile { }
  .bigCard:active, .tileCard:active { transform: none; }
  .heroMiniFill { }
}

/* ==============================
   LIVE CHAT PAGE (AUTO-ADDED)
   ============================== */

.chatPage { padding: 10px 6px 22px; }

.chatHeader {
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 2px 12px;
}
.chatTitle { margin:0; font-size: 26px; letter-spacing:.2px; }
.chatSub { margin-top: 6px; font-size: 13px; opacity:.78; }
.chatHint { font-size: 12px; opacity: .70; white-space: nowrap; }

.chatCard {
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 18px 54px rgba(0,0,0,.24);
  overflow: hidden;
}

.chatStream {
  height: min(62vh, 560px);
  padding: 16px 16px 12px;
  overflow: auto;
  scroll-behavior:auto;
}
.chatMsg {
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  margin-bottom: 10px;
}
.chatMeta {
  display:flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  opacity: .80;
}
.chatUser { font-weight: 900; }
.chatTime { opacity: .75; }
.chatText { margin-top: 6px; font-size: 13px; line-height: 1.45; white-space: normal; }

.chatForm {
  display:flex;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
  align-items: flex-end;
}
.chatInput {
  flex: 1;
  resize: none;
  border-radius: 16px;
  padding: 12px 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: inherit;
  min-height: 44px;
  outline: none;
}
.chatInput:focus {
  border-color: rgba(99,102,241,.38);
  box-shadow: 0 0 0 4px rgba(99,102,241,.12);
}
.chatSendBtn {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(99,102,241,.60), rgba(99,102,241,.35));
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  min-width: 92px;
}
.chatSendBtn:active {
  filter: brightness(1.06);
}
.chatSendBtn:disabled {
  opacity: .6;
  cursor: not-allowed;
}
.chatFooterNote {
  padding: 10px 14px 14px;
  font-size: 12px;
  opacity: .70;
}

/* Light theme */
body.bg-light-custom .chatCard {
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(10,20,40,.12);
  box-shadow: 0 18px 54px rgba(10,20,40,.12);
}
body.bg-light-custom .chatMsg {
  background: rgba(10,20,40,.04);
  border: 1px solid rgba(10,20,40,.10);
}
body.bg-light-custom .chatForm {
  background: rgba(10,20,40,.03);
  border-top: 1px solid rgba(10,20,40,.10);
}
body.bg-light-custom .chatInput {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(10,20,40,.12);
}

/* ==============================
   CHAT STATUS + EMPTY (AUTO-ADDED)
   ============================== */
.chatStatus {
  display:none;
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 12px;
  opacity: .9;
}
.chatStatus.err {
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.30);
}
.chatEmpty {
  padding: 28px 12px;
  text-align:center;
  opacity:.85;
}
.chatEmptyTitle {
  font-weight: 950;
  font-size: 14px;
}
.chatEmptySub {
  margin-top: 8px;
  font-size: 13px;
  opacity: .78;
}

/* ==============================
   CHAT ROOMS + DM (AUTO-ADDED)
   ============================== */

.chatV2 { padding: 10px 6px 22px; }

.chatTopbar {
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 2px 12px;
}
.chatTitle2 { margin:0; font-size: 26px; letter-spacing:.2px; }
.chatSub2 { margin-top: 6px; font-size: 13px; opacity:.78; }

.chatTabs {
  display:flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}
.chatTab {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  opacity: .78;
  cursor: pointer;
}
.chatTab.active {
  opacity: 1;
  background: rgba(99,102,241,.22);
  border: 1px solid rgba(99,102,241,.32);
}

.chatShell {
  display:block;
}

.chatRoomCard {
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 18px 54px rgba(0,0,0,.24);
  overflow: hidden;
}

.chatStream2 {
  height: min(62vh, 560px);
  padding: 16px 16px 12px;
  overflow: auto;
  scroll-behavior:auto;
}

.chatMsg2 {
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  margin-bottom: 10px;
}
.chatMsg2.me {
  border-color: rgba(34,197,94,.22);
  background: linear-gradient(180deg, rgba(34,197,94,.10), rgba(255,255,255,.03));
}

.chatMeta2 {
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  opacity: .82;
}
.chatUserLink {
  border:0;
  background: transparent;
  color: inherit;
  font-weight: 950;
  cursor: pointer;
  padding: 0;
}
.chatUserLink:active {
  text-decoration: underline;
}
.chatTime2 {
  opacity: .75;
}
.chatText2 {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
}

.chatComposer {
  display:flex;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
  align-items: flex-end;
}
.chatInput2 {
  flex: 1;
  resize: none;
  border-radius: 16px;
  padding: 12px 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: inherit;
  min-height: 44px;
  outline: none;
}
.chatInput2:focus {
  border-color: rgba(99,102,241,.38);
  box-shadow: 0 0 0 4px rgba(99,102,241,.12);
}
.chatSend2 {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(99,102,241,.60), rgba(99,102,241,.35));
  color: #fff;
  font-weight: 950;
  cursor: pointer;
  min-width: 92px;
}
.chatNote2 {
  padding: 10px 14px 14px;
  font-size: 12px;
  opacity: .70;
}

/* DM modal */
.dmModal {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: none;
}
.dmModal.open { display: block; }
.dmBackdrop {
  position:absolute;
  inset:0;
  background: rgba(6,10,20,.55);
  backdrop-filter: blur(6px);
}
/* DM modal (compat: dmModalCard/back) */
.dmModalBack{
  /* Keep modal centered in the viewport (follows scroll).
     Note: the element is also moved under <body> via JS to avoid
     parent transform/filter/perspective breaking position:fixed. */
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6,10,20,.55);
  backdrop-filter: blur(6px);
}
.dmModalCard{
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  width: min(560px, calc(100% - 32px));
  max-height: min(72vh, 620px);
  display:flex;
  flex-direction: column;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow: 0 26px 90px rgba(0,0,0,.45);
  overflow: hidden;
}
.dmModalHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.dmModalTitle{ font-weight: 950; letter-spacing:.2px; }

/* =========================================================
   DM POPUP (PROFILE) - absolute modal anchored to scroll
   Fixes: modal appearing stuck at top/side due to transformed parents.
   Strategy: overlay is position:absolute and the card top is computed
   from current scroll position (see profile.php JS).
   These rules intentionally target #dmModal to avoid impacting other UI.
   ========================================================= */
#dmModal.dmModal{ position:absolute !important; left:0; top:0; width:100%; height:100%; z-index:999999; display:none; }
#dmModal.dmModal.open{ display:block !important; }
#dmModal .dmModalBack{ position:absolute !important; inset:0; background:rgba(4,10,18,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#dmModal .dmModalCard{ position:absolute !important; left:50% !important; transform: translateX(-50%) !important; top: 18px; width:min(640px, 92vw); max-height: 74vh; display:flex; flex-direction:column; border-radius:18px; overflow:hidden; }
#dmModal .dmStream{ flex:1; overflow:auto; padding:14px 14px 10px; }
#dmModal .dmForm{ display:flex; gap:10px; padding:12px; border-top:1px solid rgba(255,255,255,.10); background: rgba(5,10,18,.38); }
#dmModal .dmInput{ min-height:46px; max-height:120px; resize:none; }
#dmModal .dmSend{ align-self:flex-end; height:44px; padding:0 18px; border-radius:14px; }
#dmModal .dmFoot{ padding:10px 12px; }

/* DM panel (chat page) */
.dmPanel {
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(640px, calc(100% - 36px));
  max-height: min(80vh, 720px);
  display:flex;
  flex-direction: column;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow: 0 26px 90px rgba(0,0,0,.45);
  overflow: hidden;
}
.dmHeader {
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.dmTitleMain { font-weight: 950; font-size: 14px; }
.dmTitleSub { margin-top: 2px; font-size: 12px; opacity: .78; }
.dmClose {
  border: 0;
  background: rgba(255,255,255,.08);
  color: inherit;
  padding: 8px 10px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 950;
}
.dmClose:active { filter: brightness(1.08); }

.dmStream {
  padding: 14px;
  overflow: auto;
  height: min(46vh, 420px);
  scroll-behavior:auto;
}

/* DM bubble layout (professional) */
.dmSys{
  margin: 10px auto 14px;
  padding: 8px 12px;
  width: fit-content;
  max-width: 95%;
  text-align: center;
  font-size: 12px;
  opacity: .80;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

.dmRow{
  display:flex;
  gap: 10px;
  align-items: flex-end;
  margin: 10px 0;
}
.dmRow.me{ justify-content: flex-end; }

.dmAvLink{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  line-height: 0;
  flex: 0 0 28px;
}
.dmAvLink:focus{ outline: none; }
.dmAvLink:active .dmAv{ transform: translateY(-1px); }
.dmAvLink:active .dmAvFallback{ transform: translateY(-1px); }
.dmAv{ }

.dmAv{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 28px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}
.dmAvFallback{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .2px;
}

.dmBubble{
  max-width: min(520px, calc(100% - 90px));
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 40px rgba(0,0,0,.15);
}
.dmRow.them .dmBubble{ border-radius: 18px 18px 18px 8px; }
.dmRow.me .dmBubble{
  border-radius: 18px 18px 8px 18px;
  background: linear-gradient(180deg, rgba(99,102,241,.22), rgba(255,255,255,.03));
  border-color: rgba(99,102,241,.32);
}

.dmBubbleTop{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  opacity: .78;
  margin-bottom: 6px;
}
.dmWho{ font-weight: 900; opacity: .95; }
.dmWhoBtn{
  background: transparent;
  border: 0;
  color: inherit;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.dmWhoBtn:active{ text-decoration: underline; }
.dmTime{ opacity: .85; }

.dmBody{
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.dmComposer {
  display:flex;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
  align-items: flex-end;
}

/* Light theme */
body.bg-light-custom .chatTabs {
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(10,20,40,.12);
}
body.bg-light-custom .chatRoomCard,
body.bg-light-custom .dmPanel {
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(10,20,40,.12);
  box-shadow: 0 18px 54px rgba(10,20,40,.12);
}
body.bg-light-custom .chatMsg2,
body.bg-light-custom .dmBubble {
  background: rgba(10,20,40,.04);
  border: 1px solid rgba(10,20,40,.10);
}
body.bg-light-custom .chatComposer,
body.bg-light-custom .dmComposer {
  background: rgba(10,20,40,.03);
  border-top: 1px solid rgba(10,20,40,.10);
}
body.bg-light-custom .chatInput2 {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(10,20,40,.12);
}

/* --- Discord-style chat layout (v3) --- */
.chatDiscord { padding: 10px 6px 22px; }
.dcWrap{
  display:flex;
  gap: 12px;
  height: calc(100vh - 120px);
  min-height: 560px;
}
.dcSidebar{
  width: 260px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 10px;
  overflow:auto;
}
.dcServerTitle{
  font-weight: 800;
  letter-spacing: .2px;
  padding: 10px 10px 6px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 8px;
}
.dcSection{ margin-top: 10px; }
.dcSectionTitle{
  font-size: 12px;
  opacity: .75;
  text-transform: uppercase;
  padding: 8px 10px 6px;
}
.dcChannel, .dcDmItem{
  display:block;
  padding: 9px 10px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  opacity: .90;
}
.dcChannel:active, .dcDmItem:active{ background: rgba(255,255,255,.06); opacity: 1; }
.dcChannel.active, .dcDmItem.active{
  background: rgba(88,101,242,.18);
  border: 1px solid rgba(88,101,242,.35);
  opacity: 1;
}
.dcDmList{ display:flex; flex-direction:column; gap: 6px; padding: 0 2px 6px; }
.dcMuted{ font-size: 13px; opacity:.65; padding: 0 10px 8px; }
.dcAt{
  display:inline-block;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  text-align:center;
  line-height: 18px;
  margin-right: 8px;
  background: rgba(255,255,255,.10);
}
.dcHint{
  margin-top: 12px;
  font-size: 12px;
  opacity: .7;
  padding: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Main panel */
.dcMain{
  flex: 1;
  display:flex;
  flex-direction:column;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  overflow:hidden;
}
.dcTopbar{
  padding: 12px 14px;
  background: rgba(0,0,0,.22);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.dcTopbarTitle{ font-weight: 800; font-size: 16px; }
.dcTopbarSub{ margin-top: 4px; font-size: 12px; opacity:.7; }

.dcStream{
  flex: 1;
  overflow:auto;
  padding: 14px;
}
.dcMsg{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  margin-bottom: 10px;
}
.dcMsg.me{
  border-color: rgba(34,197,94,.22);
  background: linear-gradient(180deg, rgba(34,197,94,.10), rgba(255,255,255,.03));
}
.dcMsgTop{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.dcName, .dcNameSelf{
  font-weight: 800;
  background: transparent;
  border: none;
  color: inherit;
  padding: 0;
  cursor: pointer;
}
.dcName:active{ text-decoration: underline; }
.dcTs{ font-size: 12px; opacity:.65; }
.dcText{ margin-top: 6px; white-space: pre-wrap; line-height: 1.35; }

.dcComposer{
  display:flex;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}
.dcInput{
  flex: 1;
  min-height: 44px;
  resize: vertical;
  max-height: 120px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: inherit;
}
.dcSend{
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(88,101,242,.35);
  background: rgba(88,101,242,.18);
  color: inherit;
  font-weight: 800;
  cursor: pointer;
}
.dcSend:active{ background: rgba(88,101,242,.26); }

.dcFooterNote{
  font-size: 12px;
  opacity: .7;
  padding: 8px 12px 12px;
}

@media (max-width: 980px){
  .dcWrap{ height: auto; min-height: unset; }
  .dcSidebar{ width: 210px; }
}
@media (max-width: 760px){
  .dcWrap{ flex-direction: column; }
  .dcSidebar{ width: auto; }
}

/* ===== Discord Style Global Scrollbar ===== */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(120,130,150,.35) rgba(0,0,0,.25);
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: rgba(0,0,0,.25);
  border-radius: 10px;
}
*::-webkit-scrollbar-thumb {
  background: rgba(120,130,150,.35);
  border-radius: 10px;
  border: 2px solid rgba(0,0,0,.25);
}
*::-webkit-scrollbar-thumb:active {
  background: rgba(120,130,150,.55);
}
*::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}

/* Friend Requests UI */
.dcReqItem{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 8px; border-radius:10px; background: rgba(255,255,255,0.04); margin-bottom:6px;}
.dcReqName{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px;}
.dcReqBtns{display:flex; gap:6px;}

/* =========================
   PROFILE (profile.php) UI
   Scoped under .profileX to avoid impacting other pages
   ========================= */
.profileX{ --accent: var(--profileAccent, var(--accent)); }
.profileX.bg-nebula{ background:
  radial-gradient(1200px 800px at 20% 15%, rgba(56,189,248,.16), transparent 60%),
  radial-gradient(900px 600px at 85% 30%, rgba(34,197,94,.12), transparent 55%),
  radial-gradient(1000px 700px at 45% 90%, rgba(168,85,247,.12), transparent 60%),
  linear-gradient(180deg, rgba(15,23,42,1), rgba(2,6,23,1));
}
.profileX.bg-aurora{ background:
  radial-gradient(1100px 650px at 20% 25%, rgba(34,197,94,.16), transparent 60%),
  radial-gradient(1000px 700px at 90% 30%, rgba(56,189,248,.16), transparent 60%),
  radial-gradient(1000px 700px at 50% 95%, rgba(244,63,94,.12), transparent 60%),
  linear-gradient(180deg, #0b1220, #020617);
}
.profileX.bg-abyss{ background:
  radial-gradient(900px 700px at 30% 20%, rgba(59,130,246,.14), transparent 60%),
  radial-gradient(1000px 700px at 80% 35%, rgba(168,85,247,.12), transparent 60%),
  linear-gradient(180deg, #060a14, #020617);
}
.profileX.bg-sunset{ background:
  radial-gradient(1100px 700px at 15% 20%, rgba(244,63,94,.16), transparent 60%),
  radial-gradient(1000px 650px at 85% 25%, rgba(249,115,22,.14), transparent 60%),
  radial-gradient(900px 700px at 50% 95%, rgba(56,189,248,.10), transparent 60%),
  linear-gradient(180deg, #0b1220, #020617);
}

.profileX.bg-noir{ background:
  radial-gradient(900px 650px at 30% 25%, rgba(148,163,184,.10), transparent 60%),
  radial-gradient(900px 650px at 75% 30%, rgba(56,189,248,.10), transparent 60%),
  linear-gradient(180deg, #050812, #02030a);
}
.profileX.bg-cyber{ background:
  radial-gradient(900px 650px at 25% 20%, rgba(34,197,94,.14), transparent 60%),
  radial-gradient(900px 650px at 80% 35%, rgba(59,130,246,.14), transparent 60%),
  linear-gradient(180deg, #061018, #020617);
}
.profileX.bg-royal{ background:
  radial-gradient(1100px 700px at 20% 25%, rgba(168,85,247,.16), transparent 60%),
  radial-gradient(900px 650px at 85% 35%, rgba(56,189,248,.12), transparent 60%),
  linear-gradient(180deg, #080a18, #020617);
}
.profileX.bg-forest{ background:
  radial-gradient(1000px 650px at 20% 25%, rgba(34,197,94,.16), transparent 60%),
  radial-gradient(900px 650px at 80% 35%, rgba(14,165,233,.10), transparent 60%),
  linear-gradient(180deg, #061214, #020617);
}

.profileX.profileMono{ font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; }

.profileX.profileGlow .profileHero:before{
  content:"";
  position:absolute; inset:-1px;
  pointer-events:none;
  background: radial-gradient(500px 240px at 26% 18%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 70%),
              radial-gradient(560px 260px at 78% 22%, rgba(34,197,94,.20), transparent 70%);
  filter: blur(18px);
  opacity:.9;
}
.profileX .pagePanel{ position:relative; }

.profileX .profileHero{
  position:relative;
  border-radius: 28px;
  overflow:hidden;
  margin-top: 14px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 26px 80px rgba(0,0,0,.55);
}
.profileX.profileGlass .profileHero{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter: blur(10px);
}
.profileX.profileSolid .profileHero{
  background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(2,6,23,.92));
}

.profileX .profileCover{ height: 220px; position:relative; z-index: 1; }
.profileX .profileCover img{
  width:100%; height:100%; object-fit:cover; display:block;
  position:relative; z-index: 1;
}
.profileX .profileCoverFallback{
  height:100%;
  background:
    radial-gradient(900px 400px at 10% 20%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 65%),
    radial-gradient(700px 360px at 85% 30%, rgba(34,197,94,.18), transparent 70%),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}
.profileX .profileCoverOverlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(2,6,23,.15), rgba(2,6,23,.86));
}
.profileX .profileTop{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
  padding: 18px 18px 20px;
}
@media (min-width: 980px){
  .profileX .profileTop{ grid-template-columns: 1.3fr .7fr; align-items:start; }
}

.profileX .profileAvatar{
  width: 96px; height: 96px;
  border-radius: 26px;
  margin-top:-62px;
  position:relative;
  z-index: 5;
  border: 2px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.profileX .profileAvatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.profileX .profileAvatar span{ font-size:34px; font-weight:800; color:#0b1220; text-shadow: none; }

.profileX .profileNameRow{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.profileX .profileName{ margin:0; font-size:28px; letter-spacing:-.02em; }
.profileX .profileTitle{
  margin-left:10px;
  font-size:12px;
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
}
.profileX .profilePills{ display:flex; gap:10px; flex-wrap:wrap; }
.profileX .pill{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 13px;
}
.profileX .profileTagline{ margin-top: 6px; font-size: 15px; color: var(--text); opacity:.92; }
.profileX .profileMini{ margin-top: 10px; display:flex; gap:10px; flex-wrap:wrap; }
.profileX .mini{
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  color: var(--muted);
  background: rgba(255,255,255,.03);
}
.profileX .mini.link{ color: color-mix(in srgb, var(--accent) 80%, #fff); text-decoration:none; }
.profileX .mini.link:active{ text-decoration:underline; }

.profileX .levelBar{ margin-top: 14px; }
.profileX .levelBarTop{ display:flex; justify-content:space-between; margin-bottom:8px; font-size:13px; }
.profileX .levelTrack{
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.profileX .levelFill{
  height:100%;
  background: linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 80%, #fff),
      rgba(34,197,94,.85));
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 60%, transparent);
}

.profileX .profileTabs{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 14px; }
.profileX .tab{
  padding: 9px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  text-decoration:none;
  font-size: 13px;
}
.profileX .tab.active{
  border-color: color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,.12));
  background: color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,.05));
}

.profileX .profileQuick{ display:grid; gap: 12px; align-content:start; }
.profileX .quickCard{
  border-radius: 18px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: 0 14px 34px rgba(0,0,0,.20);
}
.profileX .qTitle{ font-weight:800; margin-bottom:10px; }
.profileX .qBtns{ display:flex; gap:10px; flex-wrap:wrap; }
.profileX .qForm{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.profileX .qHint{ font-size: 13px; }

.profileX .profileGrid{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 980px){
  .profileX .profileGrid{ grid-template-columns: 1.1fr .9fr; }
}

/* ------------------------------------------------------------
   Kariyer Özeti altı paneller (MMO uyumlu, simetrik)
   - Sol sütun: Arkadaşlar + Bekleyen İstekler (stack)
   - Orta: Rozetler & Profil
   - Sağ: Hakkımda
------------------------------------------------------------ */
.profileX .profileGrid.profileGrid--mmo{
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 860px){
  .profileX .profileGrid.profileGrid--mmo{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1180px){
  .profileX .profileGrid.profileGrid--mmo{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.profileX .profileColStack{
  display:flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.profileX .cardX.cardX--panel{
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(700px 240px at 20% 0%, color-mix(in oklab, var(--profileAccent, #38BDF8) 18%, transparent), transparent 60%),
    radial-gradient(700px 240px at 90% 10%, rgba(168,85,247,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 16px 38px rgba(0,0,0,.26);
}
.profileX .cardX.cardX--panel::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 22px;
  pointer-events:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.35);
  opacity: .9;
}
.profileX .cardX.cardX--panel .cardXHead{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,0));
}
.profileX .cardX.cardX--panel .cardXHead h2{
  font-size: 16px;
  letter-spacing: -.01em;
}
.profileX .cardX.cardX--panel .cardXBody{ padding: 14px 16px 16px; }

/* Arkadaşlar: input + buton hizası, avatar grid */
.profileX .friendsAddForm{
  display:flex;
  gap: 10px;
  align-items:center;
}
.profileX .friendsAddForm .input{ flex:1; min-width: 0; }
.profileX .friendsMiniGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding-top: 6px;
}
.profileX .friendsMiniAvatar{ display:flex; justify-content:center; }
.profileX .friendAvatar.sm{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 18px rgba(0,0,0,.22);
}
.profileX .friendAvatar.sm img{ width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }

/* Bekleyen istekler: satır düzeni */
.profileX .reqRow{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
  margin-bottom: 10px;
}
.profileX .reqRow:last-child{ margin-bottom: 0; }
.profileX .reqLeft{ display:flex; gap: 10px; align-items:center; min-width: 0; }
.profileX .reqName{ font-weight: 700; line-height: 1.1; }
.profileX .reqBtns{ display:flex; gap: 8px; align-items:center; }
.profileX .reqBtns form{ margin: 0; }

/* Hakkımda: Temel Alanlar kutusu daha "panel" gibi */
.profileX .aboutBasics{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
  padding: 12px;
  margin-bottom: 12px;
}
.profileX .aboutBasicsHead{
  display:flex;
  gap: 8px;
  align-items:center;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-bottom: 10px;
}
.profileX .aboutBasicsIcon{ filter: drop-shadow(0 6px 10px rgba(0,0,0,.24)); }
.profileX .aboutBasicsGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.profileX .abItem{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 10px 10px;
  min-width: 0;
}
.profileX .abK{ display:block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.profileX .abV{ display:block; font-weight: 700; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }

.profileX .cardX{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(600px 200px at 20% 0%, rgba(56,189,248,.08), transparent 60%),
    radial-gradient(500px 220px at 90% 10%, rgba(168,85,247,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
  overflow:hidden;
}
.profileX .cardXHead{
  padding: 14px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.profileX .cardXHead h2{ margin:0; font-size: 16px; letter-spacing:-.01em; }
.profileX .cardXBody{ padding: 14px 16px 16px; }
.profileX .chip{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--muted);
}
.profileX .bioP{ margin:0 0 12px; line-height: 1.55; }
.profileX .socialRow{ display:flex; flex-wrap:wrap; gap:10px; }
.profileX .social{
  display:flex; gap:8px; align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.profileX .socialKey{ font-size: 11px; letter-spacing:.12em; color: var(--muted); }
.profileX .socialVal{ font-size: 13px; color: var(--text); }

.profileX .friendGrid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
@media (min-width: 720px){
  .profileX .friendGrid{ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
@media (min-width: 1100px){
  .profileX .friendGrid{ grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

/* Tile-style friend cards (profile screenshot look) */
.profileX .friendCard{
  position: relative;
  display:flex;
  flex-direction: column;
  align-items:center;
  text-align:center;
  gap: 10px;
  padding: 14px 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  }
.profileX .friendCard:active{
  transform: translateY(-2px);
  filter: brightness(1.04);
  border-color: rgba(255,255,255,.16);
}

/* Bigger avatar + subtle frame */
.profileX .friendAvatar{
  width: 68px;
  height: 68px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
}
.profileX .friendAvatar.sm{ width:56px; height:56px; border-radius: 16px; }
.profileX .friendAvatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.profileX .friendAvatar span{ font-weight:900; color:#0b1220; }

.profileX .friendInfo{ width: 100%; min-width:0; }
.profileX .friendName{ font-weight: 850; }
.profileX .friendName a{ display:inline-block; max-width: 100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profileX .friendInfo .muted{ font-size: 12px; }

/* Keep actions, but hide until hover to match clean tiles */
.profileX .friendActions{
  position:absolute;
  top: 10px;
  right: 10px;
  opacity: 0;
  pointer-events:none;
  transform: translateY(-2px);
  }
.profileX .friendCard:active .friendActions{
  opacity: 1;
  pointer-events:auto;
  transform: translateY(0);
}

.profileX .reqRow{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding: 10px 12px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  margin-bottom:10px;
}
.profileX .reqLeft{ display:flex; gap:10px; align-items:center; }
.profileX .reqName{ font-weight: 800; }
.profileX .reqBtns{ display:flex; gap:10px; flex-wrap:wrap; }

.profileX .invGrid{ display:grid; grid-template-columns: repeat(2,1fr); gap:10px; }
@media (min-width: 720px){ .profileX .invGrid{ grid-template-columns: repeat(4,1fr); } }
.profileX .invItem{
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 10px 12px;
}

.profileX .invTitle{ font-weight: 800; font-size: 13px; line-height:1.15; }
.profileX .invMeta{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top: 6px; }
.profileX .invMeta .invCode{ font-weight: 700; font-size: 12px; opacity:.75; }
.profileX .invMeta .invQty{ font-size: 18px; font-weight: 900; color: color-mix(in srgb, var(--accent) 70%, #fff); }

.profileX .invQty{ font-size: 22px; font-weight: 900; margin-top: 6px; color: color-mix(in srgb, var(--accent) 70%, #fff); }

.profileX .formX{ display:flex; flex-direction:column; gap:12px; }
.profileX .lbl{ display:flex; flex-direction:column; gap:6px; font-size: 13px; color: var(--muted); }
.profileX .grid2{ display:grid; grid-template-columns: 1fr; gap:12px; }
.profileX .grid3{ display:grid; grid-template-columns: 1fr; gap:12px; }
@media (min-width: 980px){
  .profileX .grid2{ grid-template-columns: 1fr 1fr; }
  .profileX .grid3{ grid-template-columns: 1fr 1fr 1fr; }
}
.profileX .textarea{ resize:vertical; }
.profileX .divider{ height:1px; background: rgba(255,255,255,.10); margin: 12px 0; }
.profileX .subHead{ margin:0 0 6px; font-size: 14px; letter-spacing:-.01em; }

.profileX .check{ display:flex; align-items:center; gap:10px; padding: 10px 12px; border-radius: 16px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); }
.profileX .check input{ transform: translateY(1px); }

.profileX .tips{ margin:0; padding-left: 18px; color: var(--muted); }
.profileX code{ padding: 2px 6px; border-radius: 8px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); }

/* --- Profile: badge showcase + uploads --- */
.profileX .badgeRow{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 10px; }
.profileX .badgeChip{
  display:inline-flex; align-items:center; gap:6px;
  padding: 8px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-weight: 800;
  font-size: 12px;
  color: rgba(255,255,255,.92);
  box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;
}
.profileX .badgePicker{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
  margin-top: 10px;
}
@media (min-width: 980px){
  .profileX .badgePicker{ grid-template-columns: 1fr 1fr; }
}
.profileX .badgePick{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding: 12px 12px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  cursor:pointer;
}
.profileX .badgePick input{ margin-right: 8px; }
.profileX .badgePick .bTitle{ font-weight: 900; letter-spacing:-.01em; }
.profileX .badgePick.on{
  border-color: color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,.18));
  background: color-mix(in srgb, var(--accent) 10%, rgba(255,255,255,.03));
  box-shadow: 0 0 0 1px rgba(0,0,0,.18) inset, 0 12px 40px rgba(0,0,0,.22);
}
.profileX .hint{ font-size: 12px; margin-top: 4px; }
.profileX .small{ font-size: 12px; }

/* Topbar avatar */
.topAvatar{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; margin-left:10px; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.16); box-shadow:0 10px 26px rgba(0,0,0,.35); }
.topAvatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.topAvatarFallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; }

/* Home hero avatar image */
.heroAvatar.hasImg{ padding:0; }
.heroAvatar.hasImg img{ width:100%; height:100%; object-fit:cover; display:block; }

body.dmOpen { overflow: hidden; }

.dmSend{
  border:0;
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 950;
  cursor:pointer;
  background: linear-gradient(180deg, rgba(99,102,241,.60), rgba(99,102,241,.35));
  color:#fff;
  box-shadow: 0 12px 32px rgba(0,0,0,.25);
  min-width: 92px;
}
.dmSend:active{ filter: brightness(1.08); }
.dmFoot{
  padding: 10px 14px 14px;
  font-size: 12px;
  opacity: .70;
}

/* ===== Profile layout upgrades (avatar area + friendship card) ===== */
.profileX .profileTop{ grid-template-columns: 1fr; }
@media (min-width: 980px){
  .profileX .profileTop{
    grid-template-columns: 140px 1fr;
    column-gap: 18px;
  }
  .profileX .profileAvatar{ grid-column:1; grid-row:1; }
  .profileX .profileSideCard{ grid-column:1; grid-row:2; align-self:start; }
  .profileX .profileHead{ grid-column:2; grid-row:1 / span 2; }
}

.profileX .profileSideCard{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 12px 12px 10px;
}
.profileX .sideTitle{ font-weight:800; font-size:12px; letter-spacing:.06em; text-transform:uppercase; opacity:.85; }
.profileX .sideTitle.mt8{ margin-top:10px; }
.profileX .sideLines{ display:grid; gap:6px; margin-top:10px; }
.profileX .sideLine{ display:flex; justify-content:space-between; gap:10px; font-size:12px; }
.profileX .sideLine .k{ opacity:.70; }
.profileX .sideLine .v{ font-weight:700; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width: 88px; }
.profileX .sideSocial{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.profileX .sIcon{
  width:28px; height:28px;
  border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  font-weight:900;
  user-select:none;
}

.profileX .qForm{ display:flex; flex-direction:column; gap:10px; }
.profileX .qForm .input{ width:100%; }
.profileX .qForm .btn{ width:100%; justify-content:center; }

.profileX .miniFriends{
  display:flex; align-items:center; gap:8px;
  margin-top: 10px;
  flex-wrap:wrap;
}
.profileX .miniFriend{
  width:34px; height:34px;
  border-radius: 12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.06);
}
.profileX .miniFriend img{ width:100%; height:100%; object-fit:cover; display:block; }
.profileX .miniFriend span{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; color:#06121e;
}
.profileX .miniMore{
  font-weight:800;
  opacity:.8;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
}

/* ==============================
   GLASS THEME OVERRIDES (AUTO)
   Inspired by the in-game UI style (translucent panels)
   ============================== */

:root{
  --glass-bg: rgba(15, 23, 42, .58);
  --glass-bg2: rgba(17, 24, 39, .42);
  --glass-border: rgba(255,255,255,.10);
  --glass-border-strong: rgba(255,255,255,.14);
  --glass-shadow: 0 18px 60px rgba(0,0,0,.38);
}

/* Background: deeper navy + subtle grid + glow */
body{
  background:
    radial-gradient(1200px 720px at 20% 0%, rgba(56,189,248,.18), transparent 55%),
    radial-gradient(900px 680px at 78% 10%, rgba(34,197,94,.12), transparent 58%),
    radial-gradient(700px 520px at 55% 85%, rgba(99,102,241,.10), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 26px),
    linear-gradient(180deg, #0b1224, #070b16);
}

/* 1. Ana Kapsayıcılar: Bilgisayarı kasmaması için bulanıklaştırma (blur) İPTAL EDİLDİ, mat renk verildi */
.pagePanel, .card, .sideDock, .table td {
  background: rgba(20, 25, 38, 0.95) !important; /* Tema renginize uygun koyu lacivert/mat */
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  backdrop-filter: none !important; 
  -webkit-backdrop-filter: none !important;
}

/* 2. Sadece Küçük İç Öğeler: Hafif cam efekti kalsın (Sistemi yormaz) */
.glass, .facHeader, .prodBox, .lineRow, .menuCard {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(4px); /* 16px'den 4px'e düşürüldü, ekran kartı rahatladı */
  -webkit-backdrop-filter: blur(4px);
}

/* Slightly stronger panels (headers/topbars) */
.toplinks{
  background: rgba(11, 18, 36, .62);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--glass-border);
}

/* Pills / mini cards */
.pill,
.badge,
.statPill{
  background: rgba(0,0,0,.14);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Inputs */
input,select,textarea{
  background: rgba(0,0,0,.18);
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 30px rgba(0,0,0,.18) inset;
}
input:focus,select:focus,textarea:focus{
  outline: none;
  border-color: rgba(56,189,248,.35);
  box-shadow: 0 0 0 4px rgba(56,189,248,.10), 0 10px 30px rgba(0,0,0,.18) inset;
}

/* Buttons */
.btn-ghost{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--glass-border);
}
.btn-ghost:active{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}
.btn-primary{
  box-shadow: 0 14px 44px rgba(34,197,94,.22);
}

/* Dock buttons */
.dockBtn{
  background: rgba(255,255,255,.05);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.dockBtn:active{background: rgba(255,255,255,.07)}
.dockBtn.active{
  border-color: rgba(34,197,94,.25);
  background: rgba(34,197,94,.10);
  outline: 2px solid rgba(34,197,94,.22);
}

/* Small icon holders */
.lineImg,
.hdrIcon,
.ctrlBtn{
  background: rgba(255,255,255,.05);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Tables: keep "floating row" look */
.table td{
  background: rgba(0,0,0,.14);
}

/* Footer */
.footer{
  background: rgba(0,0,0,.10);
  border-top: 1px solid var(--glass-border);
}

/* Reduce harsh borders across the site */
hr, hr.sep{
  border-top-color: rgba(255,255,255,.08) !important;
}

/* -----------------------------
   UI alignment fixes
   - Keep emoji/icon backgrounds perfectly aligned
   - Prevent "Kategoriler" back button from overflowing its holder
------------------------------*/

/* Perfectly center emoji/icons in small holders */
.dockBtn,
.hdrIcon,
.ctrlBtn{
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  padding:0;
  font-size:18px;
}

/* Back button holder in headers should size to its content */
.hdrIconPlain{
  width:auto !important;
  height:auto !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

.backBtn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  color:var(--text);
  text-decoration:none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.backBtn:active{filter:brightness(1.08)}
.backArrow{font-weight:900; opacity:.95}
.backText{font-weight:900}

/* -----------------------------
   Home (index) compact tiles
   - Matches the reference: small, centered icon + label
------------------------------*/
.homeCat{margin-top:16px}
.homeCatTitle{
  font-weight:900;
  letter-spacing:.2px;
  margin:10px 2px 10px;
  color: rgba(255,255,255,.92);
}
.homeMiniGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap:12px;
}
.homeMiniTile{
  min-height:84px;
  border-radius:14px;
  padding:14px 12px;
  text-decoration:none;
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:8px;

  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.045));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 28px rgba(0,0,0,.30);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  }
.homeMiniTile:active{
  transform: translateY(-1px);
  filter: brightness(1.06);
  border-color: rgba(255,255,255,.18);
}
.homeMiniIcon{
  font-size:28px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.homeMiniText{
  font-weight:800;
  font-size:14px;
  line-height:1.1;
  text-align:center;
  opacity:.95;
}

.homeMiniBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:8px;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.2px;
  background: rgba(34,197,94,.16);
  border: 1px solid rgba(34,197,94,.34);
}

/* Online tile: stateful badge + glow + tooltip */
.homeMiniTile--online{position:relative}
.homeMiniTile--online .homeMiniBadge{margin-top:0}

.homeMiniBadge.is-offline{
  background: rgba(148,163,184,.14);
  border-color: rgba(148,163,184,.32);
  color: rgba(255,255,255,.92);
}

.homeMiniBadge.is-online{
  background: rgba(34,197,94,.16);
  border-color: rgba(34,197,94,.38);
}

.homeMiniTile--online.is-online{
  border-color: rgba(34,197,94,.26);
  box-shadow:
    0 10px 28px rgba(0,0,0,.30),
    0 0 0 1px rgba(34,197,94,.10),
    0 0 22px rgba(34,197,94,.20);
}

.homeMiniTile--online.is-online .homeMiniBadge{
  }

/* Tooltip (hover) */
.homeMiniTile--online[data-tooltip]::after{
  content: attr(data-tooltip);
  position:absolute;
  left:50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(6px);
  opacity:0;
  pointer-events:none;
  white-space:nowrap;
  padding:6px 10px;
  border-radius:10px;
  font-size:12px;
  font-weight:800;
  color: rgba(255,255,255,.92);
  background: rgba(15,23,42,.92);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  }

.homeMiniTile--online[data-tooltip]::before{
  content:'';
  position:absolute;
  left:50%;
  bottom: calc(100% + 4px);
  width:10px;
  height:10px;
  transform: translateX(-50%) rotate(45deg);
  opacity:0;
  pointer-events:none;
  background: rgba(15,23,42,.92);
  border-left: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  }

.homeMiniTile--online:active::after{
  opacity:1;
  transform: translateX(-50%) translateY(0);
}
.homeMiniTile--online:active::before{
  opacity:1;
  transform: translateX(-50%) rotate(45deg);
}

/* Slightly denser layout on small screens */
@media (max-width: 480px){
  .homeMiniGrid{grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px}
  .homeMiniTile{min-height:78px; padding:12px 10px}

  /* Mobile: more compact badge */
  .homeMiniBadge{font-size:11px; padding:4px 9px}
}

/* Toast Notifications */
#toast-container{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  pointer-events: none;
}

.toast{
  pointer-events: auto;
  user-select: none;
  max-width: min(92vw, 520px);
  min-width: 220px;
  padding: 12px 14px;
  border-radius: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(15, 23, 42, .92);
  color: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  opacity: 0;
  transform: translateY(16px);
  border: 1px solid rgba(255,255,255,.10);
}

.toast--show{
  opacity: 1;
  transform: translateY(0);
}

.toast--hide{
  opacity: 0;
  transform: translateY(16px);
}

.toast__msg{
  font-size: 14px;
  line-height: 1.25;
  word-break: break-word;
}

.toast__x{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  background: rgba(255,255,255,.10);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.toast__x:active{ background: rgba(255,255,255,.16); }

.toast--success{ border-left: 4px solid rgba(34,197,94,.95); }
.toast--error{ border-left: 4px solid rgba(239,68,68,.95); }
.toast--info{ border-left: 4px solid rgba(59,130,246,.95); }
.toast--warning{ border-left: 4px solid rgba(245,158,11,.95); }

/* Online widget (homepage) */
.homeWidgets{
  display:flex;
  gap:12px;
  margin: 14px 0 18px;
}
.onlineWidget{
  width: 180px;
  height: 96px;
  border-radius: 14px;
  background: rgba(20, 25, 45, .85);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  position:relative;
  overflow:hidden;
}
.onlineWidget:active{
  transform: translateY(-1px);
}
.onlineWidgetIcon{
  position:relative;
  width: 44px;
  height: 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 6px;
}
.onlineRing{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(34,197,94,.9);
  box-shadow: 0 0 0 6px rgba(34,197,94,.14);
}
.onlineCheck{
  position:absolute;
  right: 8px;
  top: 6px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(34,197,94,.95);
  color: #0b1220;
  font-weight: 900;
  font-size: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.onlineWidgetText{
  font-weight: 800;
  color: rgba(255,255,255,.92);
  letter-spacing: .2px;
  font-size: 14px;
}
#onlineCount{
  font-variant-numeric: tabular-nums;
}

/* ===== Custom Select (Theme) ===== */
.cs-hidden{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
  width:0 !important;
  height:0 !important;
  margin:0 !important;
}
.cs-wrap{position:relative;width:100%; z-index:1}
.cs-wrap.is-open{z-index:100000}
.cs-wrap.is-open .cs-options{z-index:100001}
.cs-trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.20);
  color:var(--text);
  cursor:pointer;
}
.cs-trigger:focus{outline:2px solid rgba(64,186,255,.35); outline-offset:2px}
.cs-value{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cs-caret{
  width:10px;height:10px;
  border-right:2px solid rgba(255,255,255,.7);
  border-bottom:2px solid rgba(255,255,255,.7);
  transform:rotate(45deg);
  flex:0 0 auto;
  margin-top:-2px;
}
.cs-wrap.is-open .cs-caret{transform:rotate(-135deg); margin-top:2px}
.cs-options{
  position:absolute;
  left:0; right:0;
  bottom:auto;
  top:calc(100% + 8px);
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(8,12,18,.98);
  box-shadow:0 16px 40px rgba(0,0,0,.55);
  padding:6px;
  display:none;
  max-height:260px;
  overflow:auto;
  z-index:9999;
  backdrop-filter: blur(8px);
}
.cs-search{position:sticky; top:0; z-index:2; padding:6px; margin:-6px -6px 6px; background:rgba(8,12,18,.98); border-bottom:1px solid rgba(255,255,255,.08); backdrop-filter: blur(8px);}
.cs-search-input{
  width:100%;
  height:38px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  outline:none;
}
.cs-search-input:focus{border-color:rgba(64,186,255,.55); box-shadow:0 0 0 3px rgba(64,186,255,.16)}
.cs-search-input::placeholder{color:rgba(255,255,255,.45)}
.cs-wrap.is-open .cs-options{display:block}
.cs-option{
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.9);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-size:14px;
}
.cs-option:active{background:rgba(64,186,255,.12)}
.cs-option.is-selected{background:rgba(64,186,255,.18)}
.cs-option.is-disabled{opacity:.45; cursor:not-allowed}
.cs-options::-webkit-scrollbar{width:10px}
.cs-options::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12); border-radius:10px}
.cs-options::-webkit-scrollbar-track{background:rgba(255,255,255,.04); border-radius:10px}

/* Mobile: a bit tighter */
@media (max-width: 520px){
  .cs-trigger{padding:10px 11px; border-radius:12px}
  .cs-option{padding:9px 11px}
  .cs-options{max-height:220px; border-radius:14px}
}

/* Profile sidebar tidy cards */
.profileX .quickMenu{ display:grid; gap:8px; margin-top:10px; }
.profileX .quickMenu .qLink{
  display:block;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  font-weight: 800;
  text-decoration:none;
  color: inherit;
}
.profileX .quickMenu .qLink:active{ background: rgba(255,255,255,.06); }
.profileX .sideLines .v{ max-width: 160px; }
@media (min-width: 980px){
  .profileX .sideLines .v{ max-width: 220px; }
}

/* --- Profile layout polish (centered + proportional) --- */
.profileX .profileTop{
  max-width: 1120px;
  margin: 0 auto;
}
@media (min-width: 980px){
  .profileX .profileTop{
    grid-template-columns: 320px 1fr;
    gap: 18px;
  }
}
.profileX .profileSideCard{
  position: sticky;
  top: 18px;
}
.profileX .quickMenu{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.profileX .qLink{
  width:100%;
  text-align:center;
}
.profileX .profileQuick{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 18px 0;
}
.profileX .profileGrid{
  max-width: 1120px;
  margin-left:auto;
  margin-right:auto;
  padding: 0 18px 18px;
}
.profileX .profileMetaCard .cardXBody .sideTitle{
  margin-top: 0;
}

/* --- Profile hero card + balanced columns --- */
@media (min-width: 980px){
  .profileX .profileTop{ grid-template-columns: 340px 1fr; }
}
.profileX .profileLeft{ display:flex; flex-direction:column; gap:14px; }
.profileX .profileHero{ border-radius: 22px; }
.profileX .profileHero .cardXHead{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.profileX .chipGreen{ border:1px solid rgba(34,197,94,.35); background: rgba(34,197,94,.10); }
.profileX .heroBody{ padding-top: 2px; }
.profileX .heroStats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
@media (max-width: 720px){
  .profileX .heroStats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.profileX .statBox{
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding: 10px 12px;
}
.profileX .statBox .k{ font-size:12px; opacity:.75; }
.profileX .statBox .v{ margin-top:4px; font-weight:900; font-size:16px; }
.profileX .heroBadges{ margin-top: 12px; }
.profileX .heroBadgesTitle{ font-weight:800; font-size:12px; letter-spacing:.04em; opacity:.9; margin-bottom:8px; }

/* --- Profile grid professional layout --- */
.profileX .profileGrid{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 18px 18px;
  display:grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .profileX .profileGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1200px){
  .profileX .profileGrid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.profileX .cardX{ align-self: stretch; }
.profileX .cardXBody .quickCard{ background: transparent; border: none; padding: 0; }

.profileX .profileTop{ max-width:1120px; margin:0 auto; }

/* --- Career sparkline --- */
.profileX .careerSpark{ display:flex; flex-direction:column; align-items:stretch; gap:6px; position:relative; }
.profileX .sparkline{
  width: 260px;
  height: 84px;
  opacity: 1;
  color: var(--profileAccent, #60a5fa);
}
.profileX .sparkline .sparkBg{
  fill: rgba(255,255,255,.05);
  stroke: rgba(255,255,255,.12);
}
.profileX .sparkline .sparkGrid line{
  stroke: rgba(255,255,255,.10);
  stroke-width: 1;
  shape-rendering: crispEdges;
}
.profileX .sparkline .sparkArea{ opacity: .95; }
.profileX .sparkline .sparkLine{
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.profileX .sparkline .sparkPt{
  fill: rgba(255,255,255,.92);
  stroke: currentColor;
  stroke-width: 2;
  opacity: .95;
}
.profileX .sparkline .sparkPt.isLast{
  fill: currentColor;
  stroke: rgba(255,255,255,.85);
  opacity: 1;
}
.profileX .sparkline .sparkLast text{
  fill: rgba(255,255,255,.78);
  font-size: 11px;
  font-weight: 600;
  paint-order: stroke;
  stroke: rgba(0,0,0,.35);
  stroke-width: 2;
}
.profileX .sparkMeta{ font-size:11px; opacity:.72; }

.profileX .careerSpark .sparkMeta{
  position:absolute;
  left: 12px;
  top: 10px;
  z-index: 2;
  pointer-events:none;
}

.profileX .sparkEmpty{
  font-size:11px;
  opacity:.65;
  padding: 8px 10px;
  border:1px dashed rgba(255,255,255,.14);
  border-radius: 12px;
}

/* === MMO Career Summary (symmetric redesign) === */
.profileX .careerSummary{ width:100%; }
.profileX .careerSummaryTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 12px;
}
.profileX .careerSummaryTitle{
  display:flex; align-items:center; gap:10px;
  font-weight: 900;
  letter-spacing: .02em;
}
.profileX .careerEmblem{
  width: 34px; height: 34px;
  display:grid; place-items:center;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

.profileX .careerSummaryGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 12px;
}
.profileX .careerPanel{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  padding: 14px 14px;
  min-width: 0;
}

.profileX .careerIdentityTop{ display:flex; align-items:center; gap:12px; }
.profileX .careerAvatarMini{
  width: 44px; height: 44px;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  flex: 0 0 auto;
  display:grid; place-items:center;
}
.profileX .careerAvatarMini img{ width:100%; height:100%; object-fit: cover; display:block; }
.profileX .careerAvatarMini span{ font-weight: 900; font-size: 16px; opacity: .9; }

.profileX .careerPlayerName{ font-weight: 900; font-size: 16px; line-height:1.15; }
.profileX .careerPlayerSub{ margin-top: 4px; font-size: 11px; opacity: .75; }

.profileX .careerBars{ margin-top: 12px; }
.profileX .careerBarBlock .careerBarTop{ display:flex; justify-content:space-between; gap:10px; font-size:11px; opacity:.85; }
.profileX .careerBarBlock .lbl{ text-transform: uppercase; letter-spacing:.22px; }
.profileX .careerBarBlock .val{ white-space:nowrap; opacity:.8; }

.profileX .careerMiniHints{ margin-top: 12px; display:flex; flex-wrap:wrap; gap:8px 12px; }
.profileX .careerHint{ font-size: 11px; opacity: .78; }

/* Make Total Value card fit inside panel nicely */
.profileX .careerTotal .totalValueCard{ margin:0; width:100%; min-width: 0; }

/* Sparkline in its panel */
.profileX .careerChart .careerSpark{ width:100%; }

/* Symmetric hero stats grid */
.profileX .heroStats{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.profileX .heroStats .statBox{
  min-height: 72px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  box-shadow: 0 12px 32px rgba(0,0,0,.33);
  display:flex;
  flex-direction: column;
  justify-content: center;
}
.profileX .heroStats .statBox .k{ font-size: 11px; opacity: .78; text-transform: uppercase; letter-spacing:.24px; }
.profileX .heroStats .statBox .v{ margin-top: 6px; font-size: 18px; font-weight: 900; letter-spacing:.01em; }
.profileX .heroStats .statBoxLink{ cursor:pointer; text-decoration:none; }
.profileX .heroStats .statBoxLink:active{ transform: translateY(-1px); }

@media (max-width: 980px){
  .profileX .heroStats{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .profileX .careerSummaryGrid{ grid-template-columns: 1fr; }
  .profileX .heroStats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
/* --- Total Value card (career summary) --- */
.profileX .careerHeadRight{
  margin-left:auto;
  display:grid;
  /* Left: total value card fits content, Right: chart fills remaining space */
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 10px;
  align-items:center;
}

/* --- Career HUD (username / energy / level-xp) --- */
.profileX .careerHud{ grid-column: 1 / 2; grid-row: 1 / 2; min-width: 0; }
.profileX .careerHudRow1{ display:flex; align-items:center; gap: 14px; }
.profileX .careerHudRow2{ margin-top: 8px; display:flex; }

/* Right top area (energy + last seen) */
.profileX .careerRightTop{
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  justify-self: end;
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.profileX .careerUserName{
  min-width: 140px;
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profileX .careerEnergy{ width: 180px; }
.profileX .careerLevel{ width: 220px; }

.profileX .careerHudLabel{ font-size: 11px; opacity: .78; letter-spacing: .25px; text-transform: uppercase; }
.profileX .careerHudValue{ margin-top: 6px; font-size: 11px; opacity: .72; white-space: nowrap; }

.profileX .careerHudBar{
  margin-top: 6px;
  height: 10px;
  border-radius: 999px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.profileX .careerHudBar > span{
  display:block;
  height:100%;
  width:0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(34,197,94,.95), rgba(16,185,129,.70));
  box-shadow: 0 0 18px rgba(34,197,94,.28);
}
.profileX .careerHudBar--energy > span{
  background: linear-gradient(90deg, rgba(250,204,21,.95), rgba(249,115,22,.70));
  box-shadow: 0 0 18px rgba(250,204,21,.22);
}

/* Place right-side elements in the grid (do not move anything else) */
.profileX .careerHeadRight > .careerSpark{ grid-column: 2 / 3; grid-row: 2 / 3; justify-self: stretch; }

.profileX .totalValueCard{
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width: 240px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  text-align:left;
}

.profileX .totalValueCard .tvLabel{
  font-size: 11px;
  letter-spacing: .25px;
  text-transform: uppercase;
  opacity: .75;
}

.profileX .totalValueCard .tvValue{
  margin-top: 4px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
}

.profileX .totalValueCard .tvCur{
  font-size: 12px;
  font-weight: 700;
  opacity: .85;
}

.profileX .totalValueCard .tvSub{
  margin-top: 6px;
  font-size: 11px;
  opacity: .65;
}

@media (max-width: 520px){
  .profileX .careerHeadRight{ grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; }
  .profileX .careerHud{ grid-column: 1 / 2; }
  .profileX .careerHeadRight > .chip{ grid-column: 1 / 2; justify-self: start; }
  .profileX .totalValueCard{ grid-column: 1 / 2; width: 100%; }
  .profileX .careerHeadRight > .careerSpark{ grid-column: 1 / 2; justify-self: start; }
}

/* --- Friend modal --- */
body.modalOpen{ overflow:hidden; }
.modalX{ position:fixed; inset:0; display:none; z-index: 9999; }
.modalX[aria-hidden="false"]{ display:block; }
.modalBackdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); }
.modalPanel{
  position:relative;
  width: min(560px, calc(100% - 28px));
  margin: 8vh auto 0;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(15,23,42,.92);
  box-shadow: 0 20px 80px rgba(0,0,0,.55);
  overflow:hidden;
}
.modalHead{ display:flex; align-items:center; justify-content:space-between; padding: 14px 16px; border-bottom:1px solid rgba(255,255,255,.10); }
.modalTitle{ font-weight: 900; letter-spacing:.02em; }
.modalClose{ border:none; background: rgba(255,255,255,.08); color: inherit; padding: 8px 10px; border-radius: 12px; cursor:pointer; }
.modalBody{ padding: 14px 16px 16px; }
.profileX .friendCompact{ display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* --- Inventory preview scroll --- */
.profileX .invScroll{
  max-height: 140px;
  overflow: auto;
  padding-right: 4px;
}
.profileX .invScroll::-webkit-scrollbar{ width: 8px; height: 8px; }
.profileX .invScroll::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 999px; }
.profileX .invScroll::-webkit-scrollbar-track{ background: transparent; }

/* --- Friends card (merged) --- */
.profileX .friendsWrap{ display:flex; flex-direction:column; gap:12px; }
.profileX .friendsList{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  max-height: 240px;
  overflow:auto;
  padding-right: 4px;
}
.profileX .friendsList::-webkit-scrollbar{ width: 8px; height: 8px; }
.profileX .friendsList::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 999px; }
.profileX .friendRow{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  text-decoration:none;
  color: inherit;
}
.profileX .friendAvatar{
  position:relative;
  width: 42px; height:42px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  font-weight: 900;
}
.profileX .friendAvatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.profileX .friendMeta{ display:flex; flex-direction:column; line-height:1.1; }
.profileX .friendName{ font-weight: 900; font-size: 13px; }
.profileX .friendLvl{ font-size: 12px; opacity:.75; margin-top:4px; }
.profileX .friendHoverTip{
  position:absolute;
  left:50%; top:-8px;
  transform: translate(-50%,-100%);
  background: rgba(15,23,42,.92);
  border:1px solid rgba(255,255,255,.14);
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  white-space: nowrap;
  opacity:0;
  pointer-events:none;
}
.profileX .friendAvatar:active .friendHoverTip{ opacity:1; }
.profileX .friendsAdd{
  border-top:1px solid rgba(255,255,255,.10);
  padding-top: 10px;
}
.profileX .friendsAddForm{ display:flex; gap:10px; align-items:center; }
.profileX .friendsAddForm .input{ flex:1; min-width: 0; }
.profileX .friendsAddForm .btn{ white-space:nowrap; }
@media (max-width: 520px){
  .profileX .friendsAddForm{ flex-direction:column; align-items:stretch; }
}

/* Profile floating popups (friends) */

.fpPopup{
  position:absolute;
  inset:0;
  display:none;
  z-index: 1200;
}
.fpPopup.open{ display:block; }
.fpPopupCard{
  position:absolute;
  min-width: 320px;
  max-width: min(520px, calc(100vw - 24px));
  max-height: min(620px, calc(100vh - 24px));
  overflow:hidden;
  border-radius: 16px;
  border: 1px solid rgba(48,55,68,.68);
  background: rgba(10,14,20,.92);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
}
.fpPopupHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(48,55,68,.5);
}
.fpPopupTitle{ font-weight: 700; }
.fpClose{
  appearance:none;
  border:0;
  background:transparent;
  color: inherit;
  font-size: 18px;
  cursor:pointer;
  opacity:.85;
}
.fpClose:active{ opacity:1; }
.fpPopupBody{
  padding: 12px 14px;
  overflow:auto;
  max-height: min(560px, calc(100vh - 90px));
}
.fpFriendsList{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.fpFriendRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.fpFriendLeft{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
}
.fpFriendName{ font-weight:600; }

/* Friends mini grid: 8 avatars */
.friendsMiniHead{ display:flex; align-items:center; gap:10px; }
.friendsMiniHead .btn.sm{ padding:6px 10px; border-radius: 999px; }
.friendsMiniGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-items:center;
}
.friendsMiniAvatar{ display:flex; justify-content:center; text-decoration:none; }
.friendsMiniAvatar .friendAvatar.sm{
  width: 42px;
  height: 42px;
  border-radius: 14px;
}
.friendsMiniAvatar .friendAvatar.sm img{
  width:100%; height:100%; object-fit:cover; border-radius: 14px;
}

/* Offers page: top layout (header + leaders side-by-side) */
.whTopGrid{display:grid;grid-template-columns:1.25fr .75fr;gap:14px;align-items:stretch;margin-bottom:14px}
@media (max-width: 980px){
  .whTopGrid{grid-template-columns:1fr}
}

/* Toptancı XP progress (moved under Toptancı Lv) */
.whProgWrap{margin-top:10px}
.whProgNote{font-size:12px;opacity:.85}
.whProgTrack{height:10px;background:rgba(255,255,255,.12);border-radius:999px;overflow:hidden;margin-top:6px}
.whProgBar{height:100%;background:rgba(255,255,255,.45)}

/* Leaders box placed in top grid */
.whLeadersBox{margin-top:0;height:100%}
.whLeadersBody{display:flex;flex-direction:column;gap:10px;padding:12px;max-height:270px;overflow:auto}

/* ===== Offers page refresh (leaders + offers cards) ===== */
.whLeadersBox .whLeadersBody { padding: 12px; }
.leaderList { display:flex; flex-direction:column; gap:10px; }
.leaderRow {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background: rgba(255,255,255,.03);
}
.leaderRank{
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:10px;
  background: rgba(255,255,255,.06);
  font-weight:800;
}
.leaderAvatar{
  width:34px; height:34px; border-radius:12px; object-fit:cover;
  border:1px solid rgba(255,255,255,.18);
}
.leaderName .nm{ font-weight:800; line-height:1.1; }
.leaderName .sm{ font-size:12px; }
.leaderScore{
  margin-left:auto;
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}

/* Offers grid cards */
.offerGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  padding:12px;
}
.offerGridDone{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px){
  .offerGrid, .offerGridDone{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .offerGrid, .offerGridDone{ grid-template-columns: 1fr; }
}

.offerCard{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius:18px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height: 210px;
}
.offerCardDone{ opacity:.95; }

.offerTop{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
}
.offerTitle{ font-weight:900; letter-spacing:.2px; }
.offerPayout{ text-align:right; }
.offerPayout .gold{ font-size:16px; font-weight:900; }
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  font-weight:800;
  font-size:12px;
}
.offerItems{
  display:flex; flex-direction:column; gap:8px;
  padding-top:2px;
}
.offerItemRow{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.10);
}
.offerItemLeft{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.offerItemName{ font-weight:800; }
.offerItemRight{
  font-weight:900;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  min-width: 74px;
  text-align:center;
}
.offerItemRight.ok{ background: rgba(0,255,160,.08); border-color: rgba(0,255,160,.18); }
.offerItemRight.bad{ background: rgba(255,80,80,.08); border-color: rgba(255,80,80,.18); }

.offerActions{ margin-top:auto; }
.offerBtnRow{ display:flex; gap:10px; }
.offerBtnRow .btn{ flex:1; }

.friendAvatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.friendAvatar > span{
  font-weight: 900;
  color: #0b1220;
}

.friendAvatar{
  width: 48px !important;
  height: 48px !important;
  min-width: 48px;
  min-height: 48px;
  border-radius: 50%;
  overflow: hidden;
}

.friendAvatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Profile: remove quick actions (handled in PHP) + add compact Home-like stats next to avatar */
.profileX .profileAvatarWrap{
  display:flex;
  align-items:flex-end;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom: 14px;
}

.profileX .profileMiniStats{
  flex:1;
  min-width: 260px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(15,23,42,.55);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}

.profileX .profileMiniTop{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:baseline;
  margin-bottom: 8px;
}

.profileX .profileMiniLevel,
.profileX .profileMiniXp{
  font-weight: 700;
  font-size: 14px;
}

.profileX .profileMiniBar{
  display:flex;
  align-items:center;
  gap:10px;
}

.profileX .profileMiniTrack{
  flex:1;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow:hidden;
}

.profileX .profileMiniFill{
  height: 100%;
  border-radius: 999px;
  background: rgba(34,197,94,.85);
}

.profileX .profileMiniPct{
  font-size: 12px;
  opacity: .85;
  min-width: 38px;
  text-align:right;
}

.profileX .profileMiniEnergy{
  margin-top: 10px;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  display:inline-flex;
  gap:6px;
  align-items:center;
}

@media (max-width: 520px){
  .profileX .profileMiniStats{ min-width: 100%; }
}

/* Profile: username card replacing "Kısa Bilgi" */
.profileX .profileUserCard{
  padding: 10px 12px;
  border-radius: 16px;
  margin-bottom: 10px;
  background:
    radial-gradient(120% 140% at 20% 0%, rgba(56,189,248,.22), transparent 55%),
    radial-gradient(120% 140% at 80% 100%, rgba(167,139,250,.18), transparent 55%),
    rgba(15,23,42,.55);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}

.profileX .profileUserName{
  display:block;
  font-weight: 900;
  letter-spacing: .3px;
  font-size: 15px;
  color: #e6f2ff;
  text-shadow:
    0 0 6px rgba(56,189,248,.55),
    0 0 16px rgba(167,139,250,.35);
}

.profileX .profileAvatar.online img{
  box-shadow: 0 0 0 3px rgba(34,197,94,.95);
}

.profileX .profileAvatar.online img{
  box-shadow: 0 0 0 5px rgba(16,185,129,1);
}

/* Profile: last seen under username card */
.profileX .profileLastSeenMini{
  margin-top: 6px;
  font-size: 12px;
  opacity: .8;
}

/* Profile: inline last seen under username (compact) */
.profileX .profileLastSeenInline{
  display:block;
  margin-top: 4px;
  font-size: 12px;
  opacity: .75;
  color: #cbd5f5;
}

/* Profile: last seen exactly under username (inside stats card) */
.profileX .profileLastSeenCard{
  margin-top: 4px;
  margin-bottom: 6px;
  font-size: 12px;
  color: #9ca3af;
  opacity: .9;
}

/* Profile: last seen line inside stats card (red area) */
.profileX .profileLastSeenCard{
  margin-top: 4px;
  margin-bottom: 8px;
  font-size: 12px;
  color: rgba(226,232,240,.85);
  opacity: .9;
}

/* Profile avatar online highlight (normal) */
.profileX .profileAvatar.online{
  box-shadow:
    0 0 0 3px rgba(34,197,94,.95),
    0 0 18px rgba(34,197,94,.55),
    0 18px 45px rgba(0,0,0,.35);
}

.profileX .profileAvatar.online img{
  box-shadow: 0 0 0 3px rgba(34,197,94,.95);
}

/* Blue glass username card (professional) */
.profileX .glassBlue{
  padding: 12px 14px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(56,189,248,.22), rgba(59,130,246,.12)),
    rgba(15,23,42,.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(147,197,253,.35);
  box-shadow:
    0 18px 40px rgba(2,132,199,.25),
    inset 0 1px 0 rgba(255,255,255,.15);
}

.profileX .glassBlue .profileUserName{
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .3px;
  color: #eaf6ff;
  text-shadow:
    0 0 6px rgba(56,189,248,.45),
    0 6px 18px rgba(2,132,199,.35);
}

/* Dark blue glass + glowing hover */
.profileX .glassBlue{
  background:
    linear-gradient(180deg, rgba(30,64,175,.28), rgba(30,58,138,.18)),
    rgba(15,23,42,.65);
  border: 1px solid rgba(96,165,250,.35);
  }

.profileX .glassBlue:active{
  transform: translateY(-1px);
  border-color: rgba(147,197,253,.75);
  box-shadow:
    0 0 0 1px rgba(147,197,253,.35),
    0 20px 55px rgba(59,130,246,.45),
    0 0 28px rgba(56,189,248,.65);
}

/* Keep layout when avatar moved into Total Value card */
.profileX .profileAvatarWrap.avatarGhost{ visibility:hidden; }

.profileX .totalValueCard .tvAvatar{
  width:66px;
  height:66px;
  border-radius:999px;
  overflow:hidden;
  flex:0 0 66px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  box-shadow:
    0 10px 26px rgba(0,0,0,.35),
    0 0 0 3px rgba(34,197,94,.10);
  display:flex;
  align-items:center;
  justify-content:center;
}

.profileX .totalValueCard .tvAvatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.profileX .totalValueCard .tvAvatar span{
  font-weight:800;
  opacity:.9;
}

.profileX .totalValueCard .tvBody{
  flex:1;
  text-align:left;
  min-width:0;
}

/* FIX: Enerji barı = Seviye barı */
.profileX .profileMiniEnergy{
    padding: 0;
    background: transparent;
    border-radius: 0;
}

/* === SAFE MMO HUD (uses existing variables & keeps original actions) === */
.profileX .safeHudCard{
  margin-top: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  background:
    radial-gradient(110% 140% at 12% 0%, rgba(78,245,196,.14), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(18,20,28,.86), rgba(10,12,18,.86));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 40px rgba(0,0,0,.40);
}
.profileX .safeHudTop{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.profileX .safeHudTitle{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  font-weight: 900;
}
.profileX .safeHudBadge{
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 12px;
  color: rgba(255,255,255,.9);
  font-weight: 900;
}
.profileX .safeHudRow{
  display:flex;
  gap: 12px;
  align-items:center;
}
.profileX .safeHudRow + .safeHudRow{ margin-top: 10px; }
.profileX .safeHudIcon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(110% 110% at 30% 20%, rgba(255,255,255,.14), rgba(255,255,255,0) 60%),
    rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  flex: 0 0 34px;
}
.profileX .safeHudContent{ flex:1; min-width:0; }
.profileX .safeHudLabel{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
  color: rgba(255,255,255,.70);
  font-size: 12px;
}
.profileX .safeTrack{
  position:relative;
  height: 14px;
  border-radius: 10px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.50);
  background: rgba(255,255,255,.06);
}
.profileX .safeFill{ height:100%; border-radius: 10px; }
.profileX .safeFill.xp{
  background: linear-gradient(90deg, rgba(50,210,120,1), rgba(120,255,180,1));
  box-shadow: 0 0 16px rgba(80,255,160,.20);
}
.profileX .safeFill.energy{
  background: linear-gradient(90deg, rgba(255,140,60,1), rgba(255,40,70,1));
  box-shadow: 0 0 16px rgba(255,80,90,.22);
}
.profileX .safeText{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 950;
  color: rgba(255,255,255,.96);
  text-shadow: 0 1px 2px rgba(0,0,0,.85);
  pointer-events:none;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

/* === HIDE Character Status Card === */
.profileX .safeHudCard{
    display: none !important;
}

/* === SYMMETRY FIX: Chart & Energy width === */
.careerEnergy{ width: 210px !important; }
.sparkline{ width: 210px !important; }
/* Ensure the energy bar track doesn't stretch wider than container */
.careerHudBar--energy{ width: 210px !important; }

/* === ALIGN: Enerji & Seviye bar genişliği + Kart ikonları === */
:root{ --careerHudW: 210px; }

/* Seviye + Enerji aynı genişlikte görünsün */
.careerLevel{ width: var(--careerHudW) !important; }
.careerEnergy{ width: var(--careerHudW) !important; }
.careerHudBar{ width: var(--careerHudW) !important; }
.careerHudBar--energy{ width: var(--careerHudW) !important; }

/* 7 günlük grafiği de aynı optik genişliğe çek */
.sparkline{ width: var(--careerHudW) !important; }

/* Kariyer Özeti: grafiği sağ boşluğu dolduracak şekilde uzat (yalnızca bu bölümde) */
.profileX .careerSpark .sparkline{ width: 100% !important; }

/* Kariyer kart ikonları */
.careerBox .careerBoxTitle,
.profileMiniBox .profileMiniTitle{
  display:flex;
  align-items:center;
  gap: 8px;
}
.careerIcon, .miniIcon{
  width: 18px;
  height: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  flex: 0 0 18px;
  font-size: 12px;
  line-height: 1;
}

/* Stat kart başlıkları ikonlu */
.statBox .k{
  display:flex;
  align-items:center;
  gap: 8px;
}

/* === NEW STYLE: Level & Energy Bars (compact, symmetric, no overlap) === */
:root{
  --careerHudW: 170px; /* iki bar ortak ve daha kısa */
}

/* İki bar aynı genişlikte */
.careerLevel,
.careerEnergy,
.careerHudBar,
.careerHudBar--energy{
  width: var(--careerHudW) !important;
}

/* İç içe görünmeyi engelle (layout bozmadan) */
.careerLevel,
.careerEnergy{
  position: relative;
}
.careerLevel{ z-index: 2; }
.careerEnergy{ z-index: 1; }

/* Barların çizim katmanı */
.careerHudFill{
  position: relative;
  z-index: 1;
}
.careerHudBar .careerHudText,
.careerHudBar .careerHudText *{
  position: relative;
  z-index: 2;
}

/* İki blok arasında minimal, simetriyi bozmayacak boşluk */
.careerEnergy{ margin-top: 8px; }

/* === Career Summary: Profile avatar +25% (no layout/content changes) === */
.profileX .totalValueCard .tvAvatar img,
.profileX .totalValueCard .tvAvatar span{
  transform: scale(1.25);
  transform-origin: center;
}

/* === Career Summary: Avatar +25% more + foreground shadow === */
.profileX .totalValueCard .tvAvatar{
  position: relative;
  z-index: 2;
}

.profileX .totalValueCard .tvAvatar:after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(0,0,0,.35), rgba(0,0,0,0) 60%);
  filter: blur(6px);
  z-index: -1;
  opacity: .9;
}

.profileX .totalValueCard .tvAvatar img,
.profileX .totalValueCard .tvAvatar span{
  transform: scale(1.5625); /* 1.25 * 1.25 */
  transform-origin: center;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
}

/* === Career stat cards: center-align values === */
.profileX .statBox{
  text-align: center;
}

.profileX .statBox .k{
  justify-content: center;
}

.profileX .statBox .v{
  justify-content: center;
}

.profileX .statBox .v strong{
  display: inline-block;
}

/* === FIX: Only values centered (labels keep original alignment) === */
.profileX .statBox{ text-align: left; }
.profileX .statBox .k{ justify-content: flex-start; }
.profileX .statBox .v{ text-align: center; }

/* === Career cards as links (same style, no layout change) === */
.profileX a.statBoxLink{
  display: block;
  text-decoration: none;
  color: inherit;
}
.profileX a.statBoxLink:active{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}

/* === Icons for Level & Energy (MMO / Trade style) === */
.careerLevel .careerHudLabel,
.careerEnergy .careerHudLabel{
  position: relative;
  padding-left: 22px;
}

.careerLevel .careerHudLabel::before{
  content: "⭐";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  line-height: 1;
}

.careerEnergy .careerHudLabel::before{
  content: "⚡";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  line-height: 1;
}

/* === Friends statBox in heroStats === */
.profileX #friendsStatOpen{
  cursor: pointer;
}
.profileX #friendsStatOpen:focus{
  outline: 2px solid rgba(255,255,255,.22);
  outline-offset: 2px;
  border-radius: 14px;
}

/* =======================================================================
   Kariyer Özeti (V2) – MMO uyumlu, simetrik 3 kolon tasarım
   Not: Bu blok, önceki denemelerdeki dağınık override'ları baskılar.
   ======================================================================= */
.profileX .careerSummary--v2{
  --cs-gap: 12px;
  --cs-radius: 18px;
  --cs-border: rgba(255,255,255,.10);
  --cs-bg: rgba(6,10,18,.55);
  background:
    radial-gradient(900px 260px at 18% 18%, rgba(106,167,255,.18), rgba(0,0,0,0) 60%),
    radial-gradient(700px 240px at 80% 10%, rgba(255,200,120,.10), rgba(0,0,0,0) 55%),
    var(--cs-bg);
  border: 1px solid var(--cs-border);
  border-radius: 20px;
  padding: 14px;
  box-shadow: 0 22px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}

.profileX .careerSummary--v2 .careerSummaryTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.profileX .careerSummary--v2 .careerSummaryTitle{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 950;
  letter-spacing: .2px;
  color: rgba(233,238,255,.92);
}
.profileX .careerSummary--v2 .careerEmblem{
  width: 34px;
  height: 34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.profileX .careerSummary--v2 .careerSummaryGridV2{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cs-gap);
  align-items: stretch;
}
@media (max-width: 980px){
  .profileX .careerSummary--v2 .careerSummaryGridV2{ grid-template-columns: 1fr; }
}

.profileX .careerSummary--v2 .careerPaneV2{
  position: relative;
  border-radius: var(--cs-radius);
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 120% at 25% 20%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%),
    rgba(255,255,255,.035);
  padding: 12px;
  min-height: 138px;
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  overflow:hidden;
}

.profileX .careerSummary--v2 .careerPaneV2:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  pointer-events:none;
}

/* Identity */
.profileX .careerSummary--v2 .paneHeader{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 10px;
}
.profileX .careerSummary--v2 .careerAvatarMini{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  overflow:hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 42px;
}
.profileX .careerSummary--v2 .careerAvatarMini img{ width:100%; height:100%; object-fit:cover; }
.profileX .careerSummary--v2 .careerAvatarMini span{
  font-weight: 950;
  color: rgba(233,238,255,.92);
}
.profileX .careerSummary--v2 .careerPlayerName{ font-weight: 950; font-size: 16px; color: rgba(233,238,255,.95); }
.profileX .careerSummary--v2 .careerPlayerSub{ font-weight: 800; font-size: 12px; color: rgba(233,238,255,.68); }

.profileX .careerSummary--v2 .paneBars{ display:flex; flex-direction:column; gap: 10px; }
.profileX .careerSummary--v2 .barTop{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 10px;
  font-size: 12px;
  color: rgba(233,238,255,.72);
}
.profileX .careerSummary--v2 .barTop .lbl{ font-weight: 950; letter-spacing: .2px; }
.profileX .careerSummary--v2 .barTop .val{ font-weight: 900; color: rgba(233,238,255,.82); }

.profileX .careerSummary--v2 .hudBar{
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(0,0,0,.55);
  overflow:hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.profileX .careerSummary--v2 .hudBar > span{
  display:block;
  height:100%;
  border-radius: 999px;
  box-shadow: 0 0 16px rgba(106,167,255,.16);
}
.profileX .careerSummary--v2 .hudBar--xp > span{
  background: linear-gradient(90deg, rgba(60,220,140,1), rgba(120,255,190,1));
  box-shadow: 0 0 16px rgba(80,255,160,.18);
}
.profileX .careerSummary--v2 .hudBar--energy > span{
  background: linear-gradient(90deg, rgba(255,150,70,1), rgba(255,60,90,1));
  box-shadow: 0 0 16px rgba(255,90,110,.18);
}

.profileX .careerSummary--v2 .paneMini{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
}
.profileX .careerSummary--v2 .miniHint{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  padding: 8px 10px;
  font-weight: 850;
  color: rgba(233,238,255,.78);
}
.profileX .careerSummary--v2 .miniHint strong{ color: rgba(233,238,255,.96); }

/* Total Value */
.profileX .careerSummary--v2 .paneValue{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.profileX .careerSummary--v2 .paneValue .valueBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-weight: 950;
  letter-spacing: .25px;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(233,238,255,.78);
}
.profileX .careerSummary--v2 .paneValue .valueAmount{
  margin-top: 10px;
  font-size: 30px;
  font-weight: 1000;
  letter-spacing: .4px;
  color: rgba(233,238,255,.96);
  text-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.profileX .careerSummary--v2 .paneValue .valueAmount .cur{ opacity: .88; font-size: .92em; }
.profileX .careerSummary--v2 .paneValue .valueSub{
  margin-top: 6px;
  font-weight: 850;
  font-size: 12px;
  color: rgba(233,238,255,.66);
}
.profileX .careerSummary--v2 .paneValue .valueRing{
  position:absolute;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  border: 1px solid rgba(106,167,255,.18);
  background:
    radial-gradient(circle at 50% 50%, rgba(106,167,255,.12), rgba(0,0,0,0) 55%);
  filter: blur(.2px);
  opacity: .9;
  pointer-events:none;
}

/* Chart */
.profileX .careerSummary--v2 .paneChart .careerSpark{ height: 100%; display:flex; flex-direction:column; }
.profileX .careerSummary--v2 .paneChart .sparkMeta{
  font-weight: 950;
  letter-spacing: .2px;
  color: rgba(233,238,255,.82);
  margin-bottom: 8px;
}
.profileX .careerSummary--v2 .paneChart .sparkline{
  width: 100% !important; /* eski width override'larını ezer */
  height: 92px;
}

@media (max-width: 520px){
  .profileX .careerSummary--v2 .paneMini{ grid-template-columns: 1fr; }
  .profileX .careerSummary--v2 .paneValue .valueAmount{ font-size: 26px; }
}

/* === Hakkımda: Temel Alanlar inside card (compact, symmetric) === */
.profileX .aboutBasics{
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}
.profileX .aboutBasicsHead{
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
  margin-bottom: 10px;
}
.profileX .aboutBasicsIcon{
  width: 22px;
  height: 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 9px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 13px;
}
.profileX .aboutBasicsGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 520px){
  .profileX .aboutBasicsGrid{ grid-template-columns: 1fr 1fr; }
}
.profileX .abItem{
  padding: 10px;
  border-radius: 14px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.08);
}
.profileX .abK{
  display:block;
  font-size: 11px;
  color: rgba(255,255,255,.62);
  margin-bottom: 4px;
}
.profileX .abV{
  display:block;
  font-size: 13px;
  color: rgba(255,255,255,.92);
  word-break: break-word;
}

/* === ProfileTop: remove right column (career summary stays left) === */
@media (min-width: 980px){
  .profileX .profileTop{ grid-template-columns: 1fr !important; }
}

/* === MMO HUD overlap tweak: cover + career summary (scoped) === */
.profileX .profileHero{ position: relative; }

/* Pull the whole top section upward so content sits on the cover like a HUD */
.profileX .profileTop{
  position: relative;
  z-index: 3;
  margin-top: -86px; /* overlap cover */
}

/* Make the Career Summary read as a "HUD panel" and sit slightly higher */
.profileX .careerSummary--v2{
  position: relative;
  z-index: 4;
  margin-top: -18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.profileX .careerSummary--v2::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  background:
    radial-gradient(520px 180px at 20% 0%, rgba(106,167,255,.28), rgba(0,0,0,0) 60%),
    radial-gradient(420px 160px at 85% 10%, rgba(34,197,94,.22), rgba(0,0,0,0) 60%);
  opacity:.85;
  filter: blur(8px);
  z-index:-1;
}

/* Mobile: reduce overlap to avoid crowding */
@media (max-width: 640px){
  .profileX .profileTop{ margin-top: -62px; }
  .profileX .careerSummary--v2{ margin-top: -10px; }
}

/* --- Profile: 7 gün kazanç kartı aksiyon butonu --- */
.profileX .careerSpark .sparkActions{
  margin-top: 10px;
  display:flex;
  justify-content:flex-end;
}
.profileX .careerSpark .sparkActions .btn{
  min-width: 150px;
}
@media (max-width: 640px){
  .profileX .careerSpark .sparkActions{
    justify-content:stretch;
  }
  .profileX .careerSpark .sparkActions .btn{
    width:100%;
    min-width: 0;
  }
}

/* --- Social & Theme tab: Sosyal Alanlar + Tema yan yana --- */
.profileX .profileGrid--socialTheme{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}
@media (min-width: 980px){
  .profileX .profileGrid--socialTheme{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.profileX .profileGrid--socialTheme .formActions,
.profileX .profileGrid--socialTheme .divider{
  grid-column: 1 / -1;
}
.profileX .themePresets{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin-bottom: 10px;
}
.profileX .themePresets .tPreset{
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
  font-weight: 650;
  font-size: 12px;
  letter-spacing: .2px;
  cursor:pointer;
}
.profileX .themePresets .tPreset:active{
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
}
.profileX .themePresets .tPreset:active{ transform: translateY(1px); }

/* Fix: Tema select dropdown / popup Kaydet altında kalmasın */
.profileX .cardX, .profileX .cardXBody{ overflow: visible; }
.profileX .themeCard{ position:relative; z-index: 6; }
.profileX .formActions{ position:relative; z-index: 2; }

/* --- About card cleanup: remove left arrow and expand --- */
.profileX .aboutCard .cardXHead::before,
.profileX .aboutCard .cardXHead .chevron,
.profileX .aboutCard .cardXHead .arrow{
  display:none !important;
}

/* Expand About card to fill space */
.profileX .aboutCard{
  grid-column: 1 / -1;
}

/* --- Hakkımda: tek kart kaldığında boşluğu doldursun --- */
.profileX .profileGrid--mmo .aboutCard{
  grid-column: 1 / -1;
}

/* custom-select helpers */
.cs-native-hidden{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;}
.cs-disabled .cs-trigger{opacity:.55;cursor:not-allowed;}
.cs-option-disabled{opacity:.5;cursor:not-allowed;}

/* Custom select open state (compat) */
.cs-options.open{display:block}

/* Market: cancel my listing */
.btn-cancel-listing{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(255,120,120,.35);
  background:rgba(120,20,20,.25);
  color:rgba(255,255,255,.92);
  font-weight:700;
  cursor:pointer;
}
.btn-cancel-listing:active{background:rgba(120,20,20,.38)}
.btn-cancel-listing[disabled]{
  opacity:.55;
  cursor:not-allowed;
  filter:grayscale(.25);
}

/* Dropdown kesilmesin: select akken en yakn kart/panel overflow'u a */
.heroProfile:has(.cs-wrap.is-open),
.bigCard:has(.cs-wrap.is-open),
.tileCard:has(.cs-wrap.is-open),
.homeHero2:has(.cs-wrap.is-open),
.modalPanel:has(.cs-wrap.is-open),
.dmPanel:has(.cs-wrap.is-open),
.lineCard:has(.cs-wrap.is-open),
.cardX:has(.cs-wrap.is-open){
  overflow: visible !important;
}

/* --- MOBİL BEYAZ EKRAN VE YIRTILMA KESİN ÇÖZÜMÜ --- */
@media (max-width: 768px){
  body::before { 
      position: fixed !important; /* Arkaplanın kaybolmasını engeller */
      height: 120vh !important; /* Adres çubuğu açılıp kapanmalarına karşı pay bırakır */
  }
}

html {
  /* Temanızın en altındaki koyu lacivert renk. Lastik gibi çekildiğinde alttan beyaz değil, bu renk çıkar */
  background-color: #070b16 !important; 
  overscroll-behavior-y: none !important; /* Sayfanın en alta gelince yaylanmasını/sekmeyi durdurur */
}

/* === Robust full-screen fixed background (added) ===
   Moves the background to a fixed pseudo-element to prevent "double background" while scrolling.
*/
:root{ --app-bg:radial-gradient(1200px 720px at 20% 0%, rgba(56,189,248,.18), transparent 55%),
    radial-gradient(900px 680px at 78% 10%, rgba(34,197,94,.12), transparent 58%),
    radial-gradient(700px 520px at 55% 85%, rgba(99,102,241,.10), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 26px),
    linear-gradient(180deg, #0b1224, #070b16); }

body{ background: transparent !important; }

/* --- MOBİL LASTİK KAYDIRMA (ELASTIC SCROLL) VE BEYAZ EKRAN ÇÖZÜMÜ --- */
html {
  background-color: #070b16 !important; 
  min-height: 100vh !important; /* height:100% yerine bunu kullanıyoruz ki sayfa içeriğe göre uzasın */
  overscroll-behavior-y: none !important; 
}

body {
  background: transparent !important;
  min-height: 100vh !important;
  overscroll-behavior-y: none !important;
}

body::before {
  content: "";
  position: fixed !important; 
  /* Payı -250px yaparak arkaplanı footerdan da aşağı uzatıyoruz. Asla beyazlık çıkamaz. */
  top: -250px !important;
  bottom: -250px !important;
  left: 0;
  right: 0;
  z-index: -1;
  background: var(--app-bg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  will-change: transform; /* Grafik işlemciyi devreye sokar */
}






html {
  /* Temanızın en altındaki koyu lacivert renk. Lastik gibi çekildiğinde alttan beyaz değil, bu renk çıkar */
  background-color: #070b16 !important; 
  overscroll-behavior-y: none !important; /* Sayfanın en alta gelince yaylanmasını/sekmeyi durdurur */
}


.vipIcon{
  height: 02em;
  width: auto;
  vertical-align: middle;
  margin-left: 1px;
}



/* ===== Sadece Fare Kullanılan Masaüstü Ekranlarda %70 Zoom ===== */
@media (hover: hover) and (pointer: fine) {
  html {
    zoom: 0.7;
  }
}

/* Mobilde yatay kaydırma çubuğu çıkmasını önlemek için güvenlik ayarı */
body {
  overflow-x: hidden;
}







/* Üst bar ile içerik arasındaki ince parlak çizgiyi kaldır */
header.toplinks{
  border-bottom: 0 !important;
  box-shadow: none !important;
}

header.toplinks::before,
header.toplinks::after{
  content: none !important;
  background: none !important;
}

/* Eğer çizgi header içindeki .inner'dan geliyorsa */
header.toplinks .inner{
  border-bottom: 0 !important;
  box-shadow: none !important;
}

header.toplinks .inner::before,
header.toplinks .inner::after{
  content: none !important;
}


/* Mobilde form alanlarına tıklayınca otomatik yakınlaştırmayı kesin olarak engeller */
input, select, textarea {
  font-size: 16px !important;
}




/* =========================================
   ÜST MENÜYÜ EN ÖN PLANA ÇIKARTMA VE TAKİP (STICKY)
   ========================================= */
header {
    position: sticky !important; 
    top: 0 !important; /* Sayfanın en üstüne yapışmasını sağlar */
    z-index: 99999 !important; /* Kariyer özetini ve her şeyi ezer */
}

.topNavWrap {
    z-index: 99999 !important;
}





/* =========================================
   GENEL YAZI, BUTON VE FORM BÜYÜTME 
   ========================================= */

/* 1. Temel okuma metinlerini büyüt */
body, p, .card, .table td, .chatText, .chatText2, .dmBody, .abV {
    font-size: 16px !important;
}

/* 2. Aşırı küçük bırakılmış (11px-12px) etiket, hap ve bilgi yazılarını okunabilir yap */
.navlinks a, .heroSub, label, .statPill, .menuSubPro, .chatMeta, .chatHint, .mini, .pill, .badge, .table th, .k, .v {
    font-size: 14px !important;
}

/* 3. Menü ve Panel Başlıklarını belirginleştir */
.heroTitle { font-size: 38px !important; }
.facTitle, .chatTitle, .chatTitle2 { font-size: 28px !important; }
.menuTitle, .menuTitlePro, .bigTitle, .qTitle, .sideTitle { font-size: 18px !important; }

/* 4. Butonları daha büyük, etli ve tıklaması kolay yap */
.btn, .chatSendBtn, .chatSend2, .dmSend {
    font-size: 16px !important;
    padding: 12px 24px !important;
}

/* 5. Form elemanlarını (Input, Select) büyüt */
input, select, textarea, .chatInput, .chatInput2 {
    font-size: 16px !important;
    padding: 14px 16px !important;
}

/* Mobilde küçük menü ikonlarındaki (HomeTile) yazıları büyüt */
.homeMiniText { font-size: 16px !important; }
.homeMiniBadge { font-size: 13px !important; padding: 6px 12px !important; }








/* =========================================
   SADECE MOBİLDE (DOKUNMATİK EKRANLARDA) 
   GENELİ BÜYÜT, KARİYER ÖZETİNİ İLK HALİNDE BIRAK
   ========================================= */
@media (pointer: coarse) {
    
    /* 1. Temel Okuma Metinleri (Kariyer özetini bozmamak için 'body' buradan çıkarıldı) */
    p, .homeProSub, .homeProCardDesc, .abV, .toast__msg {
        font-size: 26px !important; 
        line-height: 1.5 !important;
    }
    
    /* 2. Başlıklar ve Kart İsimleri (Ana Sayfa Kartları) */
    .homeProTitle { font-size: 46px !important; }
    .homeProSectionTitle, .homeProCatTitle, .homeProCardLabel { font-size: 34px !important; }

    /* 3. Butonları Büyüt 
       (Not: Kariyer özeti içindeki 'Ayarlar, Profil' gibi küçük butonları 
        ve 'Elmas Al' butonunu orijinal halinde bırakmak için onları dışladık) */
    .btn:not(.mini):not(.btn-diamond-buy), .homeProQuickBtn, .btn-cancel-listing {
        font-size: 26px !important; 
        padding: 22px 34px !important; 
    }

    /* 4. Küçük Etiketler ve Ana Sayfa Rozetleri */
    .pill, .badge, .homeProBadge, .abK, [id^="badge-"] {
        font-size: 20px !important; 
        padding: 12px 16px !important;
    }

    /* 5. Arama Çubuğu ve Form Girişleri */
    input, select, textarea, .homeProSearchInput {
        font-size: 28px !important; 
        padding: 22px 26px !important;
    }

    /* 6. Üst Menü İkonları ve Yazıları (Rahat basılabilmesi için) */
    .topNavLabel {
        font-size: 24px !important;
    }
    .topNavIcon, .topNavIcon i {
        font-size: 30px !important;
    }
}






/* =========================================
   MİKTAR KONTROL (+/-) BUTONLARI KESİN ÇÖZÜM
   ========================================= */
.qty-control {
    display: flex !important;
    align-items: stretch !important; 
    height: 34px !important; /* Sat butonuyla hizalı olacak yükseklik */
    width: 90px !important; /* Karta tam sığması için sabit genişlik */
    flex-shrink: 0 !important; /* Dar ekranlarda ezilmesini engeller */
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

.qty-btn {
    width: 28px !important; 
    min-width: 28px !important;
    background: rgba(255, 255, 255, 0.05) !important; /* Buton yerleri belli olsun */
    color: #fff !important;
    border: none !important;
    font-size: 18px !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
}

.qty-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

.qty-input {
    flex: 1 !important; /* Ortadaki boşluğu esnek şekilde doldur */
    width: 100% !important;
    background: transparent !important;
    color: #ffffff !important; /* Sayı kesin BEYAZ görünsün */
    border: none !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: bold !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    -moz-appearance: textfield !important;
}

/* Sayı girişindeki varsayılan tarayıcı oklarını tamamen gizle */
.qty-input::-webkit-outer-spin-button, 
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}