:root{
  --bg:#0b0d10;
  --panel:#111419;
  --panel-2:#171b22;
  --panel-3:#1d222b;
  --text:#f3f5f7;
  --muted:#9aa4b2;
  --line:#262c36;
  --accent:#7c5cff;
  --accent-2:#9a7cff;
  --good:#32d583;
  --bad:#f97066;
  --warn:#fdb022;
  --info:#53b1fd;
  --shadow:0 14px 45px rgba(0,0,0,.28);
  --shadow-soft:0 8px 24px rgba(0,0,0,.18);
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at 10% 0%,rgba(124,92,255,.10),transparent 28%),
    radial-gradient(circle at 100% 20%,rgba(83,177,253,.06),transparent 24%),
    var(--bg);
  color:var(--text);
  min-height:100vh;
}
a{text-decoration:none;color:inherit}
.layout{min-height:100vh;display:grid;grid-template-columns:240px 1fr}
.sidebar{
  background:rgba(12,15,19,.94);
  backdrop-filter:blur(14px);
  border-right:1px solid var(--line);
  padding:24px 16px;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  z-index:5;
}
.brand{
  font-weight:900;
  font-size:20px;
  letter-spacing:-.3px;
  padding:6px 10px 24px;
  display:flex;
  gap:10px;
  align-items:center;
}
.sidebar nav{display:grid;gap:7px}
.sidebar nav a,.logout{
  padding:11px 13px;
  border-radius:11px;
  color:#aeb7c4;
  transition:.22s ease;
  border:1px solid transparent;
}
.sidebar nav a:hover,.logout:hover{
  color:#fff;
  background:var(--panel-2);
  transform:translateX(3px);
  border-color:var(--line);
}
.sidebar nav a.active{
  background:linear-gradient(135deg,rgba(124,92,255,.20),rgba(124,92,255,.08));
  color:#fff;
  border-color:rgba(124,92,255,.34);
  box-shadow:inset 0 0 20px rgba(124,92,255,.05);
}
.logout{margin-top:auto}
.main{padding:30px;min-width:0}
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin-bottom:24px;
}
h1,h2,h3{color:#fff;letter-spacing:-.35px}
h1{margin:0 0 5px;font-size:28px}
h2{margin:0 0 14px;font-size:18px}
p{color:var(--muted);margin:0}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.grid-2{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;margin-top:16px}
.card{
  background:linear-gradient(180deg,rgba(23,27,34,.96),rgba(17,20,25,.96));
  border:1px solid var(--line);
  border-radius:16px;
  padding:19px;
  box-shadow:var(--shadow-soft);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
  animation:fadeUp .35s ease both;
}
.card:hover{
  border-color:#353d49;
  box-shadow:var(--shadow);
  transform:translateY(-1px);
}
.metric .label{font-size:13px;color:var(--muted);font-weight:650}
.metric .value{font-size:30px;font-weight:900;margin-top:7px;letter-spacing:-.7px}
.metric .sub{font-size:12px;color:var(--muted);margin-top:5px}
.btn{
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(135deg,var(--accent),#6747ef);
  color:#fff;
  padding:10px 14px;
  border-radius:10px;
  font-weight:800;
  cursor:pointer;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease,background .18s ease;
  box-shadow:0 8px 20px rgba(124,92,255,.18);
}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 10px 28px rgba(124,92,255,.25)}
.btn:active{transform:translateY(0) scale(.99)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn.secondary{
  background:var(--panel-3);
  color:#e6e9ee;
  border:1px solid #303744;
  box-shadow:none;
}
.btn.secondary:hover{background:#242a34}
.btn.danger{background:linear-gradient(135deg,#d92d20,#b42318);box-shadow:none}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.space{justify-content:space-between}
table{width:100%;border-collapse:collapse}
th,td{
  padding:13px 10px;
  border-bottom:1px solid var(--line);
  text-align:left;
  font-size:14px;
}
th{color:#98a2b3;font-weight:700}
tbody tr{transition:background .18s ease}
tbody tr:hover{background:rgba(255,255,255,.025)}
.badge{
  display:inline-flex;
  padding:5px 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  background:#202631;
  border:1px solid #313846;
  color:#cdd3dc;
}
.up{color:var(--good)}.down{color:var(--bad)}
input,select,textarea{
  width:100%;
  padding:11px 12px;
  border:1px solid #303744;
  border-radius:10px;
  background:#0f1217;
  color:#eef1f5;
  font:inherit;
  outline:none;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(124,92,255,.13);
  background:#12161c;
}
select option{background:#111419;color:#fff}
textarea{
  min-height:170px;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:12px;
}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.field label{display:block;font-size:13px;color:#b1bac7;font-weight:750;margin-bottom:7px}
.notice{
  padding:13px 15px;
  border-radius:11px;
  background:rgba(83,177,253,.10);
  color:#b9ddff;
  border:1px solid rgba(83,177,253,.22);
  margin-bottom:16px;
}
.notice.error,.error{background:rgba(249,112,102,.10);color:#fda29b;border-color:rgba(249,112,102,.24)}
.notice.ok,.ok{background:rgba(50,213,131,.10);color:#75e0ad;border-color:rgba(50,213,131,.23)}
.chart{width:100%;height:230px}
.spark{height:54px;width:150px}
.empty{padding:30px;text-align:center;color:var(--muted)}
.kpi{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.kpi strong{font-size:30px}
.suggestion{
  padding:13px;
  border:1px solid var(--line);
  border-radius:11px;
  margin-top:10px;
  background:rgba(255,255,255,.018);
  transition:.2s ease;
}
.suggestion:hover{background:rgba(124,92,255,.055);border-color:rgba(124,92,255,.25);transform:translateX(2px)}
.small{font-size:12px;color:var(--muted)}
code{background:#0c0f13;color:#d0d5dd;padding:3px 6px;border-radius:6px;border:1px solid var(--line)}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{
  width:min(460px,100%);
  background:linear-gradient(180deg,#171b22,#111419);
  padding:30px;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  animation:fadeUp .35s ease both;
}
.site-switcher select{min-width:220px;font-weight:800;background:#111419}
.site-pill{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(124,92,255,.12);
  color:#c8bbff;
  border:1px solid rgba(124,92,255,.24);
  font-size:12px;
  font-weight:800;
}
.loading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:120px;
  color:var(--muted);
}
.spinner{
  width:18px;height:18px;border:2px solid #303744;border-top-color:var(--accent);
  border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:950px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto}
  .sidebar nav{grid-template-columns:repeat(3,1fr)}
  .logout{margin-top:10px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
}
@media(max-width:620px){
  .main{padding:16px}
  .grid,.form-grid{grid-template-columns:1fr}
  .sidebar nav{grid-template-columns:1fr 1fr}
  .topbar{align-items:flex-start;flex-direction:column}
  .site-switcher,.site-switcher select{width:100%}
}


/* V2.4 - belirgin koyu tema ve modern hareketler */
html, body { background-color:#07090d !important; color:#f7f8fa !important; }

.main{
  background:
    radial-gradient(900px 500px at 15% -5%, rgba(124,92,255,.13), transparent 60%),
    radial-gradient(700px 420px at 95% 5%, rgba(47,128,237,.08), transparent 62%),
    #090b0f !important;
}

.topbar h1{color:#fff!important;text-shadow:0 2px 18px rgba(124,92,255,.12)}
.topbar p{color:#8993a4!important}

.card{
  background:
    linear-gradient(145deg,rgba(24,28,35,.98),rgba(15,18,23,.98)) !important;
  border:1px solid rgba(255,255,255,.075) !important;
  box-shadow:
    0 10px 30px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
  color:#f5f6f8!important;
  animation:panelEnter .48s cubic-bezier(.2,.8,.2,1) both;
}

.grid > .card:nth-child(1){animation-delay:.03s}
.grid > .card:nth-child(2){animation-delay:.07s}
.grid > .card:nth-child(3){animation-delay:.11s}
.grid > .card:nth-child(4){animation-delay:.15s}
.grid-2 > .card:nth-child(1){animation-delay:.10s}
.grid-2 > .card:nth-child(2){animation-delay:.16s}

.card:hover{
  transform:translateY(-4px) scale(1.002) !important;
  border-color:rgba(124,92,255,.30)!important;
  box-shadow:
    0 18px 46px rgba(0,0,0,.38),
    0 0 0 1px rgba(124,92,255,.07),
    0 0 34px rgba(124,92,255,.06)!important;
}

.metric{
  position:relative;
  overflow:hidden;
}
.metric::before{
  content:"";
  position:absolute;
  left:0;top:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,#7c5cff,#9f8cff,transparent);
  opacity:.60;
  transform:scaleX(.35);
  transition:transform .35s ease,opacity .35s ease;
}
.metric:hover::before{transform:scaleX(1);opacity:1}
.metric .value{
  color:#fff!important;
  text-shadow:0 4px 20px rgba(0,0,0,.35);
}
.metric .label,.metric .sub,.small,p{color:#929baa!important}

.sidebar{
  background:
    linear-gradient(180deg,#0d1118 0%,#090c11 100%) !important;
  box-shadow:18px 0 45px rgba(0,0,0,.14);
}
.brand{
  position:relative;
  color:#fff;
}
.brand::after{
  content:"";
  position:absolute;
  left:10px;right:10px;bottom:14px;height:1px;
  background:linear-gradient(90deg,rgba(124,92,255,.65),transparent);
}
.sidebar nav a{
  position:relative;
  overflow:hidden;
}
.sidebar nav a::before{
  content:"";
  position:absolute;
  left:0;top:50%;
  width:3px;height:0;
  transform:translateY(-50%);
  border-radius:999px;
  background:#8b72ff;
  transition:height .22s ease;
}
.sidebar nav a:hover::before,.sidebar nav a.active::before{height:56%}
.sidebar nav a.active{
  background:linear-gradient(90deg,rgba(124,92,255,.18),rgba(124,92,255,.045))!important;
  box-shadow:inset 0 0 22px rgba(124,92,255,.035);
}

table{color:#e9ecf1}
th{color:#8d97a7!important;background:rgba(255,255,255,.012)}
td{border-bottom-color:rgba(255,255,255,.065)!important}
tbody tr:hover{background:rgba(124,92,255,.045)!important}

input,select,textarea{
  background:#0b0e13!important;
  color:#f4f6f8!important;
  border-color:#29303a!important;
}
input::placeholder,textarea::placeholder{color:#626d7c}
select:focus,input:focus,textarea:focus{
  background:#0d1117!important;
  border-color:#7c5cff!important;
  box-shadow:0 0 0 3px rgba(124,92,255,.14),0 0 24px rgba(124,92,255,.06)!important;
}

.btn{
  position:relative;
  overflow:hidden;
}
.btn::after{
  content:"";
  position:absolute;
  top:-60%;left:-35%;
  width:30%;height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transform:rotate(20deg);
  transition:left .45s ease;
}
.btn:hover::after{left:115%}

.suggestion{
  background:linear-gradient(135deg,rgba(255,255,255,.025),rgba(255,255,255,.012))!important;
}
.suggestion strong{color:#fff}
.suggestion:hover{
  transform:translateX(5px)!important;
  border-color:rgba(124,92,255,.32)!important;
  background:linear-gradient(135deg,rgba(124,92,255,.10),rgba(124,92,255,.025))!important;
}

.site-switcher select{
  background:#10141b!important;
  border-color:#303743!important;
  box-shadow:0 8px 22px rgba(0,0,0,.20);
}

@keyframes panelEnter{
  from{opacity:0;transform:translateY(16px) scale(.988);filter:blur(2px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}

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


/* V2.6 - sıralama trendleri */
.trend-up{
  display:inline-flex;align-items:center;gap:4px;
  color:#32d583;font-weight:900;
  text-shadow:0 0 18px rgba(50,213,131,.18);
}
.trend-down{
  display:inline-flex;align-items:center;gap:4px;
  color:#f97066;font-weight:900;
  text-shadow:0 0 18px rgba(249,112,102,.16);
}
.trend-flat{color:#7f8998;font-weight:800}
.muted-rank{color:#687383}
.trend-value{font-size:18px!important;white-space:nowrap}
.mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
.mini-metric{
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  padding:14px;
}
.mini-metric .value{font-size:22px}
@media(max-width:620px){.mini-grid{grid-template-columns:1fr!important}}