/* ============================================================================
   YERALTI — "DOSYA" design system stylesheet  (static/css/yeralti.css)
   Single source of truth for the GLOBAL RE-SKIN. Replaces the old CEPHE HUD.
   Pairs with DESIGN.md. Drop-in: it (a) re-points the legacy CSS variables and
   (b) rewrites every legacy component class body to the new soft/warm geometry,
   so existing templates adopt the new look with ZERO markup changes, and adds
   the new component classes the redesign introduces (tooltips, wax-seal, radar,
   sparkline, busy-strip, stamp, etc.).
   Warm dark · brass accent · soft rounded · cinematic. NO chamfers, NO neon.
   ============================================================================ */

/* ---------------------------------------------------------------- TOKENS --- */
:root{
  /* surfaces */
  --ink:#0f0c0a; --bg-0:#0f0c0a; --bg0:#0f0c0a; --bg-mid:#15110d; --bg1:#15110d;
  --panel:#1c1712; --panel-2:#241d16; --panel2:#241d16; --raised:#2c241b;
  /* hairlines (warm, low alpha) */
  --line:rgba(228,183,95,.11); --line-soft:rgba(228,183,95,.07);
  --line-strong:rgba(228,183,95,.20); --line2:rgba(228,183,95,.20); --line3:rgba(228,183,95,.32);
  --hair:rgba(255,255,255,.05);
  /* text */
  --text-hi:#f4ecdc; --thi:#f4ecdc; --text-2:#e6dcc8; --tx2:#e6dcc8;
  --text:#c9bca4; --tx:#c9bca4; --text-dim:#8e8268; --tdim:#8e8268; --text-mute:#6a6049; --tmute:#6a6049;
  /* BRAND — brass/gold (legacy "amber" tokens now point here) */
  --gold:#e3b75f; --gold-deep:#b8863a; --gold-hi:#f4d79a;
  --gold-soft:rgba(227,183,95,.12); --gold-line:rgba(227,183,95,.40); --on-gold:#1d1306;
  --amber:#e3b75f; --amber-deep:#b8863a; --amber-glow:rgba(227,183,95,.4); --on-amber:#1d1306;
  --amber-grad:linear-gradient(180deg,var(--gold-hi),var(--gold-deep));
  /* semantics */
  --money:#5fc08a; --money-deep:#3f9c74; --info:#74b6cf; --accent:#74b6cf; --accent-deep:#3f8aa3;
  --cyan:#74b6cf; --diamond:#74b6cf; --patina:#74aaa6;
  --gold-prestige:#e3b75f; --warn:#e3b75f;
  --danger:#e3776c; --danger-2:#f2998f; --danger-hi:#f2998f; --ox:#a8463c;
  --red:#e3776c; --red-deep:#b3433a; --red-dark:#3a1714; --blood:#e3776c;
  /* recipes */
  --card-grad:linear-gradient(165deg,rgba(45,37,27,.84),rgba(24,19,14,.78));
  --module-grad:linear-gradient(165deg,rgba(44,36,27,.82),rgba(24,19,14,.74));
  --panel-grad:linear-gradient(180deg,rgba(28,23,18,.90),rgba(21,17,13,.82));
  --shadow:0 30px 60px -34px rgba(0,0,0,.90);
  --shadow-card:0 24px 50px -30px rgba(0,0,0,.85);
  --glow:0 18px 34px -16px var(--gold-line);
  --ease:cubic-bezier(.2,.8,.2,1);
  /* fonts */
  --disp:'Bricolage Grotesque',sans-serif; --body:'Hanken Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace; --serif:'Newsreader',serif;
  /* legacy chamfer tokens neutralized to soft radii (so old clip-path refs are harmless no-ops) */
  --cut-sm:none; --cut-card:none; --cut-hero:none; --cut-bar:none; --cut-ctl:none;
  --radius-ctl:12px; --radius-card:18px; --radius-modal:20px;
  --app-top:114px; /* topbar 68 + busy strip 46 */
}

/* ---------------------------------------------------------------- BASE ----- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; min-height:100vh; color:var(--tx); font-family:var(--body);
  font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:
    radial-gradient(56% 46% at 84% -4%, rgba(241,212,147,.13), transparent 62%),
    radial-gradient(60% 50% at 50% 38%, rgba(40,32,22,.5), transparent 70%),
    radial-gradient(54% 46% at 4% 2%, rgba(116,170,166,.045), transparent 56%),
    linear-gradient(180deg,#14100b 0%, #0e0a06 62%, #090703 100%);
  background-attachment:fixed;
}
::selection{background:rgba(227,183,95,.30); color:#fff;}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-thumb{background:rgba(228,183,95,.16); border-radius:9px; border:2px solid transparent; background-clip:padding-box;}
::-webkit-scrollbar-thumb:hover{background:rgba(228,183,95,.30); background-clip:padding-box;}
a{color:inherit;}
.font-mono,.num,[data-money],.tabnum{font-family:var(--mono);font-variant-numeric:tabular-nums;}
.text-grad{background:linear-gradient(180deg,#fff,var(--tx));-webkit-background-clip:text;background-clip:text;color:transparent;}

/* atmosphere layers — add <div class="fx-grain"></div><div class="fx-vignette"></div><div class="fx-lamp"></div> once in base.html */
.fx-grain,.fx-vignette,.fx-lamp{position:fixed;inset:0;pointer-events:none;z-index:0;}
.fx-grain{opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.fx-vignette{background:radial-gradient(128% 96% at 50% 30%, transparent 56%, rgba(0,0,0,.55) 100%);}
.fx-lamp{background:radial-gradient(46% 36% at 85% -3%, rgba(241,212,147,.14), transparent 66%);animation:lampOn 1.4s both;}

/* ------------------------------------------------------------- TYPOGRAPHY -- */
.h-display{font-family:var(--disp);font-weight:800;color:var(--thi);letter-spacing:-.01em;}
.h-title{font-family:var(--disp);font-weight:800;font-size:26px;color:var(--thi);line-height:1.1;}
.h-section{font-family:var(--disp);font-weight:700;font-size:16px;color:var(--thi);}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);}
.micro-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tdim);font-weight:600;}
.serif-accent{font-family:var(--serif);font-style:italic;color:var(--gold-hi);}

/* ------------------------------------------------------------- BUTTONS ----- */
.btn-primary,.btn-secondary,.btn-ghost,.btn-danger-outline,.btn-accent,.btn-danger{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;height:44px;padding:0 18px;
  border-radius:13px;font-family:var(--disp);font-weight:800;font-size:14px;letter-spacing:.02em;
  cursor:pointer;border:1px solid transparent;text-decoration:none;position:relative;overflow:hidden;
  transition:transform .15s var(--ease),background .15s var(--ease),border-color .15s var(--ease),filter .15s var(--ease),color .15s var(--ease);
}
.btn-lg{height:56px;font-size:18px;border-radius:16px;}
.btn-sm{height:36px;font-size:13px;border-radius:11px;padding:0 14px;}
.btn-primary{background:var(--amber-grad);color:var(--on-gold);box-shadow:var(--glow),inset 0 1px 0 rgba(255,255,255,.4);}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.06);}
.btn-primary:active{transform:translateY(0);filter:brightness(.97);}
.btn-primary:disabled,.btn-primary.disabled{background:var(--raised);color:var(--tmute);box-shadow:none;cursor:not-allowed;transform:none;filter:none;}
.btn-secondary{background:rgba(0,0,0,.2);color:var(--tx2);border-color:var(--line2);font-weight:700;}
.btn-secondary:hover{transform:translateY(-2px);border-color:var(--gold-line);color:var(--gold-hi);background:var(--gold-soft);}
.btn-ghost{background:transparent;color:var(--tdim);font-weight:700;}
.btn-ghost:hover{background:var(--panel2);color:var(--thi);}
.btn-danger,.btn-danger-outline{background:transparent;color:var(--danger);border-color:rgba(168,70,60,.5);font-weight:700;}
.btn-danger:hover,.btn-danger-outline:hover{background:rgba(168,70,60,.12);border-color:var(--danger);}
.btn-accent{background:rgba(116,182,207,.12);color:var(--info);border-color:rgba(116,182,207,.4);font-weight:700;}
.btn-accent:hover{transform:translateY(-2px);background:rgba(116,182,207,.18);border-color:var(--info);}
.btn-block{width:100%;}
/* CTA light sweep: <span class="glint"></span> inside a .btn-primary */
.glint{position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 34%,rgba(255,255,255,.42) 50%,transparent 66%);background-size:220% 100%;animation:glint 3.8s var(--ease) infinite;}
@media (max-width:767.98px){.btn-primary,.btn-secondary,.btn-ghost,.btn-danger,.btn-danger-outline,.btn-accent{min-height:44px;}}

/* ------------------------------------------------------------- SURFACES ---- */
.card{position:relative;background:var(--card-grad);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  transition:transform .15s var(--ease),border-color .15s var(--ease),filter .15s var(--ease);}
.card-lift:hover,a.card:hover,button.card:hover{transform:translateY(-3px);border-color:var(--line2);filter:drop-shadow(0 18px 26px rgba(0,0,0,.5));}
.card-hero{border-radius:22px;border-color:var(--line2);box-shadow:var(--shadow);}
.card-sheen::before{content:'';position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,transparent,var(--gold-line),transparent);}
.panel-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line);
  font-family:var(--disp);font-weight:700;font-size:16px;color:var(--thi);}
.hr-soft{height:1px;background:var(--line);border:0;margin:0;}

/* ------------------------------------------------------------- PILLS/TAGS -- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:9px;font-size:11.5px;font-weight:600;border:1px solid transparent;white-space:nowrap;}
.pill i,.pill svg{width:12px;height:12px;}
.pill-gold{background:var(--gold-soft);border-color:var(--gold-line);color:var(--gold-hi);}
.pill-danger{background:rgba(168,70,60,.10);border-color:rgba(168,70,60,.32);color:var(--danger-hi);}
.pill-money{background:rgba(95,192,138,.10);border-color:rgba(95,192,138,.3);color:var(--money);}
.pill-info{background:rgba(116,182,207,.10);border-color:rgba(116,182,207,.3);color:var(--info);}
.pill-patina{background:rgba(116,170,166,.10);border-color:rgba(116,170,166,.3);color:var(--patina);}
.pill-muted{background:rgba(0,0,0,.25);border-color:var(--line);color:var(--tdim);}
.tag{display:inline-flex;align-items:center;padding:1px 6px;border-radius:6px;font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.05em;}
.badge-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:8px;font-family:var(--mono);font-weight:700;font-size:9.5px;background:var(--gold);color:var(--on-gold);}
/* dossier STAMP */
.stamp{display:inline-flex;align-items:center;padding:4px 10px;border-radius:8px;font-family:var(--disp);font-weight:800;font-size:11px;letter-spacing:.08em;transform:rotate(-5deg);}
.stamp-danger{background:linear-gradient(180deg,#e8675b,#b3433a);color:#fff;box-shadow:0 10px 20px -8px rgba(168,70,60,.7);}
.stamp-money{background:rgba(95,192,138,.14);border:1px solid rgba(95,192,138,.4);color:var(--money);}
.stamp-gold{background:var(--gold-soft);border:1px solid var(--gold-line);color:var(--gold-hi);}
.stamp-in{animation:badgeIn .5s both;}

/* WAX SEAL */
.wax-seal{position:relative;display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;
  background:radial-gradient(circle at 36% 30%, #c14b41, #7a2823 74%);color:#f6d0c9;font-family:var(--disp);font-weight:800;font-size:14px;
  box-shadow:0 8px 16px -5px rgba(0,0,0,.7),inset 0 2px 4px rgba(255,255,255,.2),inset 0 -3px 7px rgba(0,0,0,.45);transform:rotate(-9deg);}
.wax-seal::before{content:'';position:absolute;inset:4px;border-radius:50%;border:1px dashed rgba(255,222,214,.4);}

/* ------------------------------------------------------------- TOOLTIPS ---- */
.tip-wrap{position:relative;display:inline-flex;}
/* 'block' varyantı GERÇEKTEN block olsun: Tailwind .block'u .tip-wrap{inline-flex}
   yükleme sırasıyla eziyordu → sarmalayıcı daralıp .tip dar kutuya göre ortalanıyor,
   tooltip komşuya/kenara taşıyordu. Tam-genişlik anchor → doğru ortalama (her sayfada). */
.tip-wrap.block{display:block;}
.tip{position:absolute;max-width:min(248px,calc(100vw - 22px));bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);opacity:0;pointer-events:none;
  transition:opacity .16s ease,transform .16s ease;z-index:85;width:max-content;max-width:min(248px,calc(100vw - 16px));
  background:#0c0a07;border:1px solid var(--line2);border-radius:11px;padding:10px 12px;box-shadow:0 18px 36px -18px rgba(0,0,0,.9);
  white-space:normal;text-align:left;}
.tip .tip-t{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--gold-hi);margin-bottom:5px;}
.tip .tip-b{display:block;font-size:11.5px;line-height:1.45;color:var(--tx);}
.tip-down{bottom:auto;top:calc(100% + 10px);transform:translateX(-50%) translateY(-6px);}
.tip-r{left:auto;right:0;transform:translateX(0) translateY(6px);}
.tip-l{left:0;transform:translateX(0) translateY(6px);}
.tip-wrap:hover .tip{opacity:1;transform:translateX(-50%) translateY(0);}
.tip-wrap:hover .tip-down{transform:translateX(-50%) translateY(0);}
.tip-wrap:hover .tip-r,.tip-wrap:hover .tip-l{transform:translateX(0) translateY(0);}
.tip-wrap.tip-enhanced>.tip{display:none!important;}
.tip-portal{position:fixed!important;right:auto!important;bottom:auto!important;z-index:2147483000!important;display:block!important;
  opacity:0!important;visibility:hidden;transform:none!important;margin:0!important;pointer-events:none!important;
  max-width:min(280px,calc(100vw - 16px));box-shadow:0 20px 48px -16px rgba(0,0,0,.96),0 0 0 1px rgba(227,183,95,.08);}
.tip-portal.is-visible{opacity:1!important;visibility:visible;}

/* ------------------------------------------------------------- STAT TILE --- */
.stat-tile{position:relative;background:var(--module-grad);border:1px solid var(--line);border-radius:14px;padding:16px 17px;overflow:hidden;min-width:0;
  transition:transform .15s var(--ease),border-color .15s var(--ease);}
.stat-tile:hover{transform:translateY(-3px);border-color:var(--line2);}
.tile-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--tdim);}
.tile-value{font-family:var(--disp);font-weight:800;font-size:22px;color:var(--thi);margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tile-trend{font-family:var(--mono);font-size:9.5px;margin-top:5px;display:inline-flex;align-items:center;gap:4px;}
.trend-up{color:var(--money);} .trend-down{color:var(--danger);} .trend-flat{color:var(--tdim);}

/* ------------------------------------------------------------- BARS -------- */
.stat-bar{position:relative;height:8px;border-radius:6px;background:rgba(0,0,0,.45);overflow:hidden;}
.stat-bar>div{height:100%;border-radius:6px;transition:width .35s var(--ease);}
.bar-hp>div{background:linear-gradient(90deg,#b8534a,var(--danger-hi));}
.bar-energy>div,.bar-xp>div{background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi));}
.bar-money>div{background:linear-gradient(90deg,var(--money-deep),var(--money));}
.bar-neutral>div{background:linear-gradient(90deg,var(--accent-deep),var(--info));}
.bar-sm{height:5px;}

/* ------------------------------------------------------------- RADAR DIAL -- */
.radar{position:relative;width:86px;height:86px;border-radius:50%;border:1px solid var(--line2);overflow:hidden;
  background:radial-gradient(circle,rgba(168,70,60,.13),rgba(0,0,0,.35));}
.radar .sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 290deg,rgba(227,119,108,.5) 350deg,transparent 360deg);animation:spin 3.6s linear infinite;}
.radar .ring{position:absolute;border-radius:50%;border:1px solid rgba(227,119,108,.22);}
.radar .ring-1{inset:6px;border-style:dashed;} .radar .ring-2{inset:22px;}
.radar .x{position:absolute;background:rgba(227,119,108,.14);}
.radar .x-v{left:50%;top:8px;bottom:8px;width:1px;transform:translateX(-.5px);}
.radar .x-h{top:50%;left:8px;right:8px;height:1px;transform:translateY(-.5px);}
.radar .val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;}
.radar .val b{font-family:var(--disp);font-weight:800;font-size:23px;color:var(--danger-hi);}
.radar .val small{font-family:var(--mono);font-size:7.5px;letter-spacing:.18em;color:var(--danger);margin-top:3px;}

/* ------------------------------------------------------------- SPARKLINE --- */
.spark{display:flex;align-items:flex-end;gap:5px;height:42px;}
.spark .bar{flex:1;display:flex;align-items:flex-end;height:100%;}
.spark .bar>span{width:100%;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,var(--gold-deep),rgba(0,0,0,.1));transform-origin:bottom;animation:growBar .5s ease both;}
.spark .bar:hover>span{filter:brightness(1.3);}

/* ------------------------------------------------------------- LIST ROWS --- */
.row-item{display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:11px;transition:background .15s var(--ease);}
.row-item:hover{background:rgba(0,0,0,.22);}
.row-divider{border-top:1px solid var(--line);}
.icon-disc{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:10px;flex-shrink:0;
  --disc:var(--gold);background:linear-gradient(150deg,color-mix(in srgb,var(--disc) 20%,#191510),#14100b);color:var(--disc);border:1px solid color-mix(in srgb,var(--disc) 42%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--disc) 24%,transparent),0 3px 8px -4px rgba(0,0,0,.7);}
.icon-disc.lg{width:44px;height:44px;border-radius:13px;}
.disc-money{--disc:var(--money);} .disc-danger{--disc:var(--danger);} .disc-info{--disc:var(--info);}
.disc-gold{--disc:var(--gold);} .disc-patina{--disc:var(--patina);} .disc-muted{--disc:var(--tdim);}

/* ------------------------------------------------------------- TABLES ------ */
.table-dark{width:100%;border-collapse:collapse;font-size:13px;}
.table-dark th{text-align:left;padding:10px 12px;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--tdim);font-weight:600;border-bottom:1px solid var(--line);}
.table-dark td{padding:12px;border-bottom:1px solid var(--line);height:44px;}
.table-dark tbody tr{transition:background .1s var(--ease);}
.table-dark tbody tr:hover{background:rgba(0,0,0,.2);}
.table-dark .num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;}
.rank-1{box-shadow:inset 3px 0 0 var(--gold);} .rank-2{box-shadow:inset 3px 0 0 rgba(227,183,95,.55);} .rank-3{box-shadow:inset 3px 0 0 rgba(227,183,95,.3);}
.row-you{background:var(--gold-soft);}

/* ------------------------------------------------------- TIERS / GAME TILE - */
:root{--tier1:#c8c6c0;--tier2:#cd7f4a;--tier3:#74b6cf;--tier4:#e3b75f;--tier5:#e3776c;--tier6:#f4d79a;}
.emblem{--tier:var(--gold);position:relative;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:13px;
  background:linear-gradient(150deg,color-mix(in srgb,var(--tier) 26%,#1a1610),#15110c 80%);border:1px solid color-mix(in srgb,var(--tier) 65%,transparent);color:var(--tier);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--tier) 30%,transparent),0 4px 12px -5px rgba(0,0,0,.7);}
.emblem-sm{width:40px;height:40px;border-radius:11px;} .emblem-md{width:52px;height:52px;} .emblem-lg{width:72px;height:72px;border-radius:16px;}
.tier-1{--tier:var(--tier1);} .tier-2{--tier:var(--tier2);} .tier-3{--tier:var(--tier3);}
.tier-4{--tier:var(--tier4);} .tier-5{--tier:var(--tier5);} .tier-6{--tier:var(--tier6);}
.game-tile{position:relative;background:var(--module-grad);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  transition:transform .15s var(--ease),border-color .15s var(--ease),filter .15s var(--ease);}
.game-tile:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--tile-tier,var(--gold)) 55%,var(--line));filter:drop-shadow(0 18px 26px color-mix(in srgb,var(--tile-tier,var(--gold)) 26%,transparent));}
.game-tile.tier-1{--tile-tier:var(--tier1);} .game-tile.tier-2{--tile-tier:var(--tier2);} .game-tile.tier-3{--tile-tier:var(--tier3);}
.game-tile.tier-4{--tile-tier:var(--tier4);} .game-tile.tier-5{--tile-tier:var(--tier5);} .game-tile.tier-6{--tile-tier:var(--tier6);}
.stat-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:8px;background:rgba(0,0,0,.3);border:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--tx);}
.stat-chip i,.stat-chip svg{width:13px;height:13px;}
.slot{position:relative;display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:rgba(0,0,0,.28);border:1px dashed var(--line);}
.slot.filled{border-style:solid;background:var(--module-grad);}

/* ------------------------------------------------------------- FORMS ------- */
.input,input.input,select.input,textarea.input{height:44px;width:100%;padding:0 12px;border-radius:12px;background:rgba(0,0,0,.3);
  border:1px solid var(--line2);color:var(--tx2);font-size:14px;font-family:var(--body);outline:none;transition:border-color .13s,box-shadow .13s,background .13s;}
textarea.input{height:auto;padding:10px 12px;border-radius:14px;}
.input:focus{border-color:var(--gold-line);background:rgba(0,0,0,.4);box-shadow:0 0 0 3px var(--gold-soft);}
.input::placeholder{color:var(--tmute);}
.field-label{font-size:12.5px;color:var(--tdim);margin-bottom:6px;display:block;}
.field-error{color:var(--danger);font-size:12.5px;margin-top:4px;}
.field-error-input{border-color:rgba(168,70,60,.6)!important;}
.input-group{display:flex;align-items:center;gap:9px;padding:5px 5px 5px 14px;border-radius:13px;background:rgba(0,0,0,.3);border:1px solid var(--line2);}
.input-group input{flex:1;background:transparent;border:none;outline:none;color:var(--tx2);font-family:var(--body);font-size:13.5px;}
/* segmented control */
.seg{display:inline-flex;max-width:100%;padding:3px;border-radius:11px;background:rgba(0,0,0,.3);border:1px solid var(--line);gap:2px;}
.seg button{border:none;background:transparent;color:var(--tdim);font-family:var(--body);font-weight:600;font-size:12.5px;padding:6px 13px;border-radius:8px;cursor:pointer;transition:all .15s var(--ease);}
.seg button.active{background:var(--gold-soft);color:var(--gold-hi);}
/* tabs */
.tabs{display:flex;gap:20px;border-bottom:1px solid var(--line);}
.tabs a{padding:11px 0;font-weight:600;font-size:13.5px;color:var(--tdim);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s;}
.tabs a.active{color:var(--gold-hi);border-bottom-color:var(--gold);}
/* switch */
.switch{position:relative;width:42px;height:24px;border-radius:999px;background:var(--raised);cursor:pointer;transition:background .2s;}
.switch.on{background:var(--gold);}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s var(--ease);}
.switch.on::after{transform:translateX(18px);}

/* ------------------------------------------------------------- NAV RAIL ---- */
.sidebar{position:sticky;top:68px;height:calc(100vh - 68px);width:264px;flex-shrink:0;display:flex;flex-direction:column;border-right:1px solid var(--line);background:rgba(15,12,8,.45);}
.nav-scroll{flex:1;overflow-y:auto;padding:18px 14px 10px;}
.nav-group{margin-bottom:16px;}
.nav-label{display:flex;align-items:center;gap:9px;padding:0 11px 7px;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--tmute);}
.nav-label::before{content:'';width:6px;height:6px;border-radius:2px;background:var(--gold);transform:rotate(45deg);flex-shrink:0;opacity:.85;}
.nav-label::after{content:'';flex:1;height:1px;background:var(--line);}
.nav-item{position:relative;display:flex;align-items:center;gap:11px;height:38px;margin:1px 0;padding:0 12px 0 13px;border-radius:10px;color:var(--tx);font-size:13.5px;font-weight:500;text-decoration:none;transition:background .15s var(--ease),color .15s var(--ease);}
.nav-item .nav-icon{width:17px;height:17px;flex-shrink:0;color:var(--tdim);}
.nav-item>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;}
.nav-item:hover{background:var(--panel2);color:var(--gold-hi);}
.nav-active{background:var(--gold-soft);color:var(--gold-hi);font-weight:600;}
.nav-active .nav-icon{color:var(--gold);}
.nav-active::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--gold);box-shadow:0 0 10px var(--gold-line);}
.nav-locked{opacity:.4;pointer-events:none;}

/* ------------------------------------------------------------- TOPBAR ------ */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:18px;height:68px;padding:0 24px;background:rgba(18,14,9,.85);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border-bottom:1px solid var(--line);}
.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:13px;background:linear-gradient(150deg,var(--gold-hi),var(--gold-deep));color:var(--on-gold);font-family:var(--disp);font-weight:800;font-size:22px;box-shadow:0 9px 22px -9px var(--gold-line),inset 0 1px 0 rgba(255,255,255,.4);}
.ledger-chip{display:flex;align-items:center;gap:8px;padding:7px 13px;border-radius:12px;background:var(--card-grad);border:1px solid var(--line);white-space:nowrap;flex-shrink:0;}
.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:rgba(0,0,0,.2);color:var(--tdim);cursor:pointer;transition:all .15s var(--ease);}
.icon-btn:hover{color:var(--gold-hi);border-color:var(--line2);}
.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:linear-gradient(150deg,#3a3020,#221b12);border:1px solid var(--gold-line);color:var(--thi);font-family:var(--disp);font-weight:700;}
.avatar-sm{width:40px;height:40px;font-size:15px;} .avatar-md{width:52px;height:52px;border-radius:14px;font-size:18px;}
.avatar-portrait{position:relative;border-radius:16px;border:1px solid var(--gold-line);background:#0c0a06;overflow:hidden;}
.avatar-portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(.55) sepia(.38) contrast(1.05) brightness(.94);}
.avatar-portrait::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(227,183,95,.14),transparent 42%,rgba(168,70,60,.16));mix-blend-mode:overlay;}
/* tek noktadan operatör avatarı (partials/_avatar.html) — foto veya zengin monogram */
.ya-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;border:1px solid var(--gold-line);background:linear-gradient(150deg,#3a3020,#221b12);color:var(--thi);font-family:var(--disp);font-weight:800;line-height:1;letter-spacing:.01em;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 6px 16px -10px #000;}
.ya-avatar img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.5) sepia(.36) contrast(1.05) brightness(.95);}
.ya-avatar .ya-avatar-mono{position:relative;z-index:2;text-shadow:0 1px 2px rgba(0,0,0,.55);}
/* iç halka + üst parıltı: monogramı düz kutudan ayıran derinlik */
.ya-avatar:not(:has(img))::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.14);background:radial-gradient(120% 90% at 50% -10%,rgba(255,255,255,.16),transparent 58%);}
.ya-avatar:has(img)::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,rgba(227,183,95,.12),transparent 44%,rgba(168,70,60,.16));mix-blend-mode:overlay;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);}
.dot-live{width:7px;height:7px;border-radius:50%;background:var(--money);box-shadow:0 0 8px var(--money);}
.dot-live.blink{animation:pulseDot 1.8s infinite;}

/* ------------------------------------------------------- BUSY STRIP / OPS -- */
.busy-strip{display:flex;align-items:center;gap:20px;height:46px;padding:0 24px;border-bottom:1px solid var(--line);background:rgba(11,8,5,.55);overflow-x:auto;}
.busy-chip{display:flex;align-items:center;gap:9px;flex-shrink:0;}
.busy-chip .cd{font-family:var(--mono);font-size:12px;min-width:42px;}
.busy-travel .icon-disc,.busy-travel .cd{--disc:var(--info);color:var(--info);}
.busy-hospital .icon-disc,.busy-hospital .cd{--disc:var(--danger);color:var(--danger);}
.busy-jail .icon-disc,.busy-jail .cd{--disc:var(--gold);color:var(--gold);}

/* ------------------------------------------------------------- PAGE HEADER - */
.page-header{margin-bottom:22px;}
.page-header .ph-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.page-header h1{font-family:var(--disp);font-weight:800;font-size:26px;color:var(--thi);line-height:1.1;margin:0;}
.page-header .page-sub{font-size:13px;color:var(--tdim);margin-top:5px;max-width:60ch;}

/* ------------------------------------------------------------- ALERT/TELEX - */
.system-strip,.telex{position:relative;display:flex;align-items:center;gap:14px;padding:13px 17px;border-radius:14px;overflow:hidden;
  background:linear-gradient(90deg,rgba(168,70,60,.18),rgba(168,70,60,.03));border:1px solid rgba(168,70,60,.3);
  font-size:13.5px;color:var(--tx2);}
.telex .telex-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:11px;background:rgba(168,70,60,.16);flex-shrink:0;color:var(--danger-hi);}
.telex .telex-icon .ping{position:absolute;inset:5px;border-radius:50%;background:var(--ox);opacity:.45;animation:ping 2.2s ease-out infinite;}
.telex-caret{display:inline-block;width:7px;height:13px;border-radius:1px;background:var(--danger-hi);vertical-align:-2px;margin-left:3px;animation:caret 1s step-end infinite;}

/* ------------------------------------------------------------- MODAL ------- */
#modal-root,.modal-root{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:20px;}
#modal-root.open,.modal-root.open{display:flex;}
.modal-backdrop{position:absolute;inset:0;background:rgba(6,4,2,.66);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);}
.modal-panel{position:relative;width:560px;max-width:94vw;max-height:88vh;display:flex;flex-direction:column;border-radius:20px;
  background:linear-gradient(180deg,#231c15,#15110c);border:1px solid var(--line2);box-shadow:var(--shadow);overflow:hidden;animation:modalIn .26s var(--ease) both;}
.modal-panel::before{content:'';position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,transparent,var(--gold-line),transparent);}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line);}
.modal-title{font-family:var(--disp);font-weight:700;font-size:18px;color:var(--thi);}
.modal-title-danger{color:var(--danger-hi);}
.modal-body{padding:16px 20px;overflow-y:auto;}
.modal-foot{padding:14px 18px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px;}
.modal-close{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;border:none;background:rgba(0,0,0,.3);color:var(--tdim);cursor:pointer;transition:all .15s var(--ease);}
.modal-close:hover{color:var(--thi);background:var(--panel2);}
body.modal-open{overflow:hidden;}

/* ------------------------------------------------------- SLIDE-OVER / CHAT - */
.slideover{position:fixed;top:0;right:0;bottom:0;width:382px;max-width:90vw;z-index:60;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#221b14,#120e08);border-left:1px solid var(--line2);box-shadow:-34px 0 64px -34px rgba(0,0,0,.85);
  transform:translateX(108%);transition:transform .32s var(--ease);}
.slideover.open{transform:translateX(0);}
.slideover-backdrop{position:fixed;inset:0;z-index:55;background:rgba(6,4,2,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s ease;}
.slideover-backdrop.open{opacity:1;pointer-events:auto;}

/* ------------------------------------------------------- NOTIF DROPDOWN ---- */
.dropdown{position:absolute;top:50px;right:0;width:332px;z-index:70;border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,#241d15,#15110c);border:1px solid var(--line2);box-shadow:0 28px 54px -28px rgba(0,0,0,.9);
  transform-origin:top right;transition:opacity .18s ease,transform .18s ease;opacity:0;transform:scale(.96) translateY(-6px);pointer-events:none;}
.dropdown.open{opacity:1;transform:scale(1) translateY(0);pointer-events:auto;}
.dropdown-catcher{position:fixed;inset:0;z-index:64;display:none;}
.dropdown-catcher.open{display:block;}

/* ------------------------------------------------------------- TOAST -------- */
#toast-container{position:fixed;top:16px;right:16px;z-index:100;display:flex;flex-direction:column;gap:10px;width:330px;max-width:90vw;}
.toast{position:relative;overflow:hidden;display:flex;align-items:flex-start;gap:11px;padding:13px 15px;border-radius:14px;background:var(--card-grad);border:1px solid var(--line2);box-shadow:var(--shadow);animation:toastIn .24s var(--ease);}
.toast::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:var(--toast-accent,var(--gold));}
.toast-money{--toast-accent:var(--money);} .toast-danger{--toast-accent:var(--danger);} .toast-info{--toast-accent:var(--info);}
.toast-progress{position:absolute;top:0;left:0;height:2px;width:100%;background:var(--toast-accent,var(--gold));transform-origin:left;animation:toastProgress linear forwards;}
.toast.out{opacity:0;transform:translateX(16px);}

/* ------------------------------------------------------------- EMPTY STATE - */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:44px 20px;}
.empty-state .emblem{margin-bottom:6px;}
.empty-title{font-family:var(--disp);font-weight:700;font-size:15px;color:var(--text);}
.empty-sub{font-size:12.5px;color:var(--tmute);max-width:40ch;}

/* ------------------------------------------------------------- SKELETON ---- */
.skel{position:relative;overflow:hidden;background:rgba(255,255,255,.04);border-radius:10px;}
.skel::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:shimmer 1.3s infinite;}

/* ------------------------------------------------------------- LAYOUT HELP - */
/* Full-bleed: sidebar + main fill the whole viewport, no centered empty edges.
   (Cap raised very high so only truly ultrawide >2200px gets side breathing room.) */
.app-body{display:flex;align-items:flex-start;max-width:2200px;margin:0 auto;width:100%;}
.app-main{flex:1;min-width:0;overflow-x:clip;padding:26px 44px 64px;}
/* ===== Bölüm atmosfer başlığı — AI noir art (DOSYA paleti), bölüme göre arka plan ===== */
/* ===== Bölüm atmosferi — TAM-SAYFA arka plan (login gibi) + okunabilirlik perdesi ===== */
.app-atmo{position:fixed;inset:0;z-index:-1;background-size:cover;background-position:center;background-repeat:no-repeat;pointer-events:none;}
.app-atmo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,17,13,.58),rgba(21,17,13,.72) 50%,rgba(21,17,13,.88));}
body.sec-merkez    .app-atmo{background-image:url('/static/img/atmo-merkez.webp');}
body.sec-sosyal    .app-atmo{background-image:url('/static/img/atmo-sosyal.webp');}
body.sec-karakter  .app-atmo{background-image:url('/static/img/atmo-karakter.webp');}
body.sec-harita    .app-atmo{background-image:url('/static/img/atmo-harita.webp');}
body.sec-hikaye    .app-atmo{background-image:url('/static/img/atmo-hikaye.webp');}
body.sec-garaj     .app-atmo{background-image:url('/static/img/atmo-garaj.webp');}
body.sec-lojistik  .app-atmo{background-image:url('/static/img/atmo-lojistik.webp');}
body.sec-aile      .app-atmo{background-image:url('/static/img/atmo-aile.webp');}
body.sec-suc       .app-atmo{background-image:url('/static/img/atmo-suc.webp');}
body.sec-kumarhane .app-atmo{background-image:url('/static/img/atmo-kumarhane.webp');}
body.sec-ticaret   .app-atmo{background-image:url('/static/img/atmo-ticaret.webp');}
body.sec-mulk      .app-atmo{background-image:url('/static/img/atmo-mulk.webp');}
/* başlık: tam-sayfa atmosfer üstünde okunaklı buzlu şerit */
.sec-atmo .page-header{padding:15px 18px;border-radius:14px;border:1px solid var(--line2);background:linear-gradient(100deg,rgba(21,17,13,.62),rgba(28,23,18,.34));backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);}
@media (max-width:767.98px){ .sec-atmo .page-header{ padding:12px 14px; } }
/* ===== İkon overhaul — game-icons (Iconify) tematik ikonlar ===== */
iconify-icon{display:inline-flex;align-items:center;justify-content:center;line-height:0;vertical-align:-0.15em;}
.nav-icon{width:18px;height:18px;font-size:18px;}
/* ===== Suç 'dosya' görselleri — kart bandı + sonuç modalı hero ===== */
.crime-photo{position:relative;height:118px;background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:flex-end;padding:9px 12px;}
.crime-photo.is-cooldown{filter:grayscale(.7) brightness(.55);}
.crime-photo.is-locked{filter:grayscale(.5) brightness(.6);}
.crime-photo-badge{position:absolute;top:8px;right:9px;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--gold-hi);background:rgba(21,17,13,.72);border:1px solid var(--line2);border-radius:7px;padding:2px 7px;}
.crime-photo-name{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.02em;color:var(--thi);font-size:15px;line-height:1.08;text-shadow:0 2px 10px rgba(0,0,0,.95);}
/* suç sonucu modal hero — modal-body dolgusunu (16/20) sıfırlayıp TAM-GENİŞLİK kapak */
.crime-result-photo{height:172px;background-size:cover;background-position:center;margin:-16px -20px 14px;
  border-bottom:1px solid var(--gold-line);box-shadow:inset 0 -44px 52px -30px rgba(24,19,14,.96),inset 0 1px 0 rgba(255,255,255,.05);}
.crime-result-photo.is-fail{filter:grayscale(.66) brightness(.58);}
.app-main .inner{max-width:none;margin:0;width:100%;}
.hero-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:32px;align-items:center;}
.hero-console{border-left:1px solid var(--line);padding-left:30px;}
.ed-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;align-items:start;}
.stack{display:flex;flex-direction:column;}
.gap-20{gap:20px;} .gap-18{gap:18px;} .gap-14{gap:14px;} .gap-11{gap:11px;}

/* ------------------------------------------------------------- ANIMATIONS -- */
@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@keyframes lampOn{from{opacity:0;}to{opacity:1;}}
@keyframes badgeIn{0%{opacity:0;transform:scale(1.4) rotate(var(--rot,-7deg));}100%{opacity:1;transform:scale(1) rotate(var(--rot,-7deg));}}
@keyframes glint{0%{background-position:-180% 0;}100%{background-position:280% 0;}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes caret{0%,100%{opacity:1;}50%{opacity:0;}}
@keyframes ping{0%{transform:scale(.6);opacity:.7;}80%,100%{transform:scale(2.4);opacity:0;}}
@keyframes pulseDot{0%,100%{opacity:1;}50%{opacity:.28;}}
@keyframes modalIn{from{opacity:0;transform:scale(.95) translateY(10px);}to{opacity:1;transform:none;}}
@keyframes growBar{from{transform:scaleY(.15);}to{transform:scaleY(1);}}
@keyframes toastIn{from{opacity:0;transform:translateX(24px);}}
@keyframes toastProgress{from{transform:scaleX(1);}to{transform:scaleX(0);}}
@keyframes shimmer{to{transform:translateX(100%);}}
.anim-rise{animation:rise .55s both;} .d-1{animation-delay:.1s;} .d-2{animation-delay:.2s;} .d-25{animation-delay:.25s;}

/* ------------------------------------------------------------- A11Y -------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:opacity .12s!important;}}

/* ------------------------------------------------------------- RESPONSIVE -- */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-console{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:20px;margin-top:4px;}
  .ed-grid{grid-template-columns:1fr;}
}
@media (max-width:767.98px){
  .sidebar{display:none;}
  .app-main{padding:18px 16px 90px;}
  .modal-panel,.slideover{width:100%;max-width:100%;}
  .topbar{padding:0 14px;gap:12px;}
  .input,.input-group input{height:44px;}
  /* wide data tables scroll horizontally inside their card instead of
     widening the whole page (leaderboards, rosters, history). */
  .table-dark{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .table-dark th,.table-dark td{white-space:nowrap;}
  /* keep editorial/hero grids single-column on phones */
  .ed-grid,.hero-grid{grid-template-columns:1fr;}
}

/* --- HER ÇÖZÜNÜRLÜK güvenlik ağı: yatay taşmayı kökten engelle -------------- */
/* görsel/video asla kabını aşmaz (NPC portresi, avatar, eşya görseli, harita logosu) */
img,video{max-width:100%;height:auto;}
/* uzun, bölünemeyen jeton (Karanlık_Ahmet, uzun URL) satırı kırsın → taşma yok */
.app-main,.inner{overflow-wrap:break-word;}
/* iframe/embed kabına uysun */
iframe{max-width:100%;}
@media (max-width:400px){          /* çok küçük telefonlar (≤400px) — biraz daha nefes */
  .app-main{padding:14px 11px 88px;}
  .page-header h1{font-size:21px;line-height:1.12;}
  .stat-tile{padding:13px 13px;}
  .modal-panel{border-radius:16px;}
}