/* Kriptofoni Top Cards 2.0 — ön yüz
   Tema yazı tipini miras alır; yalnızca kendi kapsayıcısında (.kftc) çalışır. */

.kftc {
	--kftc-surface: #ffffff;
	--kftc-surface-2: #f6f7fa;
	--kftc-ink: #161f36;
	--kftc-muted: #667085;
	--kftc-line: #e3e7ee;
	--kftc-brand: #f28020;
	--kftc-up: #159947;
	--kftc-up-bg: #e8f7ee;
	--kftc-down: #d92d20;
	--kftc-down-bg: #fdecea;
	--kftc-btc: #f7931a;
	--kftc-eth: #627eea;
	--kftc-alt: #14b8a6;
	--kftc-xfear: #d92d20;
	--kftc-fear: #f0863a;
	--kftc-neutral: #e6b800;
	--kftc-greed: #7cb342;
	--kftc-xgreed: #159947;
	--kftc-radius: 10px;

	display: block;
	box-sizing: border-box;
	margin: 0 0 24px;
	color: var(--kftc-ink);
	font-family: inherit;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}
.kftc *, .kftc *::before, .kftc *::after { box-sizing: border-box; }

.kftc[data-theme="dark"] {
	--kftc-surface: #161f36;
	--kftc-surface-2: #1c2745;
	--kftc-ink: #f3f5f9;
	--kftc-muted: #9aa4b8;
	--kftc-line: #2a3656;
	--kftc-up: #3ccf72;
	--kftc-up-bg: rgba(60, 207, 114, .14);
	--kftc-down: #ff6b5e;
	--kftc-down-bg: rgba(255, 107, 94, .14);
}
@media (prefers-color-scheme: dark) {
	.kftc[data-theme="auto"] {
		--kftc-surface: #161f36;
		--kftc-surface-2: #1c2745;
		--kftc-ink: #f3f5f9;
		--kftc-muted: #9aa4b8;
		--kftc-line: #2a3656;
		--kftc-up: #3ccf72;
		--kftc-up-bg: rgba(60, 207, 114, .14);
		--kftc-down: #ff6b5e;
		--kftc-down-bg: rgba(255, 107, 94, .14);
	}
}

/* Tek parça şerit: kartlar ayrı kutular değil, ince çizgilerle bölünmüş bir yüzey. */
.kftc-grid {
	display: grid;
	grid-template-columns: repeat(var(--kftc-cols, 4), minmax(0, 1fr));
	gap: 1px;
	background: var(--kftc-line);
	border: 1px solid var(--kftc-line);
	border-radius: var(--kftc-radius);
	overflow: hidden;
}
.kftc-n1 { --kftc-cols: 1; }
.kftc-n2 { --kftc-cols: 2; }
.kftc-n3 { --kftc-cols: 3; }
.kftc-n4 { --kftc-cols: 4; }
.kftc-n5 { --kftc-cols: 4; }
.kftc-n5 .kftc-card:last-child { grid-column: span 4; }
.kftc-n6 { --kftc-cols: 3; }
.kftc-n7 { --kftc-cols: 4; }
.kftc-n8 { --kftc-cols: 4; }
.kftc-n7 .kftc-card:last-child { grid-column: span 2; }

.kftc-card {
	position: relative;
	background: var(--kftc-surface);
	padding: 12px 14px 11px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0;
}
.kftc-compact .kftc-card { padding: 12px 14px 10px; gap: 8px; }

.kftc-title {
	margin: 0;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--kftc-muted);
	letter-spacing: 0;
	line-height: 1.2;
}

.kftc-value {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 10px;
}
.kftc-num {
	font-size: 23px;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.05;
	color: var(--kftc-ink);
	white-space: nowrap;
}
.kftc-compact .kftc-num { font-size: 22px; }

.kftc-delta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12.5px;
	font-weight: 700;
	padding: 2px 8px 2px 6px;
	border-radius: 999px;
	white-space: nowrap;
}
.kftc-delta.kftc-up { color: var(--kftc-up); background: var(--kftc-up-bg); }
.kftc-delta.kftc-down { color: var(--kftc-down); background: var(--kftc-down-bg); }
.kftc-arrow {
	width: 0; height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
}
.kftc-up .kftc-arrow { border-bottom: 6px solid currentColor; }
.kftc-down .kftc-arrow { border-top: 6px solid currentColor; }

.kftc-sub, .kftc-na, .kftc-read {
	margin: 0;
	font-size: 12.5px;
	color: var(--kftc-muted);
}
.kftc-sub b { font-weight: 700; }
b.kftc-up { color: var(--kftc-up); }
b.kftc-down { color: var(--kftc-down); }
.kftc-read { font-weight: 600; color: var(--kftc-ink); }

.kftc-sr {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Eğilim çizgisi */
.kftc-spark { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: auto; }
.kftc-spark svg { width: 100%; max-width: 120px; min-width: 70px; height: 28px; overflow: visible; flex: 1 1 70px; }
.kftc-spark polyline { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.kftc-spark circle { fill: currentColor; }
.kftc-spark.kftc-up { color: var(--kftc-up); }
.kftc-spark.kftc-down { color: var(--kftc-down); }
.kftc-spark-cap { font-size: 11.5px; color: var(--kftc-muted); white-space: nowrap; }

/* Pay dağılımı: tek yığılmış bar */
.kftc-stack {
	display: flex;
	height: 12px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--kftc-surface-2);
	gap: 2px;
}
.kftc-seg { display: block; height: 100%; flex: 0 0 var(--w); min-width: 0; }
.kftc-seg-btc { background: var(--kftc-btc); }
.kftc-seg-eth { background: var(--kftc-eth); }
.kftc-seg-alt { background: var(--kftc-alt); }
.kftc-legend {
	list-style: none;
	margin: 0; padding: 0;
	display: flex; flex-direction: column;
	gap: 5px;
	font-size: 12.5px;
	color: var(--kftc-muted);
}
.kftc-legend li { display: flex; align-items: center; gap: 6px; }
.kftc-legend b { color: var(--kftc-ink); font-weight: 700; margin-left: auto; }
.kftc-legend { gap: 3px; font-size: 12px; }
.kftc-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.kftc-dot-btc { background: var(--kftc-btc); }
.kftc-dot-eth { background: var(--kftc-eth); }
.kftc-dot-alt { background: var(--kftc-alt); }

/* Korku ve açgözlülük göstergesi */
.kftc-gauge { position: relative; display: flex; align-items: center; gap: 12px; }
.kftc-gauge-svg { width: 110px; flex: 0 0 110px; height: auto; display: block; }
.kftc-arc { fill: none; stroke-width: 14; stroke-linecap: butt; opacity: .28; transition: opacity .3s; }
.kftc-arc-xfear { stroke: var(--kftc-xfear); }
.kftc-arc-fear { stroke: var(--kftc-fear); }
.kftc-arc-neutral { stroke: var(--kftc-neutral); }
.kftc-arc-greed { stroke: var(--kftc-greed); }
.kftc-arc-xgreed { stroke: var(--kftc-xgreed); }
.kftc-fg-xfear .kftc-arc-xfear, .kftc-fg-fear .kftc-arc-fear, .kftc-fg-neutral .kftc-arc-neutral,
.kftc-fg-greed .kftc-arc-greed, .kftc-fg-xgreed .kftc-arc-xgreed { opacity: 1; }
.kftc-needle { transform-box: view-box; transform-origin: 100px 96px; transform: rotate(var(--deg)); }
.kftc-gauge-dot { display: none; fill: var(--kftc-ink); stroke: var(--kftc-surface); stroke-width: 2.5; }
.kftc-needle line { stroke: var(--kftc-ink); stroke-width: 3; stroke-linecap: round; }
.kftc-needle circle { fill: var(--kftc-ink); }
.kftc-gauge-read { text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.kftc-gauge-read .kftc-num { font-size: 26px; }
.kftc-gauge-label { font-size: 12.5px; font-weight: 600; }
.kftc-fg-xfear .kftc-gauge-label { color: var(--kftc-xfear); }
.kftc-fg-fear .kftc-gauge-label { color: var(--kftc-fear); }
.kftc-fg-neutral .kftc-gauge-label { color: #b38f00; }
.kftc-fg-greed .kftc-gauge-label { color: var(--kftc-greed); }
.kftc-fg-xgreed .kftc-gauge-label { color: var(--kftc-xgreed); }
.kftc[data-theme="dark"] .kftc-fg-neutral .kftc-gauge-label { color: var(--kftc-neutral); }

/* Sezon endeksi: iki kutuplu ray */
.kftc-season { display: flex; flex-direction: column; gap: 6px; }
.kftc-season-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--kftc-muted); }
.kftc-season-track {
	position: relative;
	height: 10px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--kftc-btc), var(--kftc-surface-2) 50%, var(--kftc-alt));
}
.kftc-tick { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--kftc-line); transform: translateX(-.5px); }
.kftc-marker {
	position: absolute;
	top: 50%;
	left: var(--x);
	width: 16px; height: 16px;
	border-radius: 50%;
	background: var(--kftc-brand);
	border: 3px solid var(--kftc-surface);
	box-shadow: 0 0 0 1px var(--kftc-line);
	transform: translate(-50%, -50%);
}

/* Günün öne çıkanları */
.kftc-movers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.kftc-mover { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; }
.kftc-mover-sym { grid-row: 1; font-weight: 700; font-size: 14px; color: var(--kftc-ink); }
.kftc-mover-name { grid-row: 2; grid-column: 1 / 3; font-size: 11.5px; color: var(--kftc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kftc-mover-price { grid-row: 1; grid-column: 2; font-size: 12.5px; color: var(--kftc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kftc-mover .kftc-delta { grid-row: 1 / 3; grid-column: 3; }

/* Alt satır */
.kftc-foot {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 4px 16px;
	padding: 8px 4px 0;
	font-size: 11.5px;
	color: var(--kftc-muted);
}

/* Boş durum */
.kftc-empty p {
	margin: 0;
	padding: 14px 16px;
	border: 1px dashed var(--kftc-line);
	border-radius: var(--kftc-radius);
	background: var(--kftc-surface);
	color: var(--kftc-muted);
	font-size: 13.5px;
}

/* Hareket: tek bir açılış anı, görünür olduğunda. Kullanıcı tercihine saygı. */
.kftc-animate .kftc-seg { flex-basis: 0; transition: flex-basis .8s cubic-bezier(.2,.7,.2,1); }
.kftc-animate.kftc-in .kftc-seg { flex-basis: var(--w); }
.kftc-animate .kftc-needle { transform: rotate(0deg); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.kftc-animate.kftc-in .kftc-needle { transform: rotate(var(--deg)); }
.kftc-animate .kftc-marker { left: 50%; transition: left .8s cubic-bezier(.2,.7,.2,1); }
.kftc-animate.kftc-in .kftc-marker { left: var(--x); }
@media (prefers-reduced-motion: reduce) {
	.kftc-animate .kftc-seg, .kftc-animate .kftc-needle, .kftc-animate .kftc-marker { transition: none; }
	.kftc-animate .kftc-seg { flex-basis: var(--w); }
	.kftc-animate .kftc-needle { transform: rotate(var(--deg)); }
	.kftc-animate .kftc-marker { left: var(--x); }
}

/* Duyarlı */
@media (max-width: 1024px) and (min-width: 769px) {
	.kftc-n3, .kftc-n4 { --kftc-cols: 2; }
	.kftc-n5, .kftc-n6, .kftc-n7, .kftc-n8 { --kftc-cols: 3; }
	.kftc-card:last-child { grid-column: auto; }
	.kftc-n3 .kftc-card:last-child, .kftc-n5 .kftc-card:last-child, .kftc-n8 .kftc-card:last-child { grid-column: span 2; }
	.kftc-n7 .kftc-card:last-child { grid-column: span 3; }
}

/* Telefon: ince satırlar. Her kart tek satır (başlık solda, değer sağda); grafikler küçülür veya gizlenir.
   8 kart ≈ 400 px; tümü tek bakışta görünür, kaydırma yok. */
@media (max-width: 768px) {
	.kftc { margin-bottom: 18px; }
	.kftc-title { font-size: 12px; }
	.kftc-spark-cap { display: none; }

	.kftc-m-rows .kftc-grid { --kftc-cols: 1; }
	.kftc-m-rows .kftc-card {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 9px 12px;
		min-height: 46px;
		grid-column: auto !important;
	}
	.kftc-m-rows .kftc-title { flex: 0 0 40%; max-width: 40%; }
	.kftc-m-rows .kftc-num { font-size: 17px; }
	.kftc-m-rows .kftc-delta { font-size: 11.5px; padding: 1px 6px 1px 5px; }
	.kftc-m-rows .kftc-value { justify-content: flex-end; gap: 4px 8px; flex-wrap: nowrap; }
	.kftc-m-rows .kftc-spark,
	.kftc-m-rows .kftc-sub,
	.kftc-m-rows .kftc-season-ends,
	.kftc-m-rows .kftc-gauge-svg,
	.kftc-m-rows .kftc-card-marketcap .kftc-sub,
	.kftc-m-rows .kftc-mover-name,
	.kftc-m-rows .kftc-mover-price { display: none; }

	/* Pay dağılımı: ince bar + tek satır lejant */
	.kftc-m-rows .kftc-card-dominance { flex-wrap: wrap; }
	.kftc-m-rows .kftc-stack { height: 8px; flex: 1 1 auto; order: 2; }
	.kftc-m-rows .kftc-legend { flex-direction: row; flex-wrap: wrap; gap: 2px 10px; width: 100%; order: 3; font-size: 11.5px; }
	.kftc-m-rows .kftc-legend li { display: inline-flex; gap: 4px; }
	.kftc-m-rows .kftc-legend b { margin-left: 0; }

	/* Korku ve açgözlülük: sayı + etiket yan yana */
	.kftc-m-rows .kftc-gauge { gap: 0; }
	.kftc-m-rows .kftc-gauge-read { flex-direction: row; align-items: baseline; gap: 8px; }
	.kftc-m-rows .kftc-gauge-read .kftc-num { font-size: 17px; }
	.kftc-m-rows .kftc-gauge-label { font-size: 12px; }

	/* Sezon endeksi: küçük ray + sayı + yorum */
	.kftc-m-rows .kftc-card-altseason { flex-wrap: nowrap; }
	.kftc-m-rows .kftc-season { flex: 1 1 auto; gap: 0; min-width: 60px; }
	.kftc-m-rows .kftc-season-track { height: 6px; }
	.kftc-m-rows .kftc-marker { width: 12px; height: 12px; border-width: 2px; }
	.kftc-m-rows .kftc-card-altseason .kftc-value { flex: 0 0 auto; }
	.kftc-m-rows .kftc-read { font-size: 12px; }

	/* Öne çıkanlar: iki kısa rozet */
	.kftc-m-rows .kftc-movers { flex-direction: row; gap: 10px; flex-wrap: nowrap; justify-content: flex-end; }
	.kftc-m-rows .kftc-mover { grid-template-columns: auto auto; grid-template-rows: auto; column-gap: 6px; }
	.kftc-m-rows .kftc-mover-sym { font-size: 13px; }
	.kftc-m-rows .kftc-mover .kftc-delta { grid-row: 1; grid-column: 2; }

	/* Küçük kutular: yana kaydırılan, ortalanmış içerikli ayrı kartlar */
	.kftc-m-cards { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0 16px; }
	.kftc-m-cards .kftc-grid {
		display: flex;
		gap: 10px;
		background: transparent;
		border: 0;
		border-radius: 0;
		overflow: visible;
		overflow-x: auto;
		padding: 2px 0 8px;
		scroll-snap-type: x proximity;
		scroll-padding-left: 16px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		--kftc-cols: 1;
	}
	.kftc-m-cards .kftc-grid::-webkit-scrollbar { display: none; }
	.kftc-m-cards .kftc-card {
		flex: 0 0 148px;
		min-height: 118px;
		padding: 12px 10px 11px;
		gap: 4px;
		align-items: center;
		justify-content: center;
		text-align: center;
		border: 1px solid var(--kftc-line);
		border-radius: 14px;
		box-shadow: 0 1px 2px rgba(22, 31, 54, .05);
		scroll-snap-align: start;
		grid-column: auto !important;
	}
	.kftc-m-cards .kftc-title { font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
	.kftc-m-cards .kftc-num { font-size: 22px; }
	.kftc-m-cards .kftc-value { flex-direction: column; align-items: center; gap: 4px; }
	.kftc-m-cards .kftc-delta { background: transparent; padding: 0; font-size: 14px; }
	.kftc-m-cards .kftc-spark, .kftc-m-cards .kftc-sub, .kftc-m-cards .kftc-season-ends,
	.kftc-m-cards .kftc-mover-name, .kftc-m-cards .kftc-mover-price, .kftc-m-cards .kftc-sr { display: none; }

	.kftc-m-cards .kftc-stack { width: 100%; height: 8px; }
	.kftc-m-cards .kftc-legend { flex-direction: column; gap: 1px; font-size: 11px; align-items: stretch; width: 100%; }
	.kftc-m-cards .kftc-legend li { display: flex; }
	.kftc-m-cards .kftc-legend b { margin-left: auto; }

	.kftc-m-cards .kftc-gauge { flex-direction: column; gap: 0; width: 100%; }
	.kftc-m-cards .kftc-gauge-svg { width: 104px; flex-basis: auto; overflow: visible; }
	.kftc-m-cards .kftc-needle { display: none; }
	.kftc-m-cards .kftc-gauge-dot { display: block; }
	.kftc-m-cards .kftc-gauge-read { align-items: center; margin-top: -22px; }
	.kftc-m-cards .kftc-gauge-read .kftc-num { font-size: 22px; }
	.kftc-m-cards .kftc-gauge-label { font-size: 11.5px; }

	.kftc-m-cards .kftc-season { width: 100%; gap: 0; }
	.kftc-m-cards .kftc-season-track { height: 6px; }
	.kftc-m-cards .kftc-marker { width: 12px; height: 12px; border-width: 2px; }
	.kftc-m-cards .kftc-card-altseason .kftc-value { flex-direction: row; align-items: baseline; gap: 6px; }
	.kftc-m-cards .kftc-read { font-size: 12px; }

	.kftc-m-cards .kftc-movers { gap: 4px; width: 100%; }
	.kftc-m-cards .kftc-mover { grid-template-columns: auto auto; grid-template-rows: auto; justify-content: center; column-gap: 6px; }
	.kftc-m-cards .kftc-mover-sym { font-size: 14px; }
	.kftc-m-cards .kftc-mover .kftc-delta { grid-row: 1; grid-column: 2; font-size: 13px; }

	/* İsteğe bağlı ızgara */
	.kftc-m-grid .kftc-grid { --kftc-cols: 2; }
	.kftc-m-grid .kftc-card { padding: 11px 12px 10px; gap: 6px; }
	.kftc-m-grid .kftc-num { font-size: 20px; }
	.kftc-m-grid .kftc-gauge-svg { width: 92px; flex-basis: 92px; }
	.kftc-m-grid .kftc-spark svg { max-width: none; }
	.kftc-m-grid .kftc-card:last-child:nth-child(odd) { grid-column: span 2; }
	.kftc-m-grid .kftc-gauge { flex-direction: column; align-items: flex-start; gap: 4px; }
}
@media (max-width: 380px) {
	.kftc-m-grid .kftc-grid { --kftc-cols: 1; }
	.kftc-m-grid .kftc-card:last-child { grid-column: auto; }
	.kftc-m-rows .kftc-title { flex-basis: 34%; max-width: 34%; }
	.kftc-m-rows .kftc-num { font-size: 16px; }
}