/* ============================================================================
   Affiliate Panel — app.css
   Tema: "Ink & Gold" — derin lacivert zemin, altın vurgu, finans için yeşil/gül.
   ========================================================================== */

:root{
  /* yüzeyler */
  --bg:        #0e1320;
  --surface:   #151b2c;
  --surface-2: #1b2237;
  --elev:      #212a44;
  --line:      #2a3450;
  --line-soft: #222b42;

  /* metin */
  --tx:        #e9edf8;
  --tx-mut:    #95a0bd;
  --tx-dim:    #66708c;

  /* marka / aksan (altın) */
  --gold:      #f2b340;
  --gold-dim:  #c79224;
  --gold-soft: rgba(242,179,64,.12);

  /* durumlar */
  --up:    #34d399;   /* yatırım / pozitif */
  --up-bg: rgba(52,211,153,.12);
  --down:  #fb7185;   /* çekim / negatif */
  --down-bg: rgba(251,113,133,.12);
  --info:  #60a5fa;
  --info-bg: rgba(96,165,250,.12);
  --warn:  #fbbf24;
  --warn-bg: rgba(251,191,36,.12);

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px -12px rgba(0,0,0,.6);
  --sidebar-w: 256px;

  --ff-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --ff-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--ff-body);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(242,179,64,.06), transparent 60%),
    var(--bg);
  color:var(--tx);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--ff-display); font-weight:600; letter-spacing:-.01em; margin:0; }
.num{ font-variant-numeric:tabular-nums; }

/* ----------------------------- LAYOUT KABUĞU ---------------------------- */
.shell{ display:flex; min-height:100vh; }

.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:linear-gradient(180deg,var(--surface),#10162400 120%), var(--surface);
  border-right:1px solid var(--line-soft);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.brand{
  display:flex; align-items:center; gap:11px;
  padding:20px 20px 16px; border-bottom:1px solid var(--line-soft);
}
.brand-chip{
  width:30px; height:30px; border-radius:9px; flex:0 0 30px;
  background:
    radial-gradient(circle at 30% 30%, #ffe39a, var(--gold) 45%, var(--gold-dim) 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset, 0 4px 14px -4px var(--gold);
  position:relative;
}
.brand-chip::after{
  content:""; position:absolute; inset:6px; border-radius:50%;
  border:2px dashed rgba(20,20,30,.45);
}
.brand-name{ font-family:var(--ff-display); font-weight:700; font-size:15.5px; letter-spacing:-.02em; }

.nav{ padding:12px 10px; overflow-y:auto; flex:1; }
.nav-sep{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--tx-dim); padding:14px 12px 6px; font-weight:600;
}
.nav-item{
  display:flex; align-items:center; gap:11px;
  padding:9px 12px; border-radius:var(--radius-sm); color:var(--tx-mut);
  font-weight:500; font-size:13.5px; position:relative;
  transition:background .15s, color .15s;
}
.nav-item:hover{ background:var(--surface-2); color:var(--tx); }
.nav-item.active{ background:var(--gold-soft); color:var(--gold); }
.nav-item.active::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px;
  border-radius:0 3px 3px 0; background:var(--gold);
}

.sidebar-foot{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-top:1px solid var(--line-soft);
}
.who{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.who-avatar{
  width:34px; height:34px; border-radius:9px; flex:0 0 34px;
  display:grid; place-items:center; font-family:var(--ff-display); font-weight:700;
  background:var(--elev); color:var(--gold); border:1px solid var(--line);
}
.who-meta{ min-width:0; }
.who-name{ font-weight:600; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.who-role{ font-size:11px; color:var(--tx-dim); }
.logout{
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  color:var(--tx-mut); border:1px solid var(--line);
}
.logout:hover{ color:var(--down); border-color:var(--down); }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  display:flex; align-items:center; gap:14px;
  padding:0 26px; height:62px;
  border-bottom:1px solid var(--line-soft);
  background:rgba(14,19,32,.7); backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:20;
}
.page-title{ font-size:18px; font-weight:600; flex:1; }
.topbar-actions{ display:flex; align-items:center; gap:10px; }
.env-pill{
  font-size:12px; color:var(--tx-mut); padding:6px 11px;
  border:1px solid var(--line); border-radius:999px; background:var(--surface);
}
.content{ padding:26px; max-width:1320px; width:100%; }

/* burger / mobil */
.burger{ display:none; flex-direction:column; gap:4px; cursor:pointer; padding:6px; }
.burger span{ width:20px; height:2px; background:var(--tx); border-radius:2px; }
.nav-toggle-input{ display:none; }
.scrim{ display:none; }

/* ------------------------------- IKONLAR -------------------------------- */
.ic{
  width:18px; height:18px; flex:0 0 18px; display:inline-block;
  background:currentColor;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
}
.ic-dashboard{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='9'/><rect x='14' y='3' width='7' height='5'/><rect x='14' y='12' width='7' height='9'/><rect x='3' y='16' width='7' height='5'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='9'/><rect x='14' y='3' width='7' height='5'/><rect x='14' y='12' width='7' height='9'/><rect x='3' y='16' width='7' height='5'/></svg>"); }
.ic-users{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>"); }
.ic-plus{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><line x1='12' y1='8' x2='12' y2='16'/><line x1='8' y1='12' x2='16' y2='12'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><line x1='12' y1='8' x2='12' y2='16'/><line x1='8' y1='12' x2='16' y2='12'/></svg>"); }
.ic-wallet{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12V7H5a2 2 0 0 1 0-4h14v4'/><path d='M3 5v14a2 2 0 0 0 2 2h16v-5'/><path d='M18 12a2 2 0 0 0 0 4h4v-4Z'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12V7H5a2 2 0 0 1 0-4h14v4'/><path d='M3 5v14a2 2 0 0 0 2 2h16v-5'/><path d='M18 12a2 2 0 0 0 0 4h4v-4Z'/></svg>"); }
.ic-percent{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='19' y1='5' x2='5' y2='19'/><circle cx='6.5' cy='6.5' r='2.5'/><circle cx='17.5' cy='17.5' r='2.5'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='19' y1='5' x2='5' y2='19'/><circle cx='6.5' cy='6.5' r='2.5'/><circle cx='17.5' cy='17.5' r='2.5'/></svg>"); }
.ic-card{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2'/><line x1='2' y1='10' x2='22' y2='10'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2'/><line x1='2' y1='10' x2='22' y2='10'/></svg>"); }
.ic-click{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 9l5 12 1.8-5.2L21 14 9 9z'/><path d='M7.2 2.2L8 5'/><path d='M5 7.2L2.2 8'/><path d='M14 4.8L12 7'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 9l5 12 1.8-5.2L21 14 9 9z'/><path d='M7.2 2.2L8 5'/><path d='M5 7.2L2.2 8'/><path d='M14 4.8L12 7'/></svg>"); }
.ic-target{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='5'/><circle cx='12' cy='12' r='1.5'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='5'/><circle cx='12' cy='12' r='1.5'/></svg>"); }
.ic-user{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>"); }
.ic-chart{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='20' x2='20' y2='20'/><rect x='6' y='10' width='3' height='7'/><rect x='11' y='5' width='3' height='12'/><rect x='16' y='13' width='3' height='4'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='20' x2='20' y2='20'/><rect x='6' y='10' width='3' height='7'/><rect x='11' y='5' width='3' height='12'/><rect x='16' y='13' width='3' height='4'/></svg>"); }
.ic-gear{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/></svg>"); }
.ic-out{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><polyline points='16 17 21 12 16 7'/><line x1='21' y1='12' x2='9' y2='12'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><polyline points='16 17 21 12 16 7'/><line x1='21' y1='12' x2='9' y2='12'/></svg>"); }

/* ------------------------------- KARTLAR -------------------------------- */
.grid{ display:grid; gap:16px; }
.cols-4{ grid-template-columns:repeat(4,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-2{ grid-template-columns:repeat(2,1fr); }

.card{
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.card-pad{ padding:18px 20px; }
.card-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--line-soft);
}
.card-head h2{ font-size:14.5px; }
.card-head .sub{ font-size:12px; color:var(--tx-dim); }

.stat{
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.stat::after{
  content:""; position:absolute; right:-30px; top:-30px; width:90px; height:90px;
  border-radius:50%; background:var(--gold-soft); filter:blur(6px);
}
.stat-top{ display:flex; align-items:center; justify-content:space-between; }
.stat-ic{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:var(--elev); color:var(--gold); border:1px solid var(--line); z-index:1;
}
.stat-label{ color:var(--tx-mut); font-size:12.5px; margin-top:14px; }
.stat-value{ font-family:var(--ff-display); font-weight:700; font-size:25px; margin-top:3px; letter-spacing:-.02em; }
.stat-delta{ font-size:12px; margin-top:8px; display:inline-flex; align-items:center; gap:5px; }
.delta-up{ color:var(--up); }
.delta-down{ color:var(--down); }

/* ------------------------------- TABLOLAR ------------------------------- */
.table-wrap{ overflow-x:auto; }
table.tbl{ width:100%; border-collapse:collapse; font-size:13.5px; }
.tbl th{
  text-align:left; font-weight:600; color:var(--tx-dim); font-size:11.5px;
  text-transform:uppercase; letter-spacing:.05em;
  padding:12px 16px; border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.tbl td{
  padding:13px 16px; border-bottom:1px solid var(--line-soft); vertical-align:middle;
}
.tbl tr:last-child td{ border-bottom:none; }
.tbl tbody tr{ transition:background .12s; }
.tbl tbody tr:hover{ background:var(--surface-2); }
.tbl .right{ text-align:right; }
.t-strong{ font-weight:600; }
.t-mut{ color:var(--tx-mut); }
.t-up{ color:var(--up); font-variant-numeric:tabular-nums; }
.t-down{ color:var(--down); font-variant-numeric:tabular-nums; }
.code-pill{
  font-family:ui-monospace,monospace; font-size:12px;
  background:var(--elev); border:1px solid var(--line); color:var(--gold);
  padding:2px 8px; border-radius:6px;
}

/* ------------------------------- ROZETLER ------------------------------- */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px;
  border:1px solid transparent; white-space:nowrap;
}
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge-ok{ color:var(--up); background:var(--up-bg); }
.badge-off{ color:var(--tx-dim); background:rgba(120,130,160,.1); }
.badge-warn{ color:var(--warn); background:var(--warn-bg); }
.badge-info{ color:var(--info); background:var(--info-bg); }
.badge-bad{ color:var(--down); background:var(--down-bg); }

/* ------------------------------- BUTONLAR ------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  font-family:var(--ff-body); font-weight:600; font-size:13.5px;
  padding:9px 16px; border-radius:10px; cursor:pointer;
  border:1px solid var(--line); background:var(--surface-2); color:var(--tx);
  transition:.15s; text-decoration:none;
}
.btn:hover{ border-color:var(--gold); color:var(--gold); }
.btn-primary{
  background:linear-gradient(180deg,#ffd066,var(--gold)); color:#241a05;
  border-color:var(--gold-dim);
}
.btn-primary:hover{ filter:brightness(1.06); color:#241a05; }
.btn-ghost{ background:transparent; }
.btn-danger{ color:var(--down); border-color:var(--down-bg); }
.btn-danger:hover{ background:var(--down-bg); border-color:var(--down); color:var(--down); }
.btn-sm{ padding:6px 11px; font-size:12.5px; border-radius:8px; }
.btn-row{ display:flex; gap:8px; flex-wrap:wrap; }

/* ------------------------------- FORMLAR -------------------------------- */
.form-grid{ display:grid; gap:16px; grid-template-columns:repeat(2,1fr); }
.field{ display:flex; flex-direction:column; gap:6px; }
.field.full{ grid-column:1 / -1; }
label.lbl{ font-size:12.5px; font-weight:600; color:var(--tx-mut); }
.inp, select.inp, textarea.inp{
  background:var(--bg); border:1px solid var(--line); color:var(--tx);
  border-radius:10px; padding:10px 12px; font-family:var(--ff-body); font-size:14px;
  width:100%; transition:border .15s, box-shadow .15s;
}
.inp:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); }
.hint{ font-size:11.5px; color:var(--tx-dim); }
textarea.inp{ resize:vertical; min-height:84px; }

/* ------------------------------- FLASH ---------------------------------- */
.flash{
  padding:12px 16px; border-radius:10px; margin-bottom:16px; font-size:13.5px;
  border:1px solid var(--line);
}
.flash-ok{ background:var(--up-bg); border-color:rgba(52,211,153,.4); color:#a7f3d0; }
.flash-bad{ background:var(--down-bg); border-color:rgba(251,113,133,.4); color:#fecdd3; }
.flash-warn{ background:var(--warn-bg); border-color:rgba(251,191,36,.4); color:#fde68a; }
.flash-info{ background:var(--info-bg); border-color:rgba(96,165,250,.4); color:#bfdbfe; }

/* ------------------------------- DİĞER ---------------------------------- */
.page-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.page-head .lead{ color:var(--tx-mut); font-size:13.5px; margin-top:4px; }
.toolbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.toolbar .inp{ max-width:280px; }
.spacer{ flex:1; }
.mb-16{ margin-bottom:16px; }
.mt-20{ margin-top:20px; }
.muted{ color:var(--tx-mut); }
.empty{ text-align:center; padding:48px 20px; color:var(--tx-dim); }
.empty-ic{ font-size:30px; opacity:.5; margin-bottom:8px; }
.chart-box{ position:relative; height:280px; padding:8px 4px; }
.chart-box.sm{ height:220px; }
.pager{ display:flex; gap:6px; justify-content:center; margin-top:18px; }
.pager a, .pager span{
  min-width:34px; height:34px; display:grid; place-items:center; padding:0 10px;
  border:1px solid var(--line); border-radius:8px; font-size:13px; color:var(--tx-mut);
}
.pager a:hover{ border-color:var(--gold); color:var(--gold); }
.pager .cur{ background:var(--gold-soft); color:var(--gold); border-color:var(--gold); }
.kv{ display:grid; grid-template-columns:140px 1fr; gap:10px 16px; font-size:13.5px; }
.kv dt{ color:var(--tx-dim); }
.kv dd{ margin:0; font-weight:500; }
.section-title{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--tx-dim); margin:24px 0 12px; font-weight:600; }

/* ------------------------------- RESPONSIVE ----------------------------- */
@media (max-width:1100px){ .cols-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:920px){
  .sidebar{ position:fixed; left:0; top:0; z-index:60; transform:translateX(-100%); transition:transform .22s ease; }
  .nav-toggle-input:checked ~ .shell .sidebar{ transform:translateX(0); }
  .nav-toggle-input:checked ~ .shell .scrim{ display:block; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:50; }
  .burger{ display:flex; }
  .cols-3, .cols-2{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .cols-4{ grid-template-columns:1fr; }
  .content{ padding:18px; }
  .topbar{ padding:0 16px; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

/* ------------------------------- GİRİŞ EKRANI --------------------------- */
.login-wrap{ min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card{
  width:100%; max-width:400px; background:var(--surface);
  border:1px solid var(--line-soft); border-radius:18px; box-shadow:var(--shadow);
  padding:34px 30px;
}
.login-brand{ display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.login-brand .brand-chip{ width:36px; height:36px; flex:0 0 36px; }
.login-brand .brand-name{ font-size:19px; }
.login-sub{ color:var(--tx-mut); font-size:13.5px; margin:0 0 24px; }
.login-card .field{ margin-bottom:16px; }
.login-card .btn{ width:100%; }
.login-foot{ text-align:center; margin-top:18px; font-size:12px; color:var(--tx-dim); }

/* ------------------------------- INSTALLER ------------------------------ */
.install-wrap{ min-height:100vh; display:grid; place-items:center; padding:24px; }
.install-card{ width:100%; max-width:560px; background:var(--surface); border:1px solid var(--line-soft); border-radius:18px; box-shadow:var(--shadow); padding:34px; }
.install-card h1{ font-size:22px; margin-bottom:6px; }
.check{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line-soft); font-size:13.5px; }
.check:last-child{ border-bottom:none; }
.dot{ width:9px; height:9px; border-radius:50%; flex:0 0 9px; }
.dot-ok{ background:var(--up); } .dot-bad{ background:var(--down); }