/*
 * Tasarım token'ları.
 *
 * Gece/gündüz üç durumludur:
 *   1. :root                       → gündüz paleti (varsayılan)
 *   2. prefers-color-scheme: dark  → kullanıcı seçim yapmadıysa sistem takip edilir
 *   3. [data-tema="koyu"/"acik"]   → kullanıcının açık seçimi her ikisini de yener
 *
 * Hiçbir rengin TEK tanımı medya sorgusu içinde olmaz; aksi hâlde
 * tema değiştirme düğmesi yarım çalışır.
 */

:root {
	/* ---- Marka ---- */
	--ts-lacivert: #12294B;
	--ts-lacivert-koyu: #0B1B33;
	--ts-lacivert-acik: #1E3D6B;
	--ts-turuncu: #FF6A13;
	--ts-turuncu-koyu: #E25405;

	/* ---- Anlamsal yüzeyler (gündüz) ---- */
	--ts-zemin: #FFFFFF;
	--ts-zemin-alt: #F4F7FB;
	--ts-yuzey: #FFFFFF;
	--ts-yuzey-vurgu: #F0F4FA;
	--ts-kenar: #D9E1EC;
	--ts-kenar-guclu: #B9C6D8;

	/* ---- Metin (gündüz) ---- */
	--ts-metin: #12181F;
	--ts-metin-yumusak: #4A5768;
	--ts-metin-silik: #6E7C8F;
	--ts-metin-ters: #FFFFFF;

	/* ---- Aksiyon ---- */
	--ts-aksiyon: var(--ts-turuncu);
	--ts-aksiyon-uzeri: var(--ts-turuncu-koyu);
	--ts-aksiyon-metin: #FFFFFF;
	--ts-whatsapp: #1DA851;
	--ts-whatsapp-uzeri: #179044;

	/* ---- Durum ---- */
	--ts-basari: #12805A;
	--ts-uyari: #B45309;
	--ts-tehlike: #C0261C;
	--ts-tehlike-zemin: #FDECEA;

	/* ---- LCD paneli: imza öğesi ---- */
	--ts-lcd-zemin: #0C1017;
	--ts-lcd-metin: #FF8A3D;
	--ts-lcd-silik: #6B4A32;
	--ts-lcd-parilti: rgba(255, 138, 61, 0.28);

	/* ---- Tipografi ---- */
	--ts-yazi: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ts-yazi-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

	/* Akışkan ölçek — mobilde sıkışır, masaüstünde açılır. */
	--ts-fs-xs: 0.75rem;
	--ts-fs-sm: 0.875rem;
	--ts-fs-md: 1rem;
	--ts-fs-lg: clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
	--ts-fs-xl: clamp(1.375rem, 1.2vw + 1.05rem, 1.75rem);
	--ts-fs-2xl: clamp(1.75rem, 2.4vw + 1.15rem, 2.5rem);
	--ts-fs-3xl: clamp(2.125rem, 4vw + 1.1rem, 3.5rem);

	--ts-satir-siki: 1.15;
	--ts-satir: 1.6;
	--ts-aralik-siki: -0.02em;

	/* ---- Boşluk: 8px tabanı ---- */
	--ts-b1: 0.5rem;
	--ts-b2: 1rem;
	--ts-b3: 1.5rem;
	--ts-b4: 2rem;
	--ts-b5: 2.5rem;
	--ts-b6: 3rem;
	--ts-b8: 4rem;
	--ts-b10: 5rem;
	--ts-bolum: clamp(3rem, 7vw, 6rem);

	/* ---- Biçim ---- */
	--ts-yaricap-sm: 6px;
	--ts-yaricap: 12px;
	--ts-yaricap-lg: 18px;
	--ts-golge-sm: 0 1px 2px rgba(18, 41, 75, 0.06);
	--ts-golge: 0 2px 4px rgba(18, 41, 75, 0.06), 0 8px 24px rgba(18, 41, 75, 0.09);
	--ts-golge-lg: 0 4px 8px rgba(18, 41, 75, 0.07), 0 16px 48px rgba(18, 41, 75, 0.14)

	/* ---- Hareket ---- */
	--ts-gecis: 180ms cubic-bezier(0.2, 0, 0.2, 1);
	--ts-gecis-yavas: 320ms cubic-bezier(0.2, 0, 0.2, 1);

	/* ---- Ölçü ---- */
	--ts-kapsayici: 1180px;
	--ts-okuma: 68ch;
	--ts-cubuk-yukseklik: 66px;

	color-scheme: light;
}

/* Sistem koyu tercih ediyorsa ve kullanıcı açıkça "açık" demediyse. */
@media (prefers-color-scheme: dark) {
	:root:not([data-tema="acik"]) {
		--ts-zemin: #0B1220;
		--ts-zemin-alt: #0F1829;
		--ts-yuzey: #141F33;
		--ts-yuzey-vurgu: #1B2942;
		--ts-kenar: #24344F;
		--ts-kenar-guclu: #35496A;

		--ts-metin: #EEF3FA;
		--ts-metin-yumusak: #AFBECF;
		--ts-metin-silik: #8595AA;
		--ts-metin-ters: #0B1220;

		/* Koyu zeminde saf turuncu parlar; hafif yumuşatılır. */
		--ts-turuncu: #FF7F33;
		--ts-turuncu-koyu: #FF6A13;
		--ts-aksiyon-metin: #14100C;

		--ts-basari: #34C48A;
		--ts-uyari: #E0A23C;
		--ts-tehlike: #FF6B5E;
		--ts-tehlike-zemin: #2A1512;

		--ts-golge-sm: 0 1px 2px rgba(4, 9, 18, 0.46);
		--ts-golge: 0 2px 4px rgba(4, 9, 18, 0.4), 0 8px 24px rgba(4, 9, 18, 0.5);
		--ts-golge-lg: 0 4px 8px rgba(4, 9, 18, 0.46), 0 16px 48px rgba(4, 9, 18, 0.6);

		color-scheme: dark;
	}
}

/* Kullanıcının açık seçimi her şeyi yener. */
:root[data-tema="koyu"] {
	--ts-zemin: #0B1220;
	--ts-zemin-alt: #0F1829;
	--ts-yuzey: #141F33;
	--ts-yuzey-vurgu: #1B2942;
	--ts-kenar: #24344F;
	--ts-kenar-guclu: #35496A;

	--ts-metin: #EEF3FA;
	--ts-metin-yumusak: #AFBECF;
	--ts-metin-silik: #8595AA;
	--ts-metin-ters: #0B1220;

	--ts-turuncu: #FF7F33;
	--ts-turuncu-koyu: #FF6A13;
	--ts-aksiyon-metin: #14100C;

	--ts-basari: #34C48A;
	--ts-uyari: #E0A23C;
	--ts-tehlike: #FF6B5E;
	--ts-tehlike-zemin: #2A1512;

	--ts-golge-sm: 0 1px 2px rgba(4, 9, 18, 0.46);
	--ts-golge: 0 2px 4px rgba(4, 9, 18, 0.4), 0 8px 24px rgba(4, 9, 18, 0.5);
	--ts-golge-lg: 0 4px 8px rgba(4, 9, 18, 0.46), 0 16px 48px rgba(4, 9, 18, 0.6);

	color-scheme: dark;
}

:root[data-tema="acik"] {
	color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--ts-gecis: 1ms;
		--ts-gecis-yavas: 1ms;
	}
}