/* ============ PANEL 2 — NOVASPIN AFFILIATES ============
   Açık, ürün-odaklı arayüz. Kart yığını yerine tek şerit KPI,
   seviye ilerlemesi ve hafif indigo/nane vurgular. */

.nova {
	--bg: #f4f5fa;
	--card: #ffffff;
	--ink: #171a2e;
	--ink-2: #5b6079;
	--line: #e5e6f1;
	--indigo: #4438f5;
	--indigo-soft: #eeecff;
	--mint: #10b981;
	--amber: #f59e0b;
	--rose: #e5484d;
	--accent: #4438f5;

	background: var(--bg);
	color: var(--ink);
	font-family: "Inter", system-ui, sans-serif;
	font-size: 14.5px;
	line-height: 1.55;
	min-height: 100vh;
}

/* ---- üst çubuk ---- */
.nova .nv-top {
	display: flex; align-items: center; gap: 26px;
	padding: 0 28px; height: 62px;
	background: var(--card); border-bottom: 1px solid var(--line);
	position: sticky; top: 0; z-index: 20;
}
.nova .nv-top__brand { display: flex; align-items: center; gap: 10px; font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 16px; }
.nova .nv-top__brand em { font-style: normal; color: var(--ink-2); font-weight: 500; }
.nova .nv-logo {
	width: 30px; height: 30px; border-radius: 10px;
	background: linear-gradient(140deg, var(--indigo), #7b5cff 60%, var(--mint));
	display: grid; place-items: center;
}
.nova .nv-logo span { width: 9px; height: 9px; border-radius: 50%; background: #fff; }
.nova .nv-tabs { display: flex; gap: 2px; margin-right: auto; overflow-x: auto; }
.nova .nv-tabs button {
	padding: 8px 14px; border-radius: 9px; color: var(--ink-2); font-size: 14px; font-weight: 500;
	white-space: nowrap; transition: background .15s, color .15s;
}
.nova .nv-tabs button:hover { background: #f2f2f8; color: var(--ink); }
.nova .nv-tabs button.is-on { background: var(--indigo-soft); color: var(--indigo); font-weight: 600; }
.nova .nv-top__right { display: flex; align-items: center; gap: 12px; }
.nova .nv-pill { font-size: 13px; color: var(--ink-2); background: #f3f3f9; padding: 6px 12px; border-radius: 999px; }
.nova .nv-cur select {
	background: #f3f3f9; color: var(--ink); border: 1px solid var(--line);
	border-radius: 999px; padding: 6px 10px; font-size: 13px; font-weight: 600;
}
.nova .nv-cur select:hover { background: #ecebf7; }

.nova .nv-avatar {
	width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
	background: var(--ink); color: #fff; font-size: 12px; font-weight: 600;
}

.nova .nv-wrap { max-width: 1320px; margin: 0 auto; padding: 26px 28px 64px; }

.nova .nv-headline {
	display: flex; justify-content: space-between; align-items: flex-end; gap: 18px;
	flex-wrap: wrap; margin-bottom: 20px;
}
.nova .nv-headline h1 { margin: 0; font-family: "Space Grotesk", sans-serif; font-size: 26px; font-weight: 600; letter-spacing: -.015em; }
.nova .nv-headline p { margin: 4px 0 0; color: var(--ink-2); font-size: 13.5px; }
.nova .nv-range { display: flex; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 4px; }
.nova .nv-range button { padding: 7px 13px; border-radius: 8px; font-size: 13px; color: var(--ink-2); }
.nova .nv-range button.is-on { background: var(--ink); color: #fff; font-weight: 600; }

/* ---- kahraman ---- */
.nova .nv-hero {
	display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 18px;
	margin-bottom: 18px;
}
.nova .nv-hero__main, .nova .nv-hero__chart, .nova .nv-card, .nova .nv-strip, .nova .nv-balance {
	background: var(--card); border: 1px solid var(--line); border-radius: 16px;
}
.nova .nv-hero__main { padding: 24px; }
.nova .nv-hero__chart { padding: 20px 22px 10px; }
.nova .nv-hero__label { margin: 0; color: var(--ink-2); font-size: 13.5px; }
.nova .nv-hero__value {
	margin: 4px 0 0; font-family: "Space Grotesk", sans-serif; font-weight: 700;
	font-size: clamp(34px, 4.2vw, 46px); letter-spacing: -.03em; line-height: 1.05;
	font-variant-numeric: tabular-nums;
}
.nova .nv-hero__delta { margin: 6px 0 22px; font-size: 13px; color: var(--ink-2); }
.nova .nv-hero__delta .up { color: var(--mint); font-weight: 600; }
.nova .nv-hero__delta .down { color: var(--rose); font-weight: 600; }

.nova .nv-tier { background: #f7f7fc; border-radius: 13px; padding: 14px 16px; margin-bottom: 20px; }
.nova .nv-tier__row { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); }
.nova .nv-tier__row b { color: var(--ink); font-variant-numeric: tabular-nums; }
.nova .nv-tier__bar { height: 7px; border-radius: 4px; background: #e3e3ee; margin: 9px 0 8px; overflow: hidden; }
.nova .nv-tier__bar span { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--indigo), var(--mint)); transition: width .5s ease; }
.nova .nv-tier__note { margin: 0; font-size: 12.5px; color: var(--ink-2); }

.nova .nv-hero__split { display: grid; gap: 0; }
.nova .nv-hero__split li { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.nova .nv-hero__split li span { color: var(--ink-2); }
.nova .nv-hero__split li b { font-variant-numeric: tabular-nums; }
.nova .nv-hero__split li b.is-neg { color: var(--rose); }

/* ---- KPI şeridi ---- */
.nova .nv-strip {
	display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
	margin-bottom: 18px; overflow: hidden;
}
.nova .nv-strip > div { padding: 16px 18px; border-right: 1px solid var(--line); }
.nova .nv-strip > div:last-child { border-right: 0; }
.nova .nv-strip p { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.nova .nv-strip b {
	display: block; margin-top: 3px; font-family: "Space Grotesk", sans-serif;
	font-size: 22px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.nova .nv-strip i { font-style: normal; font-size: 12px; }
.nova .nv-strip i.up, .nova .nv-legend .up { color: var(--mint); }
.nova .nv-strip i.down { color: var(--rose); }

/* ---- kartlar ---- */
.nova .nv-card { padding: 20px 22px; margin-bottom: 18px; }
.nova .nv-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.nova .nv-card__head h2 { margin: 0; font-family: "Space Grotesk", sans-serif; font-size: 16.5px; font-weight: 600; }
.nova .nv-hint { margin-left: auto; font-size: 12.5px; color: var(--ink-2); }
.nova .nv-note { margin: 14px 0 0; font-size: 13px; color: var(--ink-2); }
.nova .nv-note span { color: var(--ink); font-weight: 600; }
.nova .nv-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; }
.nova .nv-grid .nv-card { margin-bottom: 18px; }

.nova .nv-metric { display: flex; gap: 3px; margin-left: auto; background: #f4f4fa; padding: 3px; border-radius: 9px; }
.nova .nv-metric button { padding: 5px 11px; border-radius: 7px; font-size: 12.5px; color: var(--ink-2); }
.nova .nv-metric button.is-on { background: var(--card); color: var(--indigo); font-weight: 600; box-shadow: 0 1px 2px rgba(23,26,46,.09); }

/* ---- huni ---- */
.nova .nv-funnel { display: grid; gap: 12px; }
.nova .nv-funnel li {
	display: grid; grid-template-columns: 130px auto 1fr 74px; align-items: center; gap: 12px;
	font-size: 13.5px;
}
.nova .nv-funnel li span { color: var(--ink-2); }
.nova .nv-funnel li b { font-family: "Space Grotesk", sans-serif; font-size: 16px; font-variant-numeric: tabular-nums; min-width: 68px; }
.nova .nv-funnel li em {
	display: block; height: 10px; border-radius: 5px; width: var(--w);
	background: color-mix(in srgb, var(--indigo) 78%, #fff);
}
.nova .nv-funnel li[data-step="2"] em { background: color-mix(in srgb, var(--indigo) 58%, #fff); }
.nova .nv-funnel li[data-step="3"] em { background: color-mix(in srgb, var(--indigo) 38%, #fff); }
.nova .nv-funnel li[data-step="4"] em { background: var(--mint); }
.nova .nv-funnel li i { font-style: normal; text-align: right; font-size: 12.5px; color: var(--ink-2); }

.nova .nv-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.nova .nv-mini p { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.nova .nv-mini b { font-family: "Space Grotesk", sans-serif; font-size: 18px; font-variant-numeric: tabular-nums; }

/* ---- donut + lejant ---- */
.nova .nv-donutwrap { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: center; }
.nova .nv-legend { display: grid; gap: 8px; font-size: 13px; }
.nova .nv-legend li { display: flex; align-items: center; gap: 9px; }
.nova .nv-legend .swatch { width: 9px; height: 9px; border-radius: 3px; }
.nova .nv-legend .val { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* ---- gelir dökümü ---- */
.nova .nv-money { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.nova .nv-money > div { background: var(--card); padding: 14px 16px; }
.nova .nv-money p { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.nova .nv-money b { display: block; margin-top: 3px; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nova .nv-money .is-strong { background: var(--indigo-soft); }
.nova .nv-money .is-strong b { color: var(--indigo); }

/* ---- tablolar ---- */
.nova .nv-table { font-size: 13.5px; }
.nova .nv-table thead th {
	text-align: left; font-weight: 600; font-size: 12px; color: var(--ink-2);
	padding: 10px 14px; background: #fafafd; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.nova .nv-table thead th:first-child { border-radius: 9px 0 0 0; }
.nova .nv-table thead th:last-child { border-radius: 0 9px 0 0; }
.nova .nv-table th.num, .nova .nv-table td.num { text-align: right; }
.nova .nv-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.nova .nv-table tbody tr:hover td { background: #fafaff; }
.nova .nv-table .cell-code { font-size: 12.5px; color: var(--ink-2); }
.nova .tag {
	font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
	background: #f0f0f6; color: var(--ink-2);
}
.nova .tag[data-tag="Aktif"], .nova .tag[data-tag="Ödendi"] { background: #e6f8f1; color: #067a55; }
.nova .tag[data-tag="VIP"] { background: #fff3dd; color: #a86800; }
.nova .tag[data-tag="Zarar"], .nova .tag[data-tag="İptal"] { background: #fdecec; color: #b4272b; }
.nova .tag[data-tag="Bekliyor"] { background: var(--indigo-soft); color: var(--indigo); }

/* ---- bakiye + düğmeler ---- */
.nova .nv-balance { display: flex; align-items: center; gap: 32px; padding: 20px 24px; margin-bottom: 18px; flex-wrap: wrap; }
.nova .nv-balance p { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.nova .nv-balance b { font-family: "Space Grotesk", sans-serif; font-size: 24px; font-variant-numeric: tabular-nums; }
.nova .nv-btn {
	margin-left: auto; padding: 11px 20px; border-radius: 10px;
	background: var(--indigo); color: #fff; font-weight: 600; font-size: 14px;
	transition: background .15s;
}
.nova .nv-btn:hover { background: #3428e0; }
.nova .nv-link { display: flex; gap: 10px; flex-wrap: wrap; }
.nova .nv-link code {
	flex: 1 1 340px; padding: 12px 14px; border-radius: 10px;
	background: #f6f6fb; border: 1px solid var(--line); font-size: 13px; color: var(--indigo); overflow-x: auto;
}
.nova .nv-link .nv-btn { margin-left: 0; }

/* ---- grafikler ---- */
.nova .aps-chart { color: var(--ink-2); }
.nova .aps-chart .series-line { stroke: var(--indigo); }
.nova .aps-chart .series-area { fill: url(#nv-fade); }
.nova .aps-chart .hover-dot { fill: #fff; stroke: var(--indigo); }
.nova .aps-chart .slice-0 { fill: #4438f5; }
.nova .aps-chart .slice-1 { fill: #6f63ff; }
.nova .aps-chart .slice-2 { fill: #9b91ff; }
.nova .aps-chart .slice-3 { fill: #10b981; }
.nova .aps-chart .slice-4 { fill: #4fd1a5; }
.nova .aps-chart .slice-5 { fill: #f59e0b; }
.nova .aps-chart .slice-6 { fill: #d7d7e4; }
.nova .aps-chart .donut-center { font-family: "Space Grotesk", sans-serif; fill: var(--ink); }
.nova .aps-tip { background: var(--ink); color: #fff; border-radius: 9px; }
.nova .aps-tip b { color: #fff; }

@media (max-width: 1100px) {
	.nova .nv-hero { grid-template-columns: 1fr; }
	.nova .nv-grid { grid-template-columns: 1fr; }
	.nova .nv-strip { grid-template-columns: repeat(3, 1fr); }
	.nova .nv-strip > div:nth-child(3n) { border-right: 0; }
	.nova .nv-money { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
	.nova .nv-top { padding: 0 14px; gap: 14px; }
	.nova .nv-pill { display: none; }
	.nova .nv-wrap { padding: 18px 14px 48px; }
	.nova .nv-strip { grid-template-columns: repeat(2, 1fr); }
	.nova .nv-strip > div:nth-child(3n) { border-right: 1px solid var(--line); }
	.nova .nv-strip > div:nth-child(2n) { border-right: 0; }
	.nova .nv-donutwrap { grid-template-columns: 1fr; }
	.nova .nv-funnel li { grid-template-columns: 100px auto 1fr; }
	.nova .nv-funnel li i { display: none; }
	.nova .nv-table { display: block; overflow-x: auto; white-space: nowrap; }
}